Conditional Format of a Template

Dashboard
1

Hi
I would like to change the color of a dashboard template by the value of msg.payload.

This is what I have inside the template node, but (unfortunately) it is not working:

<div layout="row" layout-align="center">
    <p ng-style="{color : msg.payload === 'ON' ? 'yellow' : 'grey'}">
        <b>{{msg.payload === 'ON' ? 'ON' : 'OFF'}}</b>    
    </p>
</div>

Does anyone know how I can fix this?

Here you can see the nodes I'm using:

`[{"id":"34477ba4.c07d84","type":"ui_template","z":"883b8d2c.c5a47","group":"702283f5.cd9f1c","name":"Button 35 template","order":16,"width":"1","height":"1","format":"<div layout=\"row\" layout-align=\"center\">\n    <p ng-style=\"{color : msg.payload === 'ON' ? 'yellow' : 'grey'}\">\n        <b>{{msg.payload === 'ON' ? 'ON' : 'OFF'}}</b>    \n    </p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1280,"y":1120,"wires":[[]]},{"id":"50a31224.c5176c","type":"mqtt in","z":"883b8d2c.c5a47","name":"Smarthome/Sonoff35/stat/POWER","topic":"Smarthome/Sonoff35/stat/POWER","qos":"2","datatype":"auto","broker":"78c9f2dd.62a9ec","x":460,"y":1120,"wires":[["34477ba4.c07d84"]]},{"id":"702283f5.cd9f1c","type":"ui_group","z":"","name":"Link zu Geräten","tab":"deb86664.557598","order":1,"disp":true,"width":"8","collapse":false},{"id":"78c9f2dd.62a9ec","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"deb86664.557598","type":"ui_tab","z":"","name":"Admin","icon":"settings","order":2}]`
2

Does no one have a clue?

3

Apparently it is working (for what you programmed).

If colors are not changing in your dashboard perhaps you should check below configuration:

Change it to : Use angular theme in UI template and test again.

r-01
r-01.png436Ă—534 17 KB

1 Like
4

That's it. Thanks a lot Andrei! :+1:

1 Like