Enhancing Model-Driven App Views with Custom Column Icons

A Hidden Feature That Can Make Your Views Much More User-Friendly

I came across a feature that I had never used before, even after working with Dynamics CRM and Power Platform for many years. While editing a column in a Dataverse view, I noticed two properties:

• Web Resource
• Function Name

At first, I thought Microsoft had introduced a new feature that allows custom rendering for individual view columns. After researching further, I learned that this capability has actually existed for quite some time, but it has remained somewhat hidden and underused.

Once I noticed it in the modern Power Apps maker experience, I decided to test it immediately. Within a few minutes, I was able to replace the standard Yes/No text in my Is Mandatory? column with custom icons.

The result was simple, but very effective. The view became much easier to scan visually.

---

What Is This Feature?

This feature allows a Dataverse view column to call a JavaScript function from a web resource. That JavaScript function can return an image web resource and tooltip text.

Dataverse then displays that image next to the column value in the view.

[
  "ImageWebResourceName",
  "Tooltip Text"
]

It is lightweight, simple, and useful for adding visual indicators to Model-driven App views.

---

A Simple Example

Normally, a view might display something like this:

Question	Is Mandatory?
Check Pressure	Yes
Enter PSI	No
Verify Seal	Yes

After configuring custom icons, the same view can display:

Question	Is Mandatory?
Check Pressure	✅ Yes
Enter PSI	❌ No
Verify Seal	✅ Yes

The underlying data does not change. Only the visual representation changes.

---

How Does It Work?

The JavaScript function receives row data from Dataverse. Based on the value in that row, it returns the appropriate image web resource.

function showMandatoryIcon(rowData, userLCID) {

    var row = JSON.parse(rowData);

    var isMandatory =
        row.insp_ismandatory_Value ??
        row.insp_ismandatory;

    if (isMandatory === true || isMandatory === "true" ||
        isMandatory === 1 || isMandatory === "1") {

        return ["insp_yes", "Mandatory Question"];
    }

    return ["insp_no", "Optional Question"];
}

In this example:

• insp_yes is the image web resource for Yes.
• insp_no is the image web resource for No.
• Mandatory Question and Optional Question are tooltip values.

---

Implementation Steps

Step 1: Create Image Web Resources

Create image web resources in your Dataverse solution.

insp_yes
insp_no

These can be SVG or PNG image web resources.

Step 2: Create a JavaScript Web Resource

Create a JavaScript web resource and add your function.

function showMandatoryIcon(rowData, userLCID) {
    try {
        var row = JSON.parse(rowData);

        var isMandatory =
            row.insp_ismandatory_Value ??
            row.insp_ismandatory;

        if (isMandatory === true || isMandatory === "true" ||
            isMandatory === 1 || isMandatory === "1") {

            return ["insp_yes", "Mandatory Question"];
        }

        return ["insp_no", "Optional Question"];
    }
    catch (e) {
        console.error("showMandatoryIcon failed:", e);
        return ["insp_no", "Icon error"];
    }
}

Step 3: Configure the View Column

Open the table view in the maker portal and select the column where you want the icon to appear.

In the column properties, configure:

Web Resource:
Your JavaScript web resource

Function Name:
showMandatoryIcon

Then save and publish your customizations.

---

Debugging Tip

One challenge is identifying the exact property name Dataverse passes into the JavaScript function.

To inspect the row data, temporarily add console logs:

function showMandatoryIcon(rowData, userLCID) {

    console.log("Raw rowData:", rowData);

    var row = JSON.parse(rowData);

    console.log("Parsed row object:", row);

    return ["insp_yes", "Test"];
}

Open browser developer tools using F12, go to the Console tab, and refresh the view. This will show the row object and available field names.

---

Practical Business Scenarios

This feature can be useful in many Model-driven App scenarios.

Inspection Status

• 🟢 Completed
• 🟡 In Progress
• 🔴 Overdue

Pass / Fail

• ✔ Pass
• ✖ Fail

Priority

• ⬇ Low
• ➡ Medium
• ⬆ High

Device Health

• 🟢 Healthy
• 🟠 Needs Service
• 🔴 Out of Service

Approval Status

• ⏳ Pending
• ✔ Approved
• ✖ Rejected

Question Types

• ☑ Yes / No
• 📝 Text
• 📅 Date
• 🔢 Number
• 📋 Choice

---

Important Limitations

This is a very useful feature, but it is important to understand its limitations.

1. It Cannot Render HTML

You cannot return custom HTML, CSS, buttons, links, progress bars, or formatted text. The function only returns an image web resource and tooltip.

2. The Icon Is Not Clickable

The icon cannot open a dialog, execute JavaScript, navigate to another page, or trigger Power Automate. It is only a visual indicator.

3. It Does Not Work in Editable Grids

This feature is intended for read-only grids. If the view is using an editable grid, the custom icons will not display the same way.

4. No Cell Formatting

You cannot change the font color, background color, row color, alignment, padding, or row height.

5. No Interactive Controls

You cannot embed buttons, checkboxes, toggles, dropdowns, or input controls.

6. Images Must Be Web Resources

The image must already exist as a Dataverse image web resource. You cannot return external URLs, base64 images, or dynamically generated images.

7. Limited to One Image Per Column Cell

The function returns one image and one tooltip. It is not meant for displaying multiple icons inside a single cell.

8. Performance Matters

The JavaScript function runs once for every visible row in the view. Keep the logic lightweight and avoid expensive operations.

9. Not a Replacement for PCF

If you need rich UI features like badges, progress bars, charts, clickable buttons, custom layouts, or interactive components, a Power Apps Component Framework control is still the better option.

---

When Should You Use This Feature?

This feature is best used when you want to make a view easier to scan without building a full custom control.

Sometimes a small visual cue, like a green checkmark or red warning icon, communicates status faster than plain text.

---

My Thoughts

This is one of those small Dataverse features that can make a big difference in user experience.

It will not replace PCF controls, dashboards, or custom pages. But for lightweight visual indicators in Model-driven App views, it is extremely useful.

---

References

• Microsoft Learn: Display custom icons alongside values in list views
• Microsoft Learn: Customize entity views
• Microsoft Learn: Image web resources