Adding Icons and Tooltips to a subgrid column

Over the years I have seen many unsupported solutions for getting nice little icons in a sub grid.  Often, this requirement stems from needing some form of traffic light display, and has only been possible by some sort of unsupported customizations where you can manipulate the DOM.

Now, with Dynamics 365 (December 2016 Update) for both online and on premise, you can do this in a very easy way by following the guide linked at the bottom of this post.

Here is my experience with it so far.

Step 1

First, you need to create some web resources for the icons.  In this case, I wanted three simple coloured circles, red, green and amber.

I added these as three separate web resources.

Step 2

Next, you need a JavaScript web resource containing a function that will parse the Sub Grids row data, and return the name of the icon, and a tooltip text element that will be used.

Sample code:

function displayIconTooltip(rowData, userLCID) {
    var str = JSON.parse(rowData);
    var coldata = str.hall_targetdate_Value;
    var imgName = "";
    var tooltip = "";
    var now = new Date();
    var warn = new Date();
    warn = warn.setDate(now.getDate() + 5);
    var targetDate = new Date(coldata);

    if (targetDate > warn)
        imgName = "hall_green.png";
        tooltip = "Good"

    else if (targetDate < now)
        imgName = "hall_red.png";
        tooltip = "Bad"
        imgName = "hall_amber.png";
        tooltip = "Warning"
    var resultarray = [imgName, tooltip];
    return resultarray;

This code simply takes a field called targetdate and check to see if it’s in the future or overdue.

Step 3

Next, you need to edit a specific view on the entity you wish to show the icons.

Then on the column you wish to add an icon, simply set the Web Resource that contains the code, and the name of the function to call for each row within the Column Properties (using the Change Properties icon).


Now, anywhere in Dynamics 365 that you see the view, you should now have some smart icons that highlight if the record in question is overdue or not.

Issues encountered

So far, I have encountered a few issues where the icons do not show.  It seems to occur sometimes when showing the grid as a sub grid on a different entity.  Sometimes they show, sometimes they don’t (although the space for the icons is there which proves that it is the correct view being shown).  Sometimes, if they do not show, right clicking and selecting “Refresh Grid” will work, other times it does not, so I need to have a bit further mess with it.


3 Replies to “Adding Icons and Tooltips to a subgrid column”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s