Colour Indicators for Microsoft Dynamics CRM 2011 Records

Roshan Mehta, 25 October 2011

With the introduction of dashboards in Dynamics CRM 2011, users are provided with a visual representation of their business data. We can take this idea and combine it with the ability to modify the CRM user interface using JScript to show colour indicators inside CRM records and alert users based on values set on the form. Please note that this is an unsupported customization as we are directly modifying the document object.

The image above shows a yellow warning bar displayed on the Product entity. This bar is available on all system and custom entities and can be easily made visible using simple JScript. For example, you might want to show a coloured bar on a Task entity based on the priority level. A “Low” priority might display a green bar, whereas a “High” priority would need to display a red bar. Here’s how we can add this feature to CRM:

1. Open up a record of the entity you wish to add the warning bar to. In this case, I am using the Contact entity.
2. Press F12 in your browser to launch Internet Explorer Developer Tools and search for crmNotifications. The following div should be displayed:

3. Notice that the style tag has the display property set to “none”. We can make the div visible using the following JScript:

var displayBar = document.getElementById( "crmNotifications");

displayBar.style.display = "inline";

displayBar.style.height = "25px";

displayBar.style.width = "100%";

We can add this code to a function of a JScript web resource and call the function on the form load event of our selected entity. Here is what the form will look like:

If we wanted to add some text to the warning bar, we can add the following JScript to our original code above:

var textElement = document.createTextNode("This is my warning message");

displayBar.appendChild(textElement);

We also have the ability to customize the colour of the bar and turn the warning bar into an error message bar. To do this, we will need to add the following line to our code:

displayBar.style.backgroundColor = "red";

This gives us the following result:

To sum up, this is a nice simple way to gives users a visual indication of what is going on with their business data and can be used across many different entities in the system. It is simple to add a message to the bar as well as customize the colours to be displayed.