Changing background color for model driven app

(0) Share

Report

Posted on by Lucas001

2,429 Super User 2025 Season 2

Hi everyone,

it seems that the problem still persists.

I want to change the colour of my model driven app text input field. Using JS, it generally seems to be possible.

I achieved the following with a direct console execution of:

document.querySelector("[data-id=cdt_p_familienname] input").style.backgroundColor = "rgb(255,199,206)"

Problem is I usually would implement my <script></script> in the end to be loaded last. Seems not to be possible in MDAs.

I now tried the .OnLoad()-Event of the form itself. Unfortunately it seems that the OnLoad event fires before the DOM is loaded in some way. When outputting the HTML using window.document I just get some scripts.

Even using a setTimeout() does not work as the script seems to only get elements which are within or executed before the form OnLoad().

Anyone knows why it behaves like that?

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (1)

Verified answer

Jonathan Manrique 2,687 on at

Like (1)

Report

Hi @Lucas001

In Model Driven Apps applications it is not possible to make these types of changes with Javascript because you must have to modify the html of the application and it is something that is not recommended to do and can damage the application.

Now there are options under the PCF components for what you mention, you can develop PFC or pull from the existing community gallery

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview
https://pcf.gallery/

If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.
You can accept more than one post as a solution

Was this reply helpful? Yes No
Lucas001 2,429 Super User 2025 Season 2 on at

Like (1)

Report

Hi @Jmanriquerios,

thanks for the reply. I assumed it's as you say, still hoped differently.
I will try starting with a PCF than.

Was this reply helpful? Yes No
DW-07111621-0 2 on at

Like (0)

Report
I tried to change a section colour via an event handler on Form Load.

const dataId = `tab_details_section_holidays` document.querySelector(`section[data-id="${dataId}"]`) as HTMLElement;

However, the code would never find the element so thinking this not supported. Can you use a custom PCF control to build your own section element?

Was this reply helpful? Yes No