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.
