Custom Icons for List View in Dynamics 365

/in

Visualization is always helpful when it comes to identifying and highlight the 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, the 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.

list view in microsoft dynamics 365

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.

list view code solution in microsoft dynamics 365

Note:

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

status code

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

status code 1

2.       In the script below.

status code 3

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

b.       imageName is schema name of the image.

active status in microsoft dynamics

Step4:

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

microsoft dynamics membership status

column properties in microsoft dynamics 365

Step5:

Save the view and Publish Customizations.

Step6:

Go back to view and you will see the icons

list view icons in microsoft dynamics 365

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.