We will learn to add custom icons to a view & grid in Dynamics 365. Before we start, make sure to subscribe to CRM Crate so that you stay up-to-date in field of Dynamics 365.

What are list views in Dynamics 365?

In Dynamics 365 CE, the views are used to define how a list of records for a specific entity is displayed.

The views define the below properties: –

• The columns to be displayed.
• The width of columns displayed.
• How the list of records is sorted by default. 
• What default filters are applied to restrict which records will appear in the list. 

The records that are visible in individual views are displayed in a list, sometimes called a grid, which frequently provides options so that people can change the default sorting, column widths, and filters to more easily see the data that’s important to them. Views also define the data source for charts that are used in the application. 

Click on the given link to learn more about views “https://www.crmcrate.com/view/“.

Why do we need custom icons in the views?

Microsoft has not provided any out-of-the-box feature to the dynamically display icons in the view columns. Consider a business requirement where you need to dynamically populate an icon in a view column as per the column value. This requirement can be achieved with help of the below given procedure.

Adding custom icons to a list view using JavaScript –

Below are the required prerequisites –

A. Create your own PNG web-resources in Dynamics 365.

B. Create an entity list view with the column used for displaying icons in Dynamics 365.

Follow the below steps to add custom icons in views.

Step 1 – Develop a JavaScript code for displaying the icons to a list view.

• The below JavaScript code is designed to read the view column values and append the PNG web-resource (icons) to it.
• In our scenario, we are reading the value from an option-set type column named “Subscriber Type” and appending the icons to it.

//CRM Crate JavaScript Snippet.
function CallMethod (rowData, userLCID) {

//Reading Value From View's Row Data.
var row = JSON.parse(rowData);

//Reading Value Of Columns.
var subscriberType = row.cc_subscribertype_Value

//Declaring Variables.
var imgName = "";
var tooltip = "";

//A Switch Case For Assiging Icons According To The Column Data.
switch (subscriberType) {
case 948120000: // Optionset Value
imgName = "cc_WebsiteLogo"; // Name Of The PNG Web Resource.
tooltip = "Website User"; //Tool Tip To Be Displayed On Icon
break;
case 948120001: // Optionset Value
imgName = "cc_SupportLogo"; // Name Of The PNG Web Resource.
tooltip = "Support User"; //Tool Tip To Be Displayed On Icon
break;
case 948120002: // Optionset Value
imgName = "cc_ProductLogo"; // Name Of The PNG Web Resource.
tooltip = "Product User"; //Tool Tip To Be Displayed On Icon
break;
}

//Creating Result Array,
var resultarray = [imgName, tooltip];

//Returning View Row Data Array In Return.
return resultarray;  
}

• Create a new JavaScript web-resource using the above code in Dynamics 365.

Step 2 – Add the JavaScript to a view list.

• Once the JavaScript web-resource is created according to the above given code, navigate to the Dynamics 365 component list and open the view in which we need to deploy the JavaScript.
• In our case, we will add the JavaScript to the view named “Subscriber” as shown below.

• Select and open the column in which you need to display the icons.
• Navigate to the field “Web Resource” and select the recently created JavaScript web-resource as shown below.

• Once done, publish the customization.

Validate the changes in Dynamics 365 –

Once the JavaScript and view configuration is deployed, navigate to the Dynamics 365 and verify if the icons are getting displayed in the view column as shown below.

Thus we learned to add custom icons to a list View & Grids in Dynamics 365.

• LinkedIn
• Facebook
• Telegram