How to add custom icons to a list view in Dynamics 365 CE

Dynamics 365, Power Apps, Power Automate, Power Platform / By

This guide shows you how you can add custom icons to the Priority (prioritycode) field in a list view for the case table. For information about adding custom icons to a list view, it can be found in the Microsoft Documentation here, Add custom icons to a list view.

Step 1: To start, go to make.powerapps.com.

Step 2: Create a solution. Not necessary but for convenience when deploying to different environments and to have all resources within the same solution.

Step 3: Open the solution and add an existing table and view where you want to show custom icons. In this example, the view Active Cases on the case table will be used.

Step 4: Adding table and view, add the Case table by clicking on Add existing and Table. This opens a dialog shown in the next step.

Find the Case table > Select the table > Click next

Add the view to add custom list icons to.

Continue the process and add the view like below.

The view is added on the case table. Proceed by clicking Add to add the table and the view to the solution.

Step 5: Create the JavaScript (Web resource) that displays the icons.

Create a JavasScript file locally, and paste into the following code. Then proceed to the next step.

function displayCasePriorityIcons(rowData, userLCID) {
    let str = JSON.parse(rowData);
    let coldata = str.prioritycode_Value;
    let imgName = "";
    let tooltip = "";
    let prioritycode = parseInt(coldata, 10);

    if (prioritycode == 1) { // High
        imgName = "fe_highpriority.png";
        tooltip = "High";
    } else if (prioritycode == 2) { // Normal
        imgName = "fe_normalpriority.png";
        tooltip = "Normal";
    } else if (prioritycode == 3) { // Low
        imgName = "fe_lowpriority.png";
        tooltip = "Low";
    } else {
        imgName = "";
        tooltip = "";
    }
    let resultarray = [imgName, tooltip];
    return resultarray;
}

Add a new Web Resource to the solution.

Create the new web resource by uploading the JavaScript file from the previous step. Then fill out the Display Name and the Name of the resource, add a Description, and click Save. The resource should be created and visible in the solution.

Step 6: Find icons to display in the list view. A list of the icons in the example are listed below:

High Priority: https://icons8.com/illustrations/illustration/macaroni-1119

Normal Priority: https://icons8.com/illustrations/illustration/surr-206

Low Priority: https://icons8.com/illustrations/illustration/fogg-644

Illustration by Icons 8 from Ouch!

Step 7: Create a new web resource for each icon.

Fill out the information for the icon (web resource). Upload the image file, give it a Display Name, and a Name, and choose PNG if the icon in the link suggested earlier is used. Click Save and proceed with the same process for the remaining icons.

The solution should now contain all the necessary components.

Step 8: Add JavaScript to the column Priority in the list view. Open the view.

After opening the view click on Switch to classic. The power platform admin center doesn’t support adding JavaScript to a column in a list view at the time of writing.

When the classic interface opens the view click on the Priority field > Change Properties > Add JavaScript (web resource) and function name in the script > Then click OK and lastly Save and Close. (The screenshots are in Norwegian, but the same steps apply)

When the script is added go back to the solution and click Publish All Customizations.

Step 9: Then open the Active Cases list view in your app and see the changes to the Priority field like below. If the icons don’t show there might be some issue in the JavaScript file. At least I experienced it multiple times and it was solved by reading the documentation a bit more in detail😁

Make sure the JavaScript function contains the required parameters and that it returns an array with the icon name and a tooltip description as described more in detail in the documentation mentioned initially.

Hope you found this useful.

For other posts about JavaScript check out:

JavaScript Code Snippets for Dynamics 365 – Cheat Sheet
How to add JavaScript to form on load in Dynamics 365
How to hide and show a tab in Dynamics 365 based on a field value
How to create an account with a primary contact with JavaScript in Dynamics 365

For More Content See the Latest Posts