How to Setup Tooltips and Icons in Microsoft Dynamics 365 Custom Views

Satyvir Jasra, 04 October 2017

A user’s analysis becomes simple when a set of data is being visualized. Microsoft Dynamics 365 has added a new feature that allows us to add custom icons along with tooltips by customizing entity views. To accomplish this, we must add JavaScript and images as web resources. In this blog, I’ll walk through the steps required to set up tooltips and icons for a custom view that I am using.

My solution has a custom entity called “Feedback”, and I will be adding icons and tooltips in Customer Service Experience column for a custom View called “Active Feedback”. I will be showing a happy face icon where Customer Service Experience is good, and sad face icon where Customer Service Experience is bad.

This can be achieved with a few configuration steps:
1. Create 2 16x16 PNG image Web Resources in Dynamics 365 – one for the happy face icon and one for the sad face icon
2. Add JavaScript code as a web resource. I have added mag_/js/iconmanagement.js and following is the code that I used.

After adding these web resources, this is what I ended up with.

 
3. Open the “Active Feedback” view and double click on the Customer Service Experience to change the properties.

 
4. For the Web Resource field, select JavaScript Web Resource mag_/js/iconmanagement.js. For the Function Name field, type name of the function DisplayCustomIcons. Then click on OK.

5. Save the changes made to the view, and Publish All changes made.

Let’s see the Icons and Tooltips in action. I will go back to “Active Feedback” view for the Feedback Entity. This time the view fields under Customer Service Experience column are showing Icons and Tooltips for respective fields.

Note: For now, Custom Icons and Tooltips can only be added to Read-Only Grids, not Editable-Grids.