How do I set the background color in the DB2 template using msg.payload?

Dashboard
1

Hello,

I'm at my wits' end. I want to dynamically set a color in hex format (e.g., ‘#167099’) as the background color of a template. I've tried all the available examples—without success.


<div class="dynamic-background" style="background-color:‘{{msg.payload.mode_rgb}}’;">
    {{msg.payload.mode_rgb}}
</div>

<style>

.dynamic-background {
   width: 100%;
   height: 100%;
   padding: 20px;
   box-sizing: border-box;
   border-radius: 4px;
}
</style>

That was my last attempt.

Maybe—hopefully—someone has a tip for me.

Thanks and sunny regards,

Hubertus

2

This section of the documentation may help Template ui-template | Node-RED Dashboard 2.0
Notice the : in front of class, try this before your style to bind the javascript/variable

3

Also on the page linked to by @E1cid above, pay attention to this part:

Important Note: On first load, msg.payload may be null or undefined, and trying to access a nested property will throw an error. Using the optional chaining (?.) operator, e.g. msg.payload?.nested?.property will prevent these errors occurring

4

Thanks to everyone,

I did read - Template ui-template | Node-RED Dashboard 2.0 -, but apparently I didn't understand it. The heat is unbearable and my brain isn't working right.

This Version works:

<div class="dynamic-background" :style='"background-color:" + msg?.payload?.mode_rgb'>

Sunny greetings from Germany
Hubertus