Modifying Microsoft Dynamics CRM 2011 fields’ tooltips

Modifying Microsoft Dynamics CRM 2011 fields’ tooltips

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 you find between those different blog posts 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 was implemented:

 


 

And this is how it looks after the changes have been published:

 


 

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

 

  1. You need to import Jscript (if you haven't done already) because this functionality depends on the Jscript library.

     

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


     

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

     


     

  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:

     


     

  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:


 

Code:

<help>

<entity name="opportunity">

<attribute name="estimatedclosedate">

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

</attribute>

</entity>

</help>

 

  1. Click "OK" and then "Save and Close" to complete the XML file creation.
  2. Click on the "New" button again to create the javascript file that will fire our tooltip XML file:

     


     

  3. The new Web Resource is a Script:

     


     

  4. To paste the code for this jscript file, click on the "Text Editor" button and paste the code below:


     

    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="http://www.crm.fullscope.com/_imgs/ico/16_info.gif" alt="" width="16" height="16" /><div id="help_' + attr + '" style="visibility: hidden; position:absolute;">: ' + txt + '</div>';

$(obj).append(html);

}

 

  1. Click "Ok" and then "Save and Close" to complete the script creation.
  2. On the left navigation pane, expand entities then expand Opportunity and click on Forms:


     

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


     

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


     

  5. Find the JQuery library and click "OK" to add the library to the form:

     


     

  6. Repeat this process to add the new_Help library to the list.
  7. Once both libraries have been added to the form, click on the Add event handler button to load the loadHelp function OnLoad:

     


     

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

     


     

  9. Click "OK" and then "OK" again to save the configuration.
  10. 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:

  • Add Web Resources into your Microsoft Dynamics CRM 2011 Organization (JQuery, XML and HelpScript file)
  • Add the libraries to the entity hosting the field that will display the tooltip
  • Add the Event Handler to load the Help Library OnLoad for the form.

 

Good Luck!


Microsoft Dynamics CRM Blog