D365 CE: Adding icons to views

Last week I was asked if it was possible to show an icon in a view of records: they wanted me to show a male or female icon in the gender column of contacts for the prospect demo. Yes we can do this, but we do need to use a little java script for this. Keep in mind I am not a developer, so make sure you check with your developers to make sure the java script example I’m using here is ok to use in production. This functionality has been available for quite some time now, but I wanted to write an article about it anyway. This is a very nice feature you can use to spice up your views and make them visually more appealing. Below is an example of what it is going to look like.

Configurations

The field I am using for this is the out of the box gender (gendercode) field. The data type of this field is an option set. The first thing we need to do is get the numerical values of each of the options in the option set:

Male – 1
Female – 2

You can find this when you open the field and click in the options, the label and value will become visible on the right hand side.
The second thing I need to do is upload my icons into the system as web resources. You can add them to the default solution or create a new solution and add them there. I would recommend the last option, so you can move these configurations easier from one environment to another.

I uploaded two web resources into the system, both are in PNG format and their dimensions are 16×16. The system names for the web resources are new_male and new_female.

I need to add one more web resource to the solution; this is where I will store the java script so make sure you select ‘Script(JScript)‘ as the type. The system name for this web resource isnew_ContactIconScript. This is important, as we need to select it when configuring the view later. Below is the java script I used:

function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var col_data = str.gendercode_Value;
var imgName = “”;
var tooltip = “{” + col_data +”}”;

switch (col_data) {
case 1:
imgName = “new_Male”;
tooltip = “Male”;
break;
case 2:
imgName = “new_Female”;
tooltip = “Normal”;
break;
}
var resultarray = [imgName, tooltip];
return resultarray;
}

Make sure you save and publish all your changes. Once the publishing has completed we can start configuring our view(s). Its good to note that we can use this functionality in both system views and personal views.
I am going to add this to an existing view. Open the view you want to add the icon to, and make sure you add the gender column to the view.
You can add columns by clicking on the ‘Edit Column’ button on the ribbon of the view. Click the ‘Add Columns’ button and select the field you want to add, in our case this is ‘Gender’. Doubleclick on the gender column you just added. Click on the lookup button next to the Web Resource Field and select the new_ContactIconScript. Enter ‘displayIconTooltip’ next to the Function Name field. Make sure the field’s width is wide enough. See below of what it should look like. Click ‘OK’ twice and save and publish the view. That’s it!

I hope you enjoyed this post! Be sure to check in again next week for a new topic or subscribe here to never miss another post!