Tuesday, December 13, 2016

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.

    2016-12-13_16-04-47
  • 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”

    2016-12-13_16-23-09
  • Specify the JavaScript web resource and function name.

    2016-12-13_16-25-30

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.

2016-12-13_16-46-25

7 comments:

  1. I just don't understand how you can write this blog without giving credit to Microsoft and linking to Microsoft content.

    ReplyDelete
  2. Hardly gave them credit for the blog though. You said the link is for sdk examples when in fact it is pretty much the same article.

    ReplyDelete
  3. That is really very informative and useful blog. Thanks for sharing it with us and I believe this will help developers like me.

    ReplyDelete
  4. Hi,
    Glad I found your site, this is an eye-opener for marketers. We are proud to be a solution provider for a diversified customer database, ranging from the small, medium technology firms to the giant multinationals. Generate more revenue with email marketing, b2b marketing, list solutions & market research services. Microsoft Dynamics CRM Users Email List

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. I followed all the steps and was able to see the icons & tooltip if i see the view using Advanced Find or anywhere else. But it doesnt show up when using as a Subgrid on form. Any ideas?

    ReplyDelete