Curious what Dynamic People can do for you?

+ 31 (0) 20 303 24 70
Logo
Tech Blogs 01 June 2020 Burhan Urhan

Dynamics 365 – Adding icons to an option set field in a view

Female - 01

In this guide, I’ll explain how you can add custom icons to a view.

First, I’ll show you how the result will look like. As you can see in the Print Screen below, I’m in the view Active Contacts and at the column Gender, you can see the icons for male and female.

In the steps below I’ll explain how you can achieve this by yourself.

First, we will create a solution to upload the icons and a small script that we are going to use for the filtering for Gender.

Step 1

Navigate to Settings > Solutions and create a new solution.

Step 2

In the solution explorer navigate to Web Resources and click on New, in the print screen below you’ll see the example of the uploaded male icon, make sure you select as Type PNG Format – we will do the same for the female icon.

Step 3

We need to add one more web resource to the solution, this time we will add the JavaScript that we are going to use. Just make sure you give a good name to your script, we will use this name later when configuring the view, in the column Gender. In my example, I called my JavaScript: dp_ContactIcon.js.

Below you can find the script I used to create my JavaScript.

        
        function showIconTooltip(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 = "dp_male";

tooltip = "Male";

break;

case 2:

imgName = "dp_female";

tooltip = "Normal";

break;

}        
      

Step 4

In the solution explorer, go to the entities and select existing entity. Select the Contact entity and press Ok. In the next screen go to tab Views and select Active Contact.

Step 5

Navigate to the Contact > Views > Active Contact and open the view layout. Add the Gender field in the view by pressing Add Columns.

 

Step 6

Select the column Gender in the view and click on Change Properties. Add the web resource dp_ContactIcon.js and use the function name showIconTooltip. Click on OK and make sure you save the view and publish all customization.

Step 7

To see the results, navigate to the Contact entity and open the Active Contact view.

Thank you for reading and happy coding 🙂