Adding a button to a Form is a great way to add additional functionality right where the user is already focused. Today we are looking at a few different approaches to adding a button. First, we’re looking at handling the upgrade for those of you who have already used the 4.0 button inside of 2011 or if you had a 4.0 environment and are upgrading. If you have a clean 2011 environment, then feel free to skip down to the “From Scratch” section.
There is already some code floating around to create a 4.0 style button inside of CRM 2011. The button we’re creating will instead create a CRM 2011 style button (i.e. “Example Button”).
The CRM 2011 button starts gray and then when the user hovers over it, the button will look like:
Creating our Web Resource
First,name your Web Resource whatever you’d like. In my case, I’m planning to re-use it in various ways, so I’m throwing it in our JS root directory.
Modifying our Form
In our other web resource, the one we setup with the OnLoad, we need the following code.
Why is this so different then the 4.0 code?
If you’ve used the CRM 4.0 code, you’ll notice the code here is a lot shorter. It’s actually pretty different as well.
- For one, instead of modifying the input element we are actually creating a button HTML element. This just means that we can now use about any kind of field instead of just pure textboxes. Not a huge deal, but opens up the email address 3 and other attributes.
- Both are really unsupported but the other uses the deprecated crmForm.all.
- Finally, the button style was meant for 4.0 whereas now we have the 2011 look-n-feel.
So far we’ve mainly focused on if you already were using the 4.0 code and were upgrading. But what if you don’t have the existing code structure? I’d argue against creating a new attribute just to have a button. When adding a new attribute, you are also adding the attribute to the underlying SQL tables and views. Using an existing field isn’t really a great option either because there is always the chance you will need the field or it will overlap with an application from the MS marketplace.
Instead, I’d recommend creating a button place holder web resource and then embedding the web resource on the page. The web resource is just a JPG image like this:
We then place the image wherever we want on the form. Make sure to set the formatting to one column and one row.
Finally, we need a little bit of code added to the /js/formButton.js web resource:
And as for our OnLoad function, we’ll need to use this instead:
Thanks to: Paul Way