Visualization is always helpful when it comes to identifying and highlight set of data. With the new feature provided by Microsoft in Dynamics 365, it is possible to display list views with Icons or any kind of graphical representation to make the desired data stand out.

Here are the steps to follow.

In my example, I want to display indicators for active accounts list according to their membership statuses in Green (Current), Grey (Dropped) and Blue (Prospective).

 

Therefore, things which we need are:

 

Step1:

First, we will need some images to store in Web Resources for icons. I have used 16*16 pixel .png format images. So, I have used three images and stored them in the Web Resources in my Solution.

 

 

You can see here that the images are in PNG format and you can choose to give any name for the images.


Step2:

We will also need an Option Set to display the indicators based on options selected for the record, the indicator will get displayed. Here I am using OOB Status Reason field in which I have added options as Current, Dropped, and Prospect. You can use any other option set as well.

 

Step3:

Very important JavaScript Web Resource to store the code containing the business logic.

Here is the code. You can use this code to implement the solution.

 


 

Note:

1.       The status code used in the script is the schema name of the column where I want to display the icons.

You can see here that I have used default Status Reason field so I have used statuscode to retrieve value of the column. You can use the schema name of the option set you are using.

 

2.       In the script below.

a.       1 is the value for Active status in the option set.

b.       imageName is schema name of the image.


 

Step4:

Link the JavaScript to the columns in the View, by clicking on Change Property option.


 



Step5:

Save the view and Publish Customizations.

 

Step6:

Go back to view and you will see the icons



We need to make few considerations here:

There are a few things to consider before diving in:

1.       This only works on a standard grid. It does not work on the newly introduced Editable Grid.

2.       Icons can only be displayed on the Web Interface. The Outlook and Mobile Apps will not display the icon.

     3. Tooltips can be defined for multiple languages/locale ID (LCID). In this example, I’ve set Canadian English (LCID 4105) as the default and included Canadian French (LCID 3084) as the alternative. More Locale ID values can be found here.