# How to Dynamically change the "Value Format" of ui\_text?

**URL:** <https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116>\
**Category:** Dashboard\
**Created:** [10 July 2019 16:46 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116 "2019-07-10T16:46:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [10 July 2019 16:46 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116/1 "2019-07-10T16:46:12Z")

</div>

I know I can statically add some HTML styles inside the Value Format entry and that works,  
But I am having difficulty figuring out how to change the "Value format" dynamically.

Thanks...

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [10 July 2019 17:14 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116/2 "2019-07-10T17:14:09Z")

</div>

What is the problem exactly ? There is not much information here.

The "Value format" by default uses `{{msg.payload}}` as input.

So if you inject a msg.payload with a string "my text" it will update with "my text".

Simplistic example:

```auto
[{"id":"f7212375.975f4","type":"ui_text","z":"681f8bde.8887bc","group":"ac145052.878c48","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":450,"y":675,"wires":[]},{"id":"ee794605.be752","type":"inject","z":"681f8bde.8887bc","name":"","topic":"","payload":"dynamic text 1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":675,"wires":[["f7212375.975f4","638d20a2.025ac"]]},{"id":"1417a8d3.25c157","type":"inject","z":"681f8bde.8887bc","name":"","topic":"","payload":"dynamic text 2","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":725,"wires":[["f7212375.975f4","638d20a2.025ac"]]},{"id":"638d20a2.025ac","type":"debug","z":"681f8bde.8887bc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":470,"y":725,"wires":[]},{"id":"ac145052.878c48","type":"ui_group","z":"","name":"Default","tab":"c80963a7.f1cc98","disp":true,"width":"6","collapse":false},{"id":"c80963a7.f1cc98","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [10 July 2019 18:07 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116/3 "2019-07-10T18:07:57Z")

</div>

So, it's the Format part for the text. Example, dynamically change the text color, etc.

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [10 July 2019 19:16 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116/4 "2019-07-10T19:16:58Z")

</div>

Here is an example:  
In the Value Format Input this works:`<font color =red>{{msg.payload}}</font>`

However, this does **not** work:`<font color ={{msg.color}}>{{msg.payload}}</font>`  
with msg.color = "red";

So, how can I alter the color dynamically?

Thanks!

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [10 July 2019 19:32 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116/5 "2019-07-10T19:32:49Z")

</div>

Have you tried setting outer quotes (in the template) around `{{msg.color}}`?  
In case you’re not too familiar with attributes in HTML tags and the importance of double quotes, take a look at this response I wrote in another topic here: [Material design icons vs font awesome](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/11)

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [10 July 2019 19:37 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116/6 "2019-07-10T19:37:48Z")

</div>

Yes, I did both "{{msg.color}}" and also `msg.color="\"red\""`; Neither works, only the hard coded version seems to work.

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [10 July 2019 19:53 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-value-format-of-ui-text/13116/7 "2019-07-10T19:53:27Z")

</div>

I debugged the issue - the {{msg.color}} will work now. I had a faulty node that did not update correctly which never triggered the update to the ui\_text widget...

Thanks...