Using the UI Template

Dashboard
1

Hi!

I'm a brand new NR user. I'm pretty familiar with javascript, not so much with styling html.

My goal is to change the background color of a text object from a javascript function, seems like the msg.topic is a good way to do this. I'm trying to create a UI Template, but I'm clearly doing something wrong. This is my template (based on the example provided in NR):

<div ng-bind-html="msg.payload">
    <font color="{{(msg.topic === 'Inactive') ? 'red' : 'green'}}"></font>        
 </div>

In this case, I'm using the font color, just to see if it's working. It's not. I'm also not sure if I can use 'background' instead of 'font'.

Thanks for any suggestions.
Don

2

Try this

Hi and welcome, I am suprised you had no response.
Try this

[{"id":"fa89578a.6842e8","type":"ui_template","z":"bf9e1e33.030598","group":"2d4fe667.28f8ba","name":"","order":11,"width":0,"height":0,"format":"<style>\n    .myclassname {\n        background-color: {{(msg.topic === 'Inactive') ? 'red' : 'green'}};\n        }\n\n</style>\n<div class=\"myclassname\" ng-bind-html=\"msg.payload\">\n </div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":1040,"y":3840,"wires":[[]]},{"id":"3c8b1ea5.8f6e7a","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Inactive","payload":"test","payloadType":"str","x":840,"y":3840,"wires":[["fa89578a.6842e8"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

<style>
    .myclassname {
        background-color: {{(msg.topic === 'Inactive') ? 'red' : 'green'}};
        }

</style>
<div class="myclassname" ng-bind-html="msg.payload">
 </div>
3

Thanks! That is super helpful! I figured it was something simple.

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.