Blog-Image

Enhancing Dynamics 365 Views: Displaying Icons Dynamically Based on Option Set Values

In this Blog, we will walk through the complete process of displaying icons in a Dynamics 365 view based on the value of an Option Set field. This involves creating a web resource, writing JavaScript, and configuring the view to use the custom column renderer.

Step 1: Create an Option Set Field in Dynamics 365

  1. 1. Navigate to Power Apps.
  2. 2. Select the Dataverse environment.
  3. 3. Go to Tables and choose the table where you want to add icons (e.g., "Attendance").
  4. 4. Click + Add Column and create an Option Set field:
    • For Example:
    • Name: izx_in_out
    • Options:
      • In → Value: 1
      • Out → Value: 2
  5. Click Save & Close.

Step 2: Prepare the Icons

We need icons for different statuses.

  1. 1. Prepare the icon images (.png format):
    •     izx_green_in.png → Green icon for "In"
    •     izx_red_out.png → Red icon for "Out"
    •     new_default_icon.png → Default icon for unknown statuses
  2. 2. Upload the images as Web Resources:
    •     Navigate to Power Apps → Solutions.
    •     Select your solution and click + Add → Web Resource.
    •     Upload each icon, set the type as Image (PNG), and name them:
      •     izx_green_in
      •     izx_red_out
      •     new_default_icon
    • Click Save and Publish.

Step 3: Create a JavaScript Web Resource

Now, we create a JavaScript function to dynamically assign icons in the view.

  1. 1. Navigate to Power Apps → Solutions.
  2. 2. Select your solution and click + Add → Web Resource.
  3. 3. Set the type to JavaScript (JS).
  4. 4. Name the web resource: izx_SetIconToView.js.
  5. 5. Copy and paste the following script:
// Function to dynamically set icons based on Option Set values
function customColumnRenderer(rowData, userLCID) {
    debugger;
    var record = JSON.parse(rowData);
    var columnValue = record["izx_in_out"]; // Replace with your field schema name
    var iconUrl = "";
    var tooltipText = "";

    console.log("Column Value:", columnValue); // Debugging

    switch (columnValue) {
        case "In": // If value is 'In'
            iconUrl = "izx_green_in.png"; // Web resource reference
            tooltipText = "Green Icon - In";
            break;
        case "Out": // If value is 'Out'
            iconUrl = "izx_red_out.png";
            tooltipText = "Red Icon - Out";
            break;
        default:
            iconUrl = "new_default_icon.png";
            tooltipText = "Unknown Status";
    }

    console.log("Selected Icon URL:", iconUrl); // Debugging

    return [iconUrl, tooltipText];
}
   

Save and Publish the script in Power Apps.

Step 4: Configure the View to Use the JavaScript Renderer

Now, we apply the JavaScript function to the view.

  1. 1. Navigate to Power Apps → Tables and select your table.
  2. 2. Go to the Views tab.
  3. 3. Select the view where you want to show icons (e.g., "Active Attendance Records").
  4. 4. Click Edit Columns.
  5. 5. Add a new text column (if not already present):
    • Name: izx_icon
    • Data Type: Image URL
  6. 6. Click on Advanced SettingsCustomize the System.
  7. 7. Open the view in the classic designer and select the column to be modified.
  8. 8. Click Change PropertiesAdd Custom JavaScript Renderer.
  9. 9. Set the web resource as izx_SetIconToView.js and the function name as customColumnRenderer.
  10. 10. Click OK, then Save and Publish the view.
PowerApps Image

Step 5: Test the Custom Icons in the View

Follow these steps to verify that the custom icons are displayed correctly.

  1. Open Dynamics 365 and navigate to the entity where you applied the changes.
  2. Open the view you modified.
  3. Check whether the correct icons appear based on the izx_in_out field values.

Final Outcome

  • When izx_in_out = InGreen icon appears. ✅
  • When izx_in_out = OutRed icon appears. ❌
  • If value is unknownDefault icon appears. ⚠️
PowerApps Image

This approach enhances data visualization, making it easier for users to interpret records at a glance.

quote-image

Enhancing Dynamics 365 Views: Displaying Icons Dynamically Based on Option Set Values

Eekshith Pavan Kumar, Dynamics CRM Developer
We Are IZENIX SOLUTIONS

We Work to Help You Grow

Izenix educate and explain practical performance and configurations for fast check and best outcomes

Implementation
100%
Training
100%
Support
100%
We Are Here For You

Let's Get Back to Work

Getting a better understanding of Izenix's specialized services and solutions

Schedule for Free Demo
×