02 Jul, 2025

How to Show Icons in View Cells Based on Field Values in D365 CE

Posted on 02 Jul, 2025 by Rohit Bhagat, Posted in Dynamics 365 Dataverse Power Platform

Blogs

Introduction:
In Dynamics 365, adding icons to view cells based on field values can make the interface more user-friendly and visually clear. Instead of reading text, users can quickly understand the status or type of a record just by looking at the icon. This small change can improve data visibility and speed up decision-making

Step:

1. Create and Upload Web Resources
   Start by preparing your JavaScript file with the logic to show icons based on field values.
   In our use case, we are displaying icons based on the Status Reason field:
         Active → Yellow icon
         Pending → Red icon
        Completed → Green icon
   Next, upload the following as web resources in your Dynamics 365 solution:
         The JavaScript file as a Script (JScript).
         All the required icon images (yellow, red, green) as image web resources.
   These resources will be used in the view to dynamically display icons based on status values.
   Webresource Manager:
   
   JavaScript Code:

   /// 
   namespace NISL {
       export namespace AccountView {
           export function displayIconForStatusReason(rowData: string, userLCID: number): [string, string] {
               try {
                   const parsedData = JSON.parse(rowData);
                   const statusCode = parsedData.statuscode_Value;
                   let imgName = "";
                   let tooltip = "";
   
                   if (statusCode == 1) {
                       imgName = "nisl_/icon/YellowSquare";
                       tooltip ="Active";
                   } else if (statusCode == 665000001) {
                       imgName = "nisl_/icon/RedSquare";
                       tooltip = "Pending";
                   }
                   else if (statusCode == 665000002) {
                       imgName = "nisl_/icon/GreenSquare";
                       tooltip = "Completed";
                   }
   
                   return [imgName, tooltip];
               } catch (error) {
                   console.error("Error parsing rowData or accessing profit value", error);
                   return ["", "Error"];
               }
           }
       }
   }

2. Open the Entity View in Classic Mode
   Navigate to the entity and open the target view where you want icons to appear. Use Classic Mode for easier customization.
   
    
3. Add JavaScript to the Target Column
   Select the column to customize, open its properties, and add your JavaScript web resource. Specify the function name that will run to show icons based on field values.
   
    
4. Save and Publish
   Save the view changes and publish all customizations.
5. Test Your View
   Open the view in the app and confirm icons appear dynamically according to the field values.