# Dashboard 2 text node value format

**URL:** <https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 April 2025 09:05 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494 "2025-04-09T09:05:20Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Surefire01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/surefire01/32/71490_2.png) [@Surefire01](https://discourse.nodered.org/u/Surefire01)\
**Post date:** [9 April 2025 09:05 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/1 "2025-04-09T09:05:20Z")

</div>

Hi Chaps.  
Attempting to swap my heating automation control over to dashboard 2 and it's going quite well. one sticking point is that in the old text node (in Dashboard 1) you could format the displayed text by putting something like this in the value format field: {{msg.payload}}   
However dashboard 2's text node doesn't have an entry box for Value Format. Is there any way I could achieve displayed text manipulation in Dashboard 2 similar to dashboard 1?  
Thanks.

---

<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:** [9 April 2025 09:19 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/2 "2025-04-09T09:19:14Z")

</div>

Use a change node with JSONata or a function node before the widget to format your value.

If it comes from a different property, be sure to move it or set it to `msg.payload` as thats typically where the widget reads its input value from

`your data --> change node (format value, set in msg.payload) --> text node`

---

<div class="post-metadata">

**Author:** ![Surefire01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/surefire01/32/71490_2.png) [@Surefire01](https://discourse.nodered.org/u/Surefire01)\
**Post date:** [9 April 2025 09:52 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/3 "2025-04-09T09:52:15Z")

</div>

Sorry, forgot to mention that I have a function node before the text node with this code in it (as used in my dashboard 1 version):

```auto
switch (msg.payload) {

case true : 
    msg.color = "Red";
    msg.payload = "On";
    break;
    
case false : 
    msg.color = "Green";
    msg.payload = "Off";
    break;
    
//default : 
    //msg.color = "Gray";
    //msg.payload = "not set";
    //break;
}

return msg;

```

This seemed to work ok in dashboard 1 but not in dashboard 2. Interestingly the dashboard 2 display shows the message changing from ON to Off, but the colour remains the same all the time i.e. it doesn't go red or green just stays white.

Thanks.

---

<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:** [9 April 2025 10:00 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/4 "2025-04-09T10:00:55Z")

</div>

> [@Surefire01](#):
>
> ```auto
> msg.color = "Red";
> 
> ```

This will have no effect on dashboard 2.

You can set updates according to [the documentation](https://dashboard.flowfuse.com/nodes/widgets/ui-text.html#dynamic-properties)

e.g. `msg.ui_update = { color: "red" }`

---

<div class="post-metadata">

**Author:** ![Surefire01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/surefire01/32/71490_2.png) [@Surefire01](https://discourse.nodered.org/u/Surefire01)\
**Post date:** [9 April 2025 10:07 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/5 "2025-04-09T10:07:38Z")

</div>

Ahh that makes sense of why it doesn't work in Dashboard 2.

Thanks

---

<div class="post-metadata">

**Author:** ![Surefire01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/surefire01/32/71490_2.png) [@Surefire01](https://discourse.nodered.org/u/Surefire01)\
**Post date:** [9 April 2025 10:41 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/6 "2025-04-09T10:41:45Z")

</div>

Something like this then in the function node?

```auto
switch (msg.payload) {

case true : 
    msg.ui_update = { color: "red"};
    msg.payload = "On";
    break;
    
case false : 
    msg.ui_update = { color: "green" };
    msg.payload = "Off";
    break;
    
default : 
    msg.ui_update = { color: "grey" };
    msg.payload = "not set";
    break;
}

return msg;

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [9 April 2025 15:14 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/7 "2025-04-09T15:14:10Z")

</div>

Ok, but I have this ui-text v1 ...

 ![temp](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/50d0c2899ea15f87ccf9d211eb32bf2e15e39aa9.png)

and I would like to have the same layout in v2 but I can't do better than this ...

![tempv2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6330d0b24ac3d61dfdf3b94ba2ba22a203c3357.png)

This is the function ..

```auto
const output = [null];

const pay = msg.payload.toFixed(1); //17.6
const lab = msg.label; //TEMP. INT.
output[0] = { payload: pay, ui_update: { label: lab, font: 'Verdana', fontSize: '26', color: '#FFFFFF' } };

return output;

```

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 April 2025 15:21 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/8 "2025-04-09T15:21:19Z")

</div>

> [@Giamma](#):
>
> `fontSize: '26',`

Your fontSize does not include units.

From the help:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7401c6f13f64dae3b421dfb716c0cfcfea23538a.png)

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [9 April 2025 15:27 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/9 "2025-04-09T15:27:39Z")

</div>

Ok, but with a css....,  
I can't format payload like the label into the function?

---

<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:** [9 April 2025 15:34 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/10 "2025-04-09T15:34:12Z")

</div>

If you want to affect the styles like this, you could greatly simplify it by adding CSS styles that target the label and value. Then you just set the class name.

e.g

![chrome_c57owxxHbe](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3dc713c19f177bfd0109cc367b5157b6d8c1a918.gif)

```auto
[{"id":"70ab4a0894a53772","type":"ui-text","z":"8291603bf42d38e4","group":"9486dd9bf5ff5d52","order":1,"width":"2","height":"2","name":"","label":"Temperature","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"temperate-text","x":1590,"y":200,"wires":[]},{"id":"01c890fedd7949c7","type":"inject","z":"8291603bf42d38e4","name":"","props":[{"p":"payload"},{"p":"ui_update.class","v":"temperate-text cold","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":1350,"y":180,"wires":[["70ab4a0894a53772"]]},{"id":"6925fb0167c825f4","type":"inject","z":"8291603bf42d38e4","name":"","props":[{"p":"payload"},{"p":"ui_update.class","v":"temperate-text hot","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"35","payloadType":"num","x":1350,"y":260,"wires":[["70ab4a0894a53772"]]},{"id":"ae26a40f39e0b0db","type":"ui-template","z":"8291603bf42d38e4","group":"","page":"","ui":"72c1e5a9ec204878","name":"","order":0,"width":0,"height":0,"head":"","format":".temperate-text .nrdb-ui-text {\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.temperate-text .nrdb-ui-text > label {\n font-size: 16px;\n}\n.temperate-text .nrdb-ui-text > span {\n color: black;\n font-size: 26px;\n}\n\n.temperate-text.cold .nrdb-ui-text>span {\n color: blue;\n}\n.temperate-text.hot .nrdb-ui-text>span {\n color: red;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":1580,"y":160,"wires":[[]]},{"id":"3f6ffddf18874c33","type":"inject","z":"8291603bf42d38e4","name":"","props":[{"p":"payload"},{"p":"ui_update.class","v":"temperate-text","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"20","payloadType":"num","x":1350,"y":220,"wires":[["70ab4a0894a53772"]]},{"id":"9486dd9bf5ff5d52","type":"ui-group","name":"Group Name","page":"8565d0287b18d0e8","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"72c1e5a9ec204878","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"8565d0287b18d0e8","type":"ui-page","name":"Text","ui":"72c1e5a9ec204878","path":"/text2","icon":"home","layout":"grid","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [9 April 2025 15:47 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/11 "2025-04-09T15:47:38Z")

</div>

Thank you ....

![newtemp2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/161532abe4fec027eb296b8add2cada43430bb8e.png)

---

<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:** [9 May 2025 15:47 UTC](https://discourse.nodered.org/t/dashboard-2-text-node-value-format/96494/12 "2025-05-09T15:47:43Z")

</div>

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