Add Custom Icons with tooltip for a column

Now, it’s possible to make your CRM views visually more informative. This is a cool new feature which is in preview for Dynamics 365 for December 2016 release.

You can now add custom icon with tooltip text to display a column based on the column value. First thing need to be done to achieve this is – upload the custom icons as web resources in your Dynamics 365. Then, use these icons using JavaScript web resources.

Adding JavaScript code

The following 2 new attributes have been added to layoutxml of savedquery –

1. imageproviderwebresource
2. imageproviderfuntionname

The JavaScript code gets executed when the page loads.

Following is how you can add Icons to the columns:

In this example, I will add 3 types of images to the Open Opportunity View and based on whether the Opportunity is Hot, Warm or Cold, I’ll display a different emoji representing each.

1. Take 16×16 images and upload them as Web Resource in Dynamics 365. In my example, I’m using a “happy” and “sad” emoji to represent if the Opportunity is Hot or Cold.
2. Create a new Web Resource of type JavaScript to handle these icons when the Opportunity is either Cold, Warm or Hot.

In the above code, row object and the User’s LCID is passed as parameters. I’m selecting the image to be displayed (Web Resource names of the images in D365) based on the value in str.opportunityratingcode_Value. 

3. Once I have this code ready, I’ll import this JS as a Web Resource in D365.

4. I’ll navigate to the view I want to add this functionality to and double click the column to edit the property of the column as shown below:

5. In the above example, I’m selecting my JS Web Resource new_IconInCols and the function as displayIconTooltip.

6. Once everything is set, I’ll publish all the changes and refresh my view with relevant data.

7. Finally, my data looks like this on the View:

Hot = Happy

Warm = Neutral

Cold = Sad

8. Also, if you hover over the icon itself, you’ll see what tooltip it has –

Hope this was helpful!