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

If you think your friends/network would find this useful, please share it with them – I’d really appreciate it.

This guide show 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: The create a solution. Not necessary but for convenience when deploying to different environment and to have all resources within the same solution.

Step 3: Open the solution and add 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: Creating the JavaScript (Web resource) that displays the icons.

Create a JavasScript file locally, and paste in the following code. Then proceed to 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 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, a Name, choose PNG if the icon in the link suggested earlier is used. Click Save and proceed the same process for the remaining icons.

The solution should now contain all the necessary components.

Step 8: Add the 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 column in a list view in 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 screen shots 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 doesn’t show there might be some issue in the JavaScript file. At least I experienced it multiple time 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 and array with the icon name and a tool tip description as described more in detail in the documentation mentioned initially.

Hope you found this useful.