Adding Icons and Tooltips to grid columns in Dynamics 365

I was going through the “What’s New” section of the Dynamics 365 SDK and found out that you can now add icons and tool tips to the grid view columns.
Microsoft has added the 2 imageproviderwebresource and imageproviderfunctionname to the layout xml of the <cell> attribute of the saved query. These fields can be used to attach a web resource and JavaScript function that will display the icon and the tooltip.
For this blog, I am displaying red, yellow and green light bulbs based on the priority of the case.
Here are the steps:

Create 3 Icon web resources

• Find 3 icon/image files for red, green and yellow color. I am using PNG files of size 16x16 pixel for this example.
• Create a new web resource of type “PNG Format” as shown in the screen shot below.
  
  
• Repeat the above step for green and yellow icons.

Create a JavaScript web resource

Create a JavaScript web resource with the following function. It is the same function that is used in SDK sample. The function takes the 2 parameters rawdata and userLCID. The userLCID can be used to display the tip in different languages. Check the SDK example for details. https://msdn.microsoft.com/en-us/library/gg328457.aspx#BKMK_CustomIcons. In this example I am not using userLCID as only default English language is installed in my CRM.

 //display icon and tooltio for the grid column  
 function displayIconTooltip(rowData, userLCID) {  
   var str = JSON.parse(rowData);  
   var coldata = str.prioritycode_Value;  
   var imgName = "";  
   var tooltip = "";  
   switch (coldata) {  
     case 1:  
       imgName = "new_/images/red.png";  
       tooltip = "High Priority Case";  
       break;  
     case 2:  
       imgName = "new_/images/yellow.png";  
       tooltip = "Noraml Priority Case";  
       break;  
     case 3:  
       imgName = "new_/images/green.png";  
       tooltip = "Low Priority Case";  
       break;  
     default:  
       imgName = "";  
       tooltip = "";  
       break;  
   }  
   var resultarray = [imgName, tooltip];  
   return resultarray;  
 }  

Attaching JavaScript web resource to the view column

• Open the view for which you would like to display the icons and tooltips. For this example, I am using “My Active Cases”.
• Select the column Priority and click on “Change Properties”
  
  
• Specify the JavaScript web resource and function name.
  
  

Results

Publish all the customizations completed in the above step. Navigate to “My Active cases” and check the results. You will notice different color icons based on the priority of the case.