Change dashboard 2.0 UI-Group Background color based on bool in the payload

Dashboard
1

I am new to node red. I am trying to change the UI-Group background color to green it the device is on and red if it is off. I am not sure if i need to use UI-control or UI-templet nodes?

2

We don't currently have a way of adding dynamic classes to Groups, only widgets. Could I trouble you to open a Feature Request here please: Sign in to GitHub · GitHub

3

For group(s) add a class, name it as you like. For example device-state

Then write a bit of CSS

.device-state:has(.device-on) .bg-group-background{
    background-color: #ccff90 !important;    
}
.device-state:has(.device-off) .bg-group-background {
    background-color: #ffc290 !important;
}

Now you can choose your favourite widget in group and add or remove classes device-off or device-on for it. Dynamically or statically. Do it with one widget in group only.

The magic of the CSS selector explained:
select elements with class device-state, check if has any element with class device-on, and if so, find the element with class bg-group-background in it and forcibly apply background color for it.

1 Like