Power Platform Community Forum Thread Details

How to Change Header Color Dynamically Based on Choice Column Value in Model-Driven App"

"How can I dynamically change the header color in a Model-Driven App based on the selected value of a choice column? I have already created the choice column and need guidance on implementing this feature using JavaScript and Business Rules."?

function changeHeaderColor(executionContext) {
var formContext = executionContext.getFormContext();
var fieldValue = formContext.getAttribute("wd_statusoftriage").getText();

// Define colors based on field value
var colors = {
"Critical Impact": "#FF0000", // Red
"Serious Impact": "#FF6347", // Dark Red
"Moderate Impact": "#FF7F7F", // Light Red
"Minor Impact": "#90EE90", // Light Green
"Routine Impact": "#00FF00" // Bright Green
};

// Set header color based on field value
var header = document.querySelector(".pa-headerview-bar");
if (header && colors[fieldValue]) {
header.style.backgroundColor = colors[fieldValue];
}
}

Categories:

General Discussion

Leaderboard > Microsoft Power Up Program Community