XRM 2011 - Microsoft Dynamics CRM 2011 Style Buttons - CRM Software Blog

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.

// CRM 2011 Style Button 
// Creates a button from a form field 
// Paul Way - 1/3/2012
function ConvertToButton(fldName, btnLabel, btnWidth, evt){
   var btn = '<button id="btn_' + fldName + '" ' +
                    ' style="width:' + btnWidth + '" ' +
                    ' class="ms-crm-Button" ' +
                    ' onmouseover="Mscrm.ButtonUtils.hoverOn(this);" ' +
                    ' onmouseout="Mscrm.ButtonUtils.hoverOff(this);" ' +
                 '>' + btnLabel + '</button>';

   var ctrl = Xrm.Page.ui.controls.get(fldName)._control;

   // Add the new button 
   ctrl.get_element().innerHTML += btn;

   // Hide the textbox 
   ctrl.get_element().firstChild.style.display = 'none';

   // Hide the label (optional) 
   Xrm.Page.ui.controls.get('pager').setLabel('');

   // Add Event to the newly created button 
   ctrl.get_element().childNodes[1].attachEvent('onclick', evt);

}

Modifying our Form

To use this new function, you’ll first need to add the newly created web resource to the form. You’ll also want to have a separate JS web resource to call the ConvertToButton function. In my case, I already have a web resource for contact specific JavaScript. If I didn’t, I would need to create a new web resource and then place my contact specific code there. Here’s an example screenshot:

By having two web resources for this, you’ll have only one version of your ConvertToButton function throughout your CRM 2011 environment. Let’s say down the road you’ll need to update the function to change the label to “Button”, then you only need to modify one file. In CRM 4.0, you probably had a lot of duplicate code. With CRM 2011, your browser can cache the JavaScript for better performance and it is easier to maintain when organized appropriately.

In our other web resource, the one we setup with the OnLoad, we need the following code.

function contactsOnLoad(){
   convertToButton('pager', 'Example Button', '150px', function(){alert("test")});
}

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.

From Scratch

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:

// CRM 2011 Style Button 
// Creates a button from a form field 
// Paul Way - 1/3/2012

function convertWebResourceToButton(fldName, btnLabel, btnWidth, leftMargin, evt){
   var btn = '<button id="btn_' + fldName + '" ' +
                       ' style="margin-left:' + leftMargin + ';width:' + btnWidth + ';" ' +
                       ' class="ms-crm-Button" ' +
                       ' onmouseover="Mscrm.ButtonUtils.hoverOn(this);" ' +
                       ' onmouseout="Mscrm.ButtonUtils.hoverOff(this);" ' +
                     '>' + btnLabel + '</button>';

   var ctrl = Xrm.Page.ui.controls.get(fldName)._control.get_element().childNodes[1];

   // Replace image with buttom 
   ctrl.innerHTML = btn;

   // Add Event to the newly created button 
   ctrl.firstChild.attachEvent('onclick', evt);

}

And as for our OnLoad function, we’ll need to use this instead:

function contactsOnLoad(){
   convertWebResourceToButton('WebResource_btnProfInfo', 'Another Approach', '150px', '119px', function(){alert("test2")});
}

Notice that this will require an additional parameter for the left margin.

Summary

As you can see, there are several different approaches to adding a button onto the CRM form for 2011. With 2011, I’d opt for using the button place holder image method. No matter which approach you take, the end goal is enhancing the user’s experience. I hope you enjoy!

Post by: Paul Way, Customer Effective