Implementing Tooltips for Microsoft Dynamics CRM 2011

Tooltips can be used in any application to provide powerful, business-specific information to your users regarding the purpose of, or data contained within, the fields on your forms. CRM is no exception. The out-of-the-box (OOTB) entities and fields in CRM 2011 do provide some basic information in tooltip form.  However, for custom entities, the tooltips are basically useless if your usage of the OOTB entities/fields is highly customized.

In CRM 4, there was a straight-forward approach to overcoming this limitation by setting the ‘title’ attribute on the specific field in the ‘crmForm.all’ collection in the form’s onLoad event.

crmForm.all.name_c.title = ‘The custom tooltip for this field’;

In CRM 2011, ‘crmForm’ was deprecated, but still supported for backward compatibility and, therefore, setting the tooltips via the method above worked just fine.  However, especially after UR12, the Xrm.Page object is now the only method that can be used to interact with the forms in CRM 2011 while ensuring that the forms work in IE as well as the other browsers now supported after the UR12 release.

During a recent upgrade, we were confronted with a 4.0 implementation that made extensive use of tooltips ranging from simple text descriptions to detailed tips for OptionSet fields that contained definitions for each value in the list.  To ensure our upgrade was fully compatible with future releases, we decided to completely strip all the ‘crmForm’ references out of all of the Jscript in favor of Xrm.Page object.  We soon realized that the ‘title’ field we had been using for the tooltips didn’t exist on the Xrm.Page object.  In order to maintain the tooltips, we were forced to find a solution that would work without utilizing the ‘crmForm’ object.  Here is how we did it …..

XRMServiceToolkit
The XRMServiceToolkit provides this capability in a nice package.  You can download the entire toolkit from CodePlex (http://xrmservicetoolkit.codeplex.com). We implemented our solution using version 1.4, which requires json2 and jquery1.7.2 or higher.  I attempted implementing this solution with jQuery1.9.0, but ran into some issues and ended up falling back to 1.7.2 so I recommend starting with 1.7.2. Once I downloaded the toolkit code, I created and published new web resources for each of these three Jscript libraries (xrmservicetoolkit, json2 and jquery1.7.2).

The Configuration File
An XML configuration file, stored as a web resource, is used to store the tooltips for all of the entities. This file is then consumed during form load to set the tool tips for the appropriate fields. Here is the schema of the required XML configuration file.

<help>
<entity name=”{entity1_name}”>
<attribute name=”{field_name}”>
<shorthelp>{tooltip}</shorthelp>
</attribute>
</entity>
<entity name=”{entity2_name}”>
<attribute name=”{field_name}”>
<shorthelp>{tooltip}</shorthelp>
</attribute>
</entity>
</help>

I went into Web Resources in the Customization page and created a new web resource.

Implementing Tooltips for Microsoft Dynamics CRM 2011

The name was entered as “client_tooltip_configuration” and I selected “Data (XML)” in the Type dropdown.  Then, I clicked the “Text Editor” button and pasted in the schema from above.  I updated the values in the schema with those appropriate for our implementation. I added additional attribute elements under entity to cover the fields that needed tooltips, as well as additional entity blocks to cover all of the entities that needed tooltips.  I then saved the changes and published the new web resource.

To support the tooltips for the OptionSet fields which displayed definitions for each OptionSet value, we needed to have carriage returns after each of the OptionSet Value definitions so that they didn’t run together.  I found that placing the ASCII line feed code (&#10;) within the tooltip text would force a line feed wherever needed.  This isn’t a perfect solution, because long tooltips automatically get wrapped at some arbitrary width anyway, but it was enough to make it look decent on the screen. (I didn’t have time to explore additional formatting options that could be implemented here.)

Connecting the Toolkit to the Form’s OnLoad event
With the configuration file published, the only remaining task was to add code to the form’s onLoad event. (We already had the onLoad event configured in CRM so I won’t go through that here). There are plenty of blogs out there on registering JS for the onLoad event.

First, I added links to the three Jscript libraries I created above.  When I initially added them, they appeared at the bottom of the list of libraries. Since CRM loads the Jscript libraries based on their order in the list, I needed to make sure that these three libraries were loaded before the library that contained the OnLoad event. So, I highlighted each of them and used the “Up” button to move them up to the top of the list. (Keep them in the order that they appear below, since the XrmServiceToolkit is dependent on the JSON and JQuery libraries.)

Next, I need to add the code to the entity form’s OnLoad event. This can be done a multitude of ways. In this scenario, it’s easiest to just select the appropriate library containing the OnLoad event from the list and click Edit.  The following line of code needs to be added:

XrmServiceToolkit.Extension.JQueryXrmFieldTooltip(“client_tooltip_configuration”, false);

Finally, I saved and published both the entity and the Jscript library containing the OnLoad event.

Our implementation had 5 entities that needed tooltips, so I had to go through the steps in this last section for each of the 5 entities.

For more information on this customization, submit your questions below, or click here to contact us today. 

Phone: 312-602-4000
Email: marketing@westmonroepartners.com
222 W. Adams
Chicago, IL 60606
Show Buttons
Share On Facebook
Share On Twitter
Share on LinkedIn
Hide Buttons