10 May’17

D365 GeneralAdd 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!

Written by

Priyesh Wagh

Sr. Software Developer

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.

Want to streamline your business processes?

  • This field is for validation purposes and should be left unchanged.

Recent Articles

  • Reading more then 10K records in D3FOE OData API

    11 July’ 2018

    Introduction: We all know Dynamics 365 Finance and Operations has limitation of 10K records to be fetched at a time usi...

    Read more
  • Paging in D365 Customer Engagement v9.0

    10 July’ 2018

    Introduction: The Xrm.retrieveMultipleRecords method is used to retrieve a collection of records in Dynamics 365 Custom...

    Read more
  • Set up Dynamics 365 connection in Microsoft Social Engagement

    10 July’ 2018

    Introduction: This blog explains how to Set up Dynamics 365 connection in Microsoft Social Engagement. Steps to be follo...

    Read more
  • Voice of the Customer failed to install

    10 July’ 2018

    Introduction: Many people face issues in installing Voice of Customer solution on v9 environment and trying repeatedly ...

    Read more
  • Scribe Insight AX as a Web Service Find Block issue

    10 July’ 2018

    Introduction: If we need to look up for any value from AX then we do it by using a Find Block in Scribe Insight Eg: Basi...

    Read more