# Setting font color for a value

**URL:** <https://discourse.nodered.org/t/setting-font-color-for-a-value/25862>\
**Category:** General\
**Created:** [1 May 2020 12:01 UTC](https://discourse.nodered.org/t/setting-font-color-for-a-value/25862 "2020-05-01T12:01:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndrewZ](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@AndrewZ](https://discourse.nodered.org/u/AndrewZ)\
**Post date:** [1 May 2020 12:01 UTC](https://discourse.nodered.org/t/setting-font-color-for-a-value/25862/1 "2020-05-01T12:01:05Z")

</div>

I've seen a number of examples on how to set the font color (or an icon) for the whole message using `msg.color` but I'm looking for the right way to do the same basing on the value within the message.  
In my case the message contains an array with values like true/false or On/Off, and currently each text node I have has _Value format_ set to something like `{{msg.payload[5]}}`.  
Is there an option to configure formatting like this: true (or On) --\>green, false (or Off) --\>red ?

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [1 May 2020 14:38 UTC](https://discourse.nodered.org/t/setting-font-color-for-a-value/25862/2 "2020-05-01T14:38:10Z")

</div>

I have been using a Switch Node and selecting either one of Change Nodes and then outputting via a text node. I don't know if that would help.

```auto
[{"id":"f64a4d0.e5aca3","type":"change","z":"8803e200.b1143","name":"","rules":[{"t":"set","p":"Output","pt":"msg","to":"#FF3333","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1082,"y":143,"wires":[["85b1230b.a97a98"]]},{"id":"1c394b6.6ac76b5","type":"change","z":"8803e200.b1143","name":"","rules":[{"t":"set","p":"Output","pt":"msg","to":"#33ff55","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1080,"y":105,"wires":[["85b1230b.a97a98"]]},{"id":"d6bd54ea.0ea98","type":"switch","z":"8803e200.b1143","name":"Target?","property":"switch","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":918,"y":126,"wires":[["1c394b6.6ac76b5"],["f64a4d0.e5aca3"]]},{"id":"85b1230b.a97a98","type":"ui_text","z":"8803e200.b1143","group":"6a2416d.9938968","order":1,"width":0,"height":0,"name":"Ambient Temperature","label":"<font color= {{msg.Output}} > {{\"Living Temperature\"}} </font>","format":"<strong><font color= {{msg.Output}} > {{msg.payload}} </font></strong>","layout":"row-spread","x":1300,"y":140,"wires":[]},{"id":"6a2416d.9938968","type":"ui_group","z":"","name":"Heating","tab":"f77d04c6.cfa778","order":1,"disp":false,"width":"6","collapse":false},{"id":"f77d04c6.cfa778","type":"ui_tab","z":"","name":"HMI","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![AndrewZ](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@AndrewZ](https://discourse.nodered.org/u/AndrewZ)\
**Post date:** [1 May 2020 15:08 UTC](https://discourse.nodered.org/t/setting-font-color-for-a-value/25862/3 "2020-05-01T15:08:11Z")

</div>

Thanks, but that will not help in my case as I have multiple text nodes, I probably need some logic right in formatting function, not sure if it exists though.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [1 May 2020 19:29 UTC](https://discourse.nodered.org/t/setting-font-color-for-a-value/25862/4 "2020-05-01T19:29:12Z")

</div>

There are many ways to do what you want.

off the top of my head...

You take your array of messages, put it though a function that generates a new `msg` for each entry & outputs a stream of new messages that have a `.color` (property depending on the value). I'd suggest you add a topic like "item1", "item2" etc so you can route the stream of messages to your dashboard nodes appropriately.

You send your array of messages into a split node, then through a function node that that adds a `.color` (property depending on the value).

You could add a function node with 5 outputs, loop through your array, generate a new `msg` for each element & add the desired `.color` property based on the element value then return an array of messages (where each one lines up with the output pins)

---

<div class="post-metadata">

**Author:** ![AndrewZ](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@AndrewZ](https://discourse.nodered.org/u/AndrewZ)\
**Post date:** [2 May 2020 10:07 UTC](https://discourse.nodered.org/t/setting-font-color-for-a-value/25862/5 "2020-05-02T10:07:00Z")

</div>

Thank you for the ideas, I've got it working. This solution is perhaps far from perfect, but but still good for a non profi 😉

```auto
[{"id":"d53f115.e791df","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"77d03571.d5b03c","type":"split","z":"d53f115.e791df","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":270,"y":160,"wires":[["f3192a52.5daf18"]]},{"id":"ade11630.7a53c8","type":"switch","z":"d53f115.e791df","name":"","property":"parts.index","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"eq","v":"5","vt":"num"},{"t":"eq","v":"6","vt":"num"},{"t":"eq","v":"7","vt":"num"}],"checkall":"true","repair":false,"outputs":8,"x":600,"y":160,"wires":[["67141802.de6758"],[],[],[],[],[],[],["16430092.5fe45f"]]},{"id":"f3192a52.5daf18","type":"function","z":"d53f115.e791df","name":"add color","func":"var data = msg.payload;\nvar color;\nif (msg.payload == \"On\") { \n color = \"red\";\n } else {\n color = \"blue\";\n }\nmsg.color = color;\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":160,"wires":[["ade11630.7a53c8"]]},{"id":"16430092.5fe45f","type":"ui_text","z":"d53f115.e791df","group":"d53fbd69.0cb7d","order":11,"width":0,"height":0,"name":"","label":"DI 7","format":"<font color ={{msg.color}}>{{msg.payload}}</font>","layout":"row-spread","x":760,"y":220,"wires":[]},{"id":"67141802.de6758","type":"ui_text","z":"d53f115.e791df","group":"d53fbd69.0cb7d","order":11,"width":0,"height":0,"name":"","label":"DI 0","format":"<font color ={{msg.color}}>{{msg.payload}}</font>","layout":"row-spread","x":770,"y":100,"wires":[]},{"id":"d53fbd69.0cb7d","type":"ui_group","z":"","name":"Inputs","tab":"13fd2b57.c56695","order":1,"disp":true,"width":4,"collapse":false},{"id":"13fd2b57.c56695","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 May 2020 10:07 UTC](https://discourse.nodered.org/t/setting-font-color-for-a-value/25862/6 "2020-05-16T10:07:04Z")

</div>

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