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

15 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. This comment has been removed by the author.

    ReplyDelete
  3. 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
  4. This is not working for SubGrid....any solution for Subgrid?

    ReplyDelete
  5. What if I have two options field instead of option set? How can I get Value for it?
    var str = JSON.parse(rowData);
    var coldata = str.new_mytruefalse_Value;

    ReplyDelete
  6. I can use it on 2016 on-premise, web ressource doens't existe

    ReplyDelete
  7. Hi,

    Does it work for Global optionsets? my code is not working:
    function displayIconTooltip(rowData,userLCID) {
    debugger;
    var str = JSON.parse(rowData);
    var coldata = str.kmt_escalation_status_Value;
    var imgName = "";
    var tooltip = "";
    switch (coldata) {
    default : {
    imgName = "kmt_/red";
    tooltip = "Auto Approved";
    break;
    }
    }
    var resultarray = [imgName, tooltip];
    return resultarray;
    }

    ReplyDelete
  8. You can use the AppSource solution https://appsource.microsoft.com/en-us/product/dynamics-365/phuocle.d365-icons-and-tooltips

    ReplyDelete
  9. I Tried in CRM 365 version .it is working

    ReplyDelete
  10. What if the column is a related-entity field?

    For example: Displaying Case Priority in the Queues View.

    ReplyDelete
  11. Can I remuve the field value ? (low, Normal,High)

    ReplyDelete