Display tooltips for fields in MS CRM – Part 3 (for CRM2011)
Last year I blogged twice about how to dynamically create tooltips in MS CRM. Today I want to share with you a post on how to do this in CRM2011 using jQuery and an XML webresource in which you can specify tooltips per entity and fields. The function below reads the xml file and displays a help image and tooltip for each field specified in the xml webresource. (see screenshot).
Step-by-step
First create an XML webresource and give it a descriptive name (e.g. cm_xmlhelpfile).
<help> <entity name="account"> <attribute name="accountnumber"> <shorthelp>This is the SAP accountnumber</shorthelp> </attribute> </entity> </help>
Next add the latest version of jQuery to the webresources and add another webresource to include the function below and call it in the onload event.
//****************************************************
jQueryLoadHelp=function(filename, bDisplayImg) {
/*
This function is used add tooltips to any field in CRM2011.
This function requires the following parameters:
filename : name of the XML webresource
bDisplayImg: bolean to show/hide the help image (true/false)
Returns: nothing
Example: jQueryLoadHelp('cm_xmlhelpfile', true);
Designed by: http://lambrite.com/?p=221
Adaptd by Geron Profet (www.crmxpg.nl)
*/
if (typeof jQuery == 'undefined') {
alert('jQuery is not loaded.\nPlease ensure that jQuery is included\n as webresource in the form load.');
return;
}
$.ajax({
type: "GET",
url: "../WebResources/"+filename,
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 id="img_' + attr + '" src="/_imgs/ico/16_help.gif" alt="'+txt+'" width="16" height="16" /><div id="help_' + attr + '" style="visibility: hidden; position: absolute;">: ' + txt + '</div>';
$(obj).append(html);
//20110909 GP: added line to hide/show help image
document.getElementById('img_'+attr).style.display = (bDisplayImg) ? 'inline' : 'none';
}
}
The end result should look something like this:
Thanks to http://lambrite.com for the original design and sharing this.
Related Posts:
Display tooltips for fields in MS CRM – Part 1
Display tooltips for fields in MS CRM – Part 2
Comments
3 Comments on Display tooltips for fields in MS CRM – Part 3 (for CRM2011)
-
CRM2011 on
Tue, 8th Nov 2011 17:36
-
John on
Thu, 9th Feb 2012 15:20
-
Geron Profet on
Tue, 6th Mar 2012 20:18
very nice work, thx!
I changed it to do it without an image.
getElementById of the data element "_d" . This is a td element. Therefore you can simply add .title to set the title of the td.
example:
var obj = document.getElementById(attr+'_d');
obj.title = txt;
I can't get this to work but I'm not getting any errors either. I think I may not have the correct settings for 'entity' and 'attribute' in the xml file. I'm trying to add a tooltip to fields in the contact form, but I have an idea the entity name is more than just 'contact'! Can you suggest how I'd get these details accurately please?
The contact entity is named contact.
The attribute name depends on whether you're trying to put a tooltip on a custom attribute.
If so, you need to add the prefix (e.g. new_).
Good luck, Geron