# Dashboard 2.0 text color
**URL:** https://discourse.nodered.org/t/dashboard-2-0-text-color/90375
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [23 August 2024 16:48 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375 "2024-08-23T16:48:57Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@nodouser](https://discourse.nodered.org/u/nodouser)
#### Post date: [23 August 2024 16:48 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/1 "2024-08-23T16:48:57Z")
Hello,
Is there a way to make the text of the status green when online, red when offline?
The trigger node send On or Off line,
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [23 August 2024 16:59 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/2 "2024-08-23T16:59:49Z")
Try sending `msg.ui_update.color = "red"` to the text widget.
Docs: [Text ui-text | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-text.html#dynamic-properties)
---
### Author:  [@nodouser](https://discourse.nodered.org/u/nodouser)
#### Post date: [23 August 2024 17:15 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/3 "2024-08-23T17:15:54Z")
Thanks for your support!
Where of how should I place this in the flow? This is new to me.
Behind the trigger node i guess.
After the trigger Online should been **green** , and OFFline **red**
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [23 August 2024 19:09 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/4 "2024-08-23T19:09:09Z")
Switch node to check online/offline --\> followed by change nodes that set the property to the desired colour --\> text widget
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [23 August 2024 19:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/5 "2024-08-23T19:30:32Z")
> [@Steve-Mcl](#):
>
> Switch node to check online/offline
The trigger node can have two outputs, so no need for switch node.
You also have to check `apply style`.
The only issue I see is msg.ui\_update.color will affect all text in the text node, not just `offline/online` the title `status` will change to.
[edit]
Example two outputs on trigger node.
```auto
[{"id":"afdc199a57eca001","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":280,"y":100,"wires":[["6a222a2c0d88d886"]]},{"id":"6a222a2c0d88d886","type":"trigger","z":"d1395164b4eec73e","name":"","op1":"online","op2":"offline","op1type":"str","op2type":"str","duration":"10","extend":true,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":450,"y":100,"wires":[["a5ce3b7792b9530c"],["6807057c1fa30dc8"]]},{"id":"a5ce3b7792b9530c","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"ui_update.color","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":80,"wires":[["e9bace5f900290fe"]]},{"id":"6807057c1fa30dc8","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"ui_update.color","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":120,"wires":[["e9bace5f900290fe"]]},{"id":"e9bace5f900290fe","type":"ui-text","z":"d1395164b4eec73e","group":"b429518aee48a6fb","order":1,"width":0,"height":0,"name":"","label":"Status","format":"{{msg.payload}}","layout":"col-center","style":true,"font":"","fontSize":16,"color":"#000000","className":"","x":870,"y":100,"wires":[]},{"id":"b429518aee48a6fb","type":"ui-group","name":"Chart Examples","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts","ui":"1805777f90e92057","path":"/charts","icon":"home","layout":"notebook","theme":"5075a7d8e4947586","order":3,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":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"}}]
```
---
### Author:  [@nodouser](https://discourse.nodered.org/u/nodouser)
#### Post date: [23 August 2024 19:41 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/6 "2024-08-23T19:41:36Z")
Maybe you can help me on the right way? I can't get it to work. This is also new to me.
This is what i have. The color of the text does not change.
```auto
[
{
"id": "162334d1df967473",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "aca4b0bec15a08d1",
"type": "switch",
"z": "162334d1df967473",
"name": "IDX Temp",
"property": "payload.idx",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "5257",
"vt": "num"
}
],
"checkall": "true",
"repair": false,
"outputs": 1,
"x": 300,
"y": 100,
"wires": [
[
"7e1b9a257df7d474",
"3e886ce4e57a5fb4",
"2e4cde816b54d548"
]
]
},
{
"id": "7e1b9a257df7d474",
"type": "function",
"z": "162334d1df967473",
"name": "Battery",
"func": "// Set msg.payload to msg.payload.nvalue\nmsg.payload = msg.payload.Battery;\n\n// Return the modified message\nreturn msg;",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 580,
"y": 80,
"wires": [
[
"0999bbd5a971bf4f"
]
]
},
{
"id": "0999bbd5a971bf4f",
"type": "ui-gauge",
"z": "162334d1df967473",
"name": "Hal beneden batterij",
"group": "56f1346a9aebbaab",
"order": 2,
"width": "2",
"height": "2",
"gtype": "gauge-half",
"gstyle": "needle",
"title": "Hal beneden batterij",
"units": "",
"icon": "",
"prefix": "",
"suffix": "",
"segments": [
{
"from": "10",
"color": "#ff0000"
},
{
"from": "20",
"color": "#ff8040"
},
{
"from": "30",
"color": "#00ff00"
}
],
"min": "10",
"max": "100",
"sizeThickness": 16,
"sizeGap": 4,
"sizeKeyThickness": 8,
"styleRounded": true,
"styleGlow": false,
"className": "",
"x": 1240,
"y": 80,
"wires": []
},
{
"id": "953603824d0666f5",
"type": "ui-text-input",
"z": "162334d1df967473",
"group": "56f1346a9aebbaab",
"name": "Hal beneden update",
"label": "Laatste update",
"order": 3,
"width": "2",
"height": "1",
"topic": "topic",
"topicType": "msg",
"mode": "text",
"tooltip": "",
"delay": 300,
"passthru": false,
"sendOnDelay": false,
"sendOnBlur": false,
"sendOnEnter": false,
"className": "",
"clearable": false,
"sendOnClear": false,
"icon": "",
"iconPosition": "left",
"iconInnerPosition": "inside",
"x": 1240,
"y": 120,
"wires": [
[]
]
},
{
"id": "3e886ce4e57a5fb4",
"type": "function",
"z": "162334d1df967473",
"name": "LastUpdate",
"func": "// Set msg.payload to msg.payload.nvalue\nmsg.payload = msg.payload.LastUpdate;\n\n// Return the modified message\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 590,
"y": 120,
"wires": [
[
"953603824d0666f5"
]
]
},
{
"id": "2e4cde816b54d548",
"type": "trigger",
"z": "162334d1df967473",
"name": "",
"op1": "Online",
"op2": "Offline",
"op1type": "str",
"op2type": "str",
"duration": "60",
"extend": true,
"overrideDelay": false,
"units": "min",
"reset": "",
"bytopic": "all",
"topic": "topic",
"outputs": 1,
"x": 590,
"y": 160,
"wires": [
[
"4515bea65d375473",
"7ca4e5cc22970087"
]
]
},
{
"id": "4515bea65d375473",
"type": "ui-text-input",
"z": "162334d1df967473",
"group": "56f1346a9aebbaab",
"name": "Status",
"label": "Status",
"order": 4,
"width": "2",
"height": "1",
"topic": "topic",
"topicType": "msg",
"mode": "text",
"tooltip": "",
"delay": 300,
"passthru": true,
"sendOnDelay": false,
"sendOnBlur": true,
"sendOnEnter": true,
"className": "",
"clearable": false,
"sendOnClear": false,
"icon": "",
"iconPosition": "left",
"iconInnerPosition": "inside",
"x": 1190,
"y": 160,
"wires": [
[]
]
},
{
"id": "7ca4e5cc22970087",
"type": "switch",
"z": "162334d1df967473",
"name": "",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "Online",
"vt": "str"
},
{
"t": "eq",
"v": "Offline",
"vt": "str"
}
],
"checkall": "true",
"repair": false,
"outputs": 2,
"x": 710,
"y": 240,
"wires": [
[
"0e01b670533515eb"
],
[
"a22a690800999224",
"1f9638cd36d86a37"
]
]
},
{
"id": "a22a690800999224",
"type": "change",
"z": "162334d1df967473",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.color",
"pt": "msg",
"to": "\"red\"",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 930,
"y": 260,
"wires": [
[
"4515bea65d375473",
"991ef8eab62e28d8"
]
]
},
{
"id": "6982f21f086a82d2",
"type": "inject",
"z": "162334d1df967473",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Online",
"payloadType": "str",
"x": 350,
"y": 220,
"wires": [
[
"2e4cde816b54d548",
"7ca4e5cc22970087"
]
]
},
{
"id": "ca27728f3e5b4ec1",
"type": "inject",
"z": "162334d1df967473",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Offline",
"payloadType": "str",
"x": 350,
"y": 260,
"wires": [
[
"7ca4e5cc22970087"
]
]
},
{
"id": "0e01b670533515eb",
"type": "change",
"z": "162334d1df967473",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.color",
"pt": "msg",
"to": "\"green\"",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 930,
"y": 220,
"wires": [
[
"4515bea65d375473",
"991ef8eab62e28d8"
]
]
},
{
"id": "991ef8eab62e28d8",
"type": "debug",
"z": "162334d1df967473",
"name": "color",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "ui_update.color",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1230,
"y": 240,
"wires": []
},
{
"id": "1f9638cd36d86a37",
"type": "debug",
"z": "162334d1df967473",
"name": "switch node",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 890,
"y": 300,
"wires": []
},
{
"id": "56f1346a9aebbaab",
"type": "ui-group",
"name": "Hal beneden",
"page": "2c8dbd8f4d392b7b",
"width": "2",
"height": "3",
"order": 2,
"showTitle": false,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "2c8dbd8f4d392b7b",
"type": "ui-page",
"name": "Status temperatuur Sensoren ",
"ui": "07d9e68410f8668f",
"path": "/TempSensoren",
"icon": "home",
"layout": "grid",
"theme": "58232a5d443a2893",
"order": 1,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "07d9e68410f8668f",
"type": "ui-base",
"name": "Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": true,
"navigationStyle": "fixed",
"titleBarStyle": "fixed"
},
{
"id": "58232a5d443a2893",
"type": "ui-theme",
"name": "Theme MMMM",
"colors": {
"surface": "#242424",
"primary": "#0094ce",
"bgPage": "#535353",
"groupBg": "#d3d3d3",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "default"
}
}
]
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [23 August 2024 21:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/7 "2024-08-23T21:24:15Z")
> [@nodouser](#):
>
> `"to": "\"red\"",`
Don't put quotes on string fields. It's `red` not `"red"`
---
### Author:  [@nodouser](https://discourse.nodered.org/u/nodouser)
#### Post date: [23 August 2024 21:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/8 "2024-08-23T21:30:01Z")
I think there is something else wrong,
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [23 August 2024 21:37 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/9 "2024-08-23T21:37:48Z")
Add another line above that sets `ui_update` to `JSON` `{ }`
Also, green should be a string NOT JSONata (change the `J:` to str)
---
### Author:  [@nodouser](https://discourse.nodered.org/u/nodouser)
#### Post date: [23 August 2024 21:58 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/10 "2024-08-23T21:58:54Z")
Can you make an example for me? I don't have much experience with this.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 September 2024 21:59 UTC](https://discourse.nodered.org/t/dashboard-2-0-text-color/90375/11 "2024-09-22T21:59:07Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.