Osmosys Blog: Dynamics 365 – Add Icons to Entity Views

Sunday, 2 April 2017

Dynamics 365 – Add Icons to Entity Views

1. Introduction

Microsoft Dynamics 365 has a new feature added for customizing entity views, where-in we can add custom icons with tool-tip text to display in a column depending on the column value; we can also specify localized tool-tip text.

This can be done by using JavaScript web resource and icons as image web resource. Below are the steps to add icons and tool-tips to entity view.

Note : Adding custom icons with tool-tip is supported only for read-only grids; this feature isn’t supported for editable grids.

The JavaScript function used for adding icons to view expects two arguments, they are

Entire row object
Calling user’s locale Id ( i.e LCID). It is used to specifies tool-tip text for icon in multiple languages.

Here we are selecting a custom two option set field which indicates the type of case (i.e Support or Fault). If the case is fault then show blue color icon and if support then red.

2. Steps to add icons and tool-tips to entity view

Get the icons of size 16*16 and add them as image web resource in dynamics (select number of icons based on your condition) .

Add the below JavaScript function as a web resource.

function DisplayCustomIcons(rowVal, userlcid) {

 var imageName = "";

 var tooltipValue = "";

 var resultarray = null;

 try {

 var row = JSON.parse(rowVal);

 var rdata = row.osm_casetype_Value;

 if (rdata == true) {

 imageName = "new_Fault";

 tooltipValue = "Fault";

 }

 else {

 imageName = "new_Support";

 tooltipValue = "Support";

 }

 resultarray = [imageName, tooltipValue];

 } catch (e) {

 console.log(e);

 }

 return resultarray;

}

Edit the view of desired entity.
Select the column for which the custom icons and tool-tip(s) are to be added and click on “Change Properties”.
Select the web resource to it and enter the function name.
Save and publish the changes.
Navigate to the entity and select the view.