Answered

How to Set Different Background Colors for Forms Based on Entity in Model Driven Apps?

(0) Share

Report

Posted on by charlesdgcharle

Hello everyone,

I'm looking to enhance the user experience on our Model Driven apps by implementing visual distinctions between different forms. Specifically, I want to apply unique background colors depending on the form or entity type—such as a blue background for the Account form and a green background for the Contact form.

Has anyone implemented something similar, or could you guide me on how to achieve this? I'm curious whether it's possible to set these colors dynamically based on the entity displayed.

Any advice on how to approach this within the Model Driven framework would be greatly appreciated!

Thank you in advance for your insights!

Categories:

Building Power Apps

All responses (3)

Answers (1)

Sort by

cchannon 4,702 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

As far as I know, there is no supported way to achieve this.
charlesdgcharle on at

Like
a
(0)

Report
Copy link

Link copied!

Even with an included JavaScript ?
Verified answer

charlesdgcharle on at

Like
a
(0)

Report
Copy link

Link copied!

I found a solution and it works !

1) Create a JS file resource with the following script:

// Created by Charles De Guchteneere CDG 2024
function changeColor(executionContext) {
var int0 = setInterval(function() {
var container = window.parent.document.querySelectorAll("div[id^='mainContentContainer_']")[0];
if (container) {
container.style.backgroundColor = 'rgb(245, 230, 255)'; // Change to desired color
clearInterval(int0);
}
else {
console.log('no container');
}
}, 100);
}

2) Add and call the "changeColor" function in the Events "On Load" section of the appropriate form

Here is the result 🙂
Give me your feedback please