Modifying Microsoft Dynamics CRM 2011 fields’ tooltips

  • Comments 4

For this column, I would like to share some detailed steps regarding adding custom tooltips to a Microsoft Dynamics CRM 2011 field.

 

There are several posts online that discuss this process and although there are several approaches to enable this functionality, one thing those different blog posts have in common is the fact that many people struggle to set this up.

 

Here is how the Opportunity form looks before the configuration detailed below is implemented:

clip_image022

And this is how it looks after the changes are published:

clip_image024

 

I wanted to deploy this functionality and record this process to make it easier for everyone reading this column:

 

1. You need to import Jscript (if you haven’t done already) because this functionality depends on the Jscript library. Follow the instructions to import the Jscript solution on this URL:

http://www.crmnerd.com/customizations/using-jquery-in-crm2011/

 

2. In Microsoft Dynamics CRM 2011, Navigate to Settings -> Customizations -> Customize the System:

clip_image002

 

3. Click on Web Resources on the left navigation pane and then click on ‘New’ to add a new web resource:

clip_image004

 

4. The Web Resource to be created will be an XML file, this file will capture the tip that will be displayed on the chosen field:

clip_image006

 

5. For this post I have chosen to post a message on a “Contract Close (estimatedclosedate)” date field within the Opportunity form, to paste the code for this XML file, click on the “Text Editor” button and paste the code below:

clip_image007

 

Code:

<help>

<entity name="opportunity">

<attribute name="estimatedclosedate">

<shorthelp>Contracts cannot be closed on the weekends!</shorthelp>

</attribute>

</entity>

</help>

 

6. Click “OK” and then “Save and Close” to complete the XML file creation.

 

7. Click on the “New” button again to create the javascript file that will fire our tooltip XML file:

clip_image008

 

8. The new Web Resource is a Script:

clip_image010

 

9. To paste the code for this jscript file, click on the “Text Editor” button and paste the code below:

clip_image012

 

Code:

function loadHelp() {

$.ajax({

type: "GET",

url: "https://zero2ten.crm.dynamics.com//WebResources/new_contractclosehelp",

dataType: "xml",

success: parseHelpXML

}); //end ajax

}

function parseHelpXML(data) {

var entity = Xrm.Page.data.entity.getEntityName().toString().toLowerCase();

entXML = $("entity[name=" + entity + "]", data)

$(entXML).children().each(function (i) {

var attr = this.getAttribute("name");

var txt = $(this).find('shorthelp').text();

registerHelp(entity, attr, txt);

});

}

function registerHelp(entity, attr, txt) {

var obj = document.getElementById(attr+'_c').children[0];

html = '<img src="/_imgs/ico/16_info.gif" alt="" width="16" height="16" /><div id="help_' + attr + '" style="visibility: hidden; position:absolute;">: ' + txt + '</div>';

$(obj).append(html);

}

 

10. Click “Ok” and then “Save and Close” to complete the script creation.

 

11. On the left navigation pane, expand entities then expand Opportunity and click on Forms:

clip_image014

 

12. Open the Main form and then click on the Form Properties button on the ribbon:

clip_image015

 

13. Click on the Add library button to add the JQuery library:

clip_image017

 

14. Find the JQuery library and click “OK” to add the library to the form:

clip_image019

 

15. Repeat this process to add the new_Help library to the list.

 

16. Once both libraries have been added to the form, click on the Add event handler button to load the loadHelp function OnLoad:

clip_image020

 

17. Make sure that the new_Help library is selected and call the loadHelp function as shown below:

clip_image021

 

18. Click “OK” and then “OK” again to save the configuration.

 

19. Save and then Publish to see the new tooltip added to the field.

 

You can add multiple fields with multiple tooltips to the XML file and they will be displayed within the form once a mouse over the field is performed.

 

In Summary, the process to add a custom tooltip to any field in Microsoft Dynamics CRM 2011 can be broken into 3 major steps:

 

1. Add Web Resources into your Microsoft Dynamics CRM 2011 Organization (JQuery, XML and HelpScript file)

2. Add the libraries to the entity hosting the field that will display the tooltip

3. Add the Event Handler to load the Help Library OnLoad for the form.

 

Good Luck!

  • This is exactly what I was looking for and will improve the look and feel of our CRM...I am going to test in the next few days.  This is awesome.

  • I'm getting the following error message: "Wrong number of arguments or invalid property assignment."

    It seems to be related to the following line of code: entXML = $("entity[name=" + entity + "]", data)

    Does anyone have an idea how to solve this?

  • Hello, is there a way to do this for charts/graphs? Cannot figure it out. Thanks in advance!

  • I think it depends on what you want to do WWESIGER, here is an article I wrote regarding adding a '%' sign to charts: www.zero2ten.com/.../adding-percentage-to-microsoft-dynamics-crm-chart