# How to Change the color of the ui text node dynamically

**URL:** <https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843>\
**Category:** Dashboard\
**Created:** [16 June 2018 00:05 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843 "2018-06-16T00:05:14Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [16 June 2018 00:05 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/1 "2018-06-16T00:05:14Z")

</div>

Hi, I’ve been working on a home alarm panel using the dashboard ui nodes and mqtt. I’ve been able to change the dynamically the text and background colors of the buttons and used the form to input the passcode.  
However, the one item I haven’t figured out is how to change the color of the text node which shows the current status of the alarm.  
What I would like to do is if the status is “disarmed” to turn that text green, if it is the status is “pending” to turn it yellow and if it is “armed\_home” or “armed\_away” turn red. what is the simplest approach to getting this done?

Thank in advance!

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [16 June 2018 02:40 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/2 "2018-06-16T02:40:36Z")

</div>

Hello,

Have a look on below flow

```auto
[{"id":"cae40fed.0cb0b","type":"tab","label":"Font Color","disabled":false,"info":""},{"id":"b80cb9f6.df2e38","type":"ui_text","z":"cae40fed.0cb0b","group":"8924e22f.e375e","order":0,"width":"0","height":"0","name":"","label":"","format":"<font color= {{msg.color}} > {{msg.payload}} </font>","layout":"row-left","x":755.1000595092773,"y":172.60000705718994,"wires":[]},{"id":"84993741.45c658","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"disarmed","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":383.00000762939453,"y":107.00000190734863,"wires":[["fdb2fcd1.0e76"]]},{"id":"fdb2fcd1.0e76","type":"function","z":"cae40fed.0cb0b","name":"Color Mapping","func":"switch (msg.payload) {\n\ncase \"disarmed\" : \n msg.color = \"lime\";\n break;\n \ncase \"pending\" : \n msg.color = \"yellow\";\n break;\n \ndefault : \n msg.color = \"red\";\n break;\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":586.1000556945801,"y":172.60000228881836,"wires":[["b80cb9f6.df2e38"]]},{"id":"bb25a8a.3bfb258","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"pending","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":390.00000762939453,"y":154.00000190734863,"wires":[["fdb2fcd1.0e76"]]},{"id":"d8b7282e.5330f8","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"armed_home","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":373.00000762939453,"y":201.00000286102295,"wires":[["fdb2fcd1.0e76"]]},{"id":"71bdd81d.6f9f18","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"armed_away","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":371.00000762939453,"y":247.00000381469727,"wires":[["fdb2fcd1.0e76"]]},{"id":"8924e22f.e375e","type":"ui_group","z":"","name":"Teste","tab":"d4e79c02.16854","disp":false,"width":"6"},{"id":"d4e79c02.16854","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 June 2018 12:32 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/3 "2018-06-16T12:32:43Z")

</div>

@Andrei - two questions

1. I thought the tag is not supported in HTML5, so might your solution not work in some browsers?
2. how would you change the background color of the ut-text node? (the yellow on white is very unreadable.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [16 June 2018 13:18 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/4 "2018-06-16T13:18:00Z")

</div>

Hi Zenofmud,

Indeed the \<font\> tag is not supported in HTML5 but most likely it will still work for some time in new browsers (until a point where it may break). However the original question was about the simplest approach to getting this done.

An alternative solution is to go with CSS using a dashboard template node and CSS variables. I have tested before . It works nice but not as concise as a single line.

In regards to the second question (background) perhaps he can chose to use another color for the font instead of yellow or use the dark theme background from node-red or move to CSS solution.

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [16 June 2018 14:08 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/5 "2018-06-16T14:08:00Z")

</div>

> [@Andrei](#):
>
> ```auto
> [{"id":"cae40fed.0cb0b","type":"tab","label":"Font Color","disabled":false,"info":""},{"id":"b80cb9f6.df2e38","type":"ui_text","z":"cae40fed.0cb0b","group":"8924e22f.e375e","order":0,"width":"0","height":"0","name":"","label":"","format":"<font color= {{msg.color}} > {{msg.payload}} </font>","layout":"row-left","x":755.1000595092773,"y":172.60000705718994,"wires":[]},{"id":"84993741.45c658","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"disarmed","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":383.00000762939453,"y":107.00000190734863,"wires":[["fdb2fcd1.0e76"]]},{"id":"fdb2fcd1.0e76","type":"function","z":"cae40fed.0cb0b","name":"Color Mapping","func":"switch (msg.payload) {\n\ncase \"disarmed\" : \n msg.color = \"lime\";\n break;\n \ncase \"pending\" : \n msg.color = \"yellow\";\n break;\n \ndefault : \n msg.color = \"red\";\n break;\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":586.1000556945801,"y":172.60000228881836,"wires":[["b80cb9f6.df2e38"]]},{"id":"bb25a8a.3bfb258","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"pending","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":390.00000762939453,"y":154.00000190734863,"wires":[["fdb2fcd1.0e76"]]},{"id":"d8b7282e.5330f8","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"armed_home","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":373.00000762939453,"y":201.00000286102295,"wires":[["fdb2fcd1.0e76"]]},{"id":"71bdd81d.6f9f18","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"armed_away","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":371.00000762939453,"y":247.00000381469727,"wires":[["fdb2fcd1.0e76"]]},{"id":"8924e22f.e375e","type":"ui_group","z":"","name":"Teste","tab":"d4e79c02.16854","disp":false,"width":"6"},{"id":"d4e79c02.16854","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]
> 
> ```

@Andrei, that worked perfectly. While testing I was using a function node with

> msg.color = (msg.payload =='armed\_home')?'green':'red';  
> return msg;

but could not get it to work, will be looking into CSS next as I continue learning this platform. Thank you!

@zenofmud - I am using a dark background with those color choices. The oddest looking item right now are the submit and cancel button, they are in English while everything else is in Spanish (besides the alarm status)  
 ![snip_20180616084255](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d6a9888fdc2afa6154b89178fb52b28bf53948a2.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 June 2018 14:52 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/6 "2018-06-16T14:52:06Z")

</div>

What nodes are you using for them?

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [16 June 2018 16:30 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/7 "2018-06-16T16:30:54Z")

</div>

> [@zenofmud](#):
>
> What nodes are you using for them?

I'm using the ui form node.

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [16 June 2018 18:07 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/8 "2018-06-16T18:07:54Z")

</div>

@zenofmud - now you have me thinking, is it possible to change the text on the default buttons on the ui form?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 June 2018 20:28 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/10 "2018-06-16T20:28:28Z")

</div>

@Unpuertomex - yes there is a way but currently you will have to edit one of the modules. You will have to go to the .node-red/node\_modules/node-red-dashboard/dist/js and edit the file ‘app.min.js’

Search for `<md-button type="submit" class="md-raised nr-dashboard-form-button">submit</md-button>`  
and you can change the `>submit<` to `>whatever<`

The ‘cancel’ is just below it.

This should be something that is in translation file and maybe @dceejay will pipe in here to answer the question “Should this have an issue raised?”

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 June 2018 21:12 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/11 "2018-06-16T21:12:42Z")

</div>

Feel free to raise an issue. I’m travelling for a bit so if anyone wants to offer up a fix on the meantime…

---

<div class="post-metadata">

**Author:** ![PKGeorgiev](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pkgeorgiev/32/1325_2.png) [@PKGeorgiev](https://discourse.nodered.org/u/PKGeorgiev)\
**Post date:** [22 June 2018 17:01 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/12 "2018-06-22T17:01:28Z")

</div>

@dceejay can changing of text color / background color for ui\_text be included in the Dashboard by default? Just like for ui\_button. It will be very convenient.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [22 June 2018 17:29 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/13 "2018-06-22T17:29:40Z")

</div>

@dceejay - I just raised an issue about changing the text for Submit and Cancel and would be willing to try to fix it, but it is hard coded in app.min.js and I have no idea where that comes from.

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [23 June 2018 01:22 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/14 "2018-06-23T01:22:51Z")

</div>

> [@zenofmud](#):
>
> you can change the `>submit<` to `>whatever<`

I decided to remove the form and created my own keypad, it gave me more control and help me learn a few new things. Thanks for your help, I'm sure I'll be back for more.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 June 2018 07:47 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/15 "2018-06-23T07:47:35Z")

</div>

Thanks, fix will be in 2.9.5

---

<div class="post-metadata">

**Author:** ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)\
**Post date:** [23 June 2018 13:58 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/16 "2018-06-23T13:58:25Z")

</div>

> [@dceejay](#):
>
> Thanks, fix will be in 2.9.5

Wow, that was quick. Thanks for the ticket @zenofmud.

---

<div class="post-metadata">

**Author:** ![supriya](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@supriya](https://discourse.nodered.org/u/supriya)\
**Post date:** [7 March 2020 08:52 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/17 "2020-03-07T08:52:14Z")

</div>

HI,

I want to change the header color and i want add the condition for due date , if pm date is over due means it should shows in red color otherwise it should be in green...  
kindly find the flow.please help me .

[{"id":"a1589425.dc0498","type":"ui\_template","z":"e7aff11a.08007","group":"3330cf02.56b76","name":"","order":1,"width":"20","height":"13","format":"\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: center;\n padding-right: 15px;\n }\n\n\n\<table cellpadding="2" border="1" id="table1" class="table-hover" style="width: 100%;"\>\n \<tr ng-repeat="obj in msg.payload"\>\n \n \<td class="numeric" bgcolor=radium\>{{obj.A }}\n \<td class="numeric" bgcolor=grey\>{{obj.B }}\n \<td class="numeric" bgcolor=grey\>{{obj.C }}\n \<td class="numeric" bgcolor=grey\>{{obj.D }}\n \<td class="numeric" bgcolor=grey\>{{obj.E }}\n \n \n\n \n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":740,"y":100,"wires":[]},{"id":"2c1df0cb.1421c","type":"template","z":"e7aff11a.08007","name":"ICT MAINTAINANCE REPORT","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"[\n {"A":"MONTH" ,"B":"TESTER ID" , "C":"TESTER" ,"D":"PM DONE DATE" ,"E":"PM DUE DATE"}, \n {"A":"FEBRUARY" ,"B":"ICT07" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT16" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT59" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT64" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT69" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT80" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT85" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT98" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT101" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT109" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT110" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT117" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT118" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT142" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT147" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT148" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT175" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT176" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT199" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT210" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT171" , "C":"Agilent i307x Series 5" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT180" , "C":"Agilent i307x Series 5" ,"D":"25/2/2020" ,"E":"25/3/2020"}\n \n \n\n \n]\n\n\n","x":370,"y":106,"wires":[["f4d81c18.b5"]]},{"id":"d4917cb3.d42c6","type":"inject","z":"e7aff11a.08007","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":"","x":150,"y":100,"wires":[["2c1df0cb.1421c"]]},{"id":"f4d81c18.b5","type":"json","z":"e7aff11a.08007","name":"","property":"payload","action":"","pretty":false,"x":570,"y":100,"wires":[["a1589425.dc0498"]]},{"id":"3330cf02.56b76","type":"ui\_group","z":"","name":"ICT PM REPORT","tab":"bcd2e4aa.0cd768","order":1,"disp":true,"width":"20","collapse":false},{"id":"bcd2e4aa.0cd768","type":"ui\_tab","z":"","name":"ICT PM TRAACKING","icon":"dashboard","order":13}]

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 March 2020 10:35 UTC](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843/18 "2020-03-07T10:35:06Z")

</div>

Your flow will not import. Please [read this thread](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) and then edit your post to fix the flow.