# How to set up a toggle button?
**URL:** https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132
**Category:** General
**Created:** [28 July 2023 10:25 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132 "2023-07-28T10:25:03Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Darren](https://discourse.nodered.org/u/Darren)
#### Post date: [28 July 2023 10:25 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/1 "2023-07-28T10:25:03Z")
How do I go about setting up a toggle button? I realise switches toggle, but they get difficult to tell apart when there are any more than 1 next to each other. I want to make a button that toggles between on/off states and changes colour/text/icon for each state. I have tried the following:
- [Dashboard toggle without switch by Ranki](https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777/4); icon changes on click, but if I so much as change the icons in the flow, the switch breaks and becomes unresponsive
- [Pushbutton flow](https://flows.nodered.org/flow/7325d06be6c8a415c877a941172dbc86) - very nice, organised flow that does not work
- [Toggle button from Steve's nodered guide](https://stevesnoderedguide.com/download/start-stop-toggle-button) ([YouTube](https://www.youtube.com/watch?v=ZMzH4yj261A)); recently made, simple flow, but does not seem to work, button is unresponsive
- [These 2 buttons from a school exercise](https://discourse.nodered.org/t/one-button-toggle-to-turn-light-on-and-off/62050/3) toggle state, but do not change appearance and seem quite complex, and are 2x buttons rather than 1
- [This button from a German user](https://discourse.nodered.org/t/create-toggle-switch/9000/7) partially works, toggling state, but does not change appearance:
```auto
[{"id":"29e7d45f.dea00c","type":"change","z":"adb29586.1f2388","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":880,"y":280,"wires":[["38a5d91c.0be77e"]]},{"id":"1b6fe3d1.5580a4","type":"switch","z":"adb29586.1f2388","name":"","property":"toggle-me","propertyType":"flow","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":670,"y":380,"wires":[["8991bf63.f4d578"],["5fec9b00.abd0d4"]]},{"id":"8cddecf3.4a24f","type":"change","z":"adb29586.1f2388","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1100,"y":420,"wires":[["38a5d91c.0be77e"]]},{"id":"1e692860.33a6d","type":"change","z":"adb29586.1f2388","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1100,"y":340,"wires":[["38a5d91c.0be77e"]]},{"id":"dc371121.720208","type":"inject","z":"adb29586.1f2388","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":550,"y":280,"wires":[["29e7d45f.dea00c"]]},{"id":"5fec9b00.abd0d4","type":"change","z":"adb29586.1f2388","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":420,"wires":[["8cddecf3.4a24f"]]},{"id":"8991bf63.f4d578","type":"change","z":"adb29586.1f2388","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":340,"wires":[["1e692860.33a6d"]]},{"id":"38a5d91c.0be77e","type":"ui_text_input","z":"adb29586.1f2388","name":"","label":"","tooltip":"","group":"65a72644.483318","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","x":1340,"y":380,"wires":[[]]},{"id":"9af5b2c6.42c3d","type":"ui_button","z":"adb29586.1f2388","name":"","group":"65a72644.483318","order":1,"width":0,"height":0,"passthru":true,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":550,"y":380,"wires":[["1b6fe3d1.5580a4"]]},{"id":"f40c5c0.c964128","type":"comment","z":"adb29586.1f2388","name":"At startup set default value (false)","info":"","x":900,"y":240,"wires":[]},{"id":"e62c42b2.ed0408","type":"comment","z":"adb29586.1f2388","name":"if flow.state is true set it to false, if flow.state is false set it to true","info":"","x":990,"y":380,"wires":[]},{"id":"65a72644.483318","type":"ui_group","z":"","name":"Virtuelle Taste BidCoS-RF:1","tab":"fe205248.f04ed","disp":true,"width":"6","collapse":false},{"id":"fe205248.f04ed","type":"ui_tab","z":"","name":"Geräte","icon":"dashboard","order":1}]
```
---
### Author:  [@Darren](https://discourse.nodered.org/u/Darren)
#### Post date: [28 July 2023 10:28 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/2 "2023-07-28T10:28:10Z")
It seems the sort of thing that should be simple, but I've only found convoluted flows or flows that don't work. For a button that toggles and shows it's toggled.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [28 July 2023 10:41 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/3 "2023-07-28T10:41:49Z")
Take a look to this thread, maybe you gain some ideas from it.
> [@Fancy buttons updating](https://discourse.nodered.org/t/fancy-buttons-updating/46557/8):
>
> Button with states. The Button Button is dummy. It has no knowledge about what the world is, but it happily takes in commands to be "red" or "blue" and can show what ever label is told to show. Only thing it does know is that it must react when you click on it. The state. The state is property of something. Mostly boolean (day - night) but why not more (morning - day - evening- night) The button with states does not own the state. But represents the state. So it can "blue" when state is "…
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [28 July 2023 11:15 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/4 "2023-07-28T11:15:35Z")
> [@Darren](#):
>
> It seems the sort of thing that should be simple,
Seems very simple to me
e.g.
```auto
[{"id":"8991bf63.f4d578","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"},{"t":"set","p":"toggle_me","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":2440,"wires":[["38a5d91c.0be77e","9af5b2c6.42c3d"]]},{"id":"38a5d91c.0be77e","type":"ui_text_input","z":"b9860b4b9de8c8da","name":"","label":"","tooltip":"","group":"65a72644.483318","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","x":820,"y":2460,"wires":[[]]},{"id":"9af5b2c6.42c3d","type":"ui_button","z":"b9860b4b9de8c8da","name":"","group":"65a72644.483318","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"{{background}}","className":"","icon":"","payload":"toggle_me","payloadType":"flow","topic":"","topicType":"str","x":350,"y":2460,"wires":[["d200931b81ac48f9"]]},{"id":"d200931b81ac48f9","type":"switch","z":"b9860b4b9de8c8da","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":470,"y":2460,"wires":[["8991bf63.f4d578"],["410e817c9d1d4ec6"]]},{"id":"410e817c9d1d4ec6","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"toggle_me","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"background","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":2480,"wires":[["38a5d91c.0be77e","9af5b2c6.42c3d"]]},{"id":"65a72644.483318","type":"ui_group","name":"Virtuelle Taste BidCoS-RF:1","tab":"fe205248.f04ed","order":1,"disp":true,"width":"6","collapse":false},{"id":"fe205248.f04ed","type":"ui_tab","name":"Geräte","icon":"dashboard","order":1}]
```
---
### Author:  [@Darren](https://discourse.nodered.org/u/Darren)
#### Post date: [28 July 2023 11:38 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/5 "2023-07-28T11:38:28Z")
Thank you very much for solving my problem - yours works perfectly, E1cid, and is simple and easy to follow and configure.
I have noticed the same bug present with other node-red toggle buttons sometimes occurs: if I switch FALSE and TRUE around on the change nodes, then the button becomes unresponsive. Hopefully it will work with number messages, as I am broadcasting numbers to control factory windows.
I'll use a variant, something like:
```auto
[
{
"id": "748322ba933431e2",
"type": "change",
"z": "bb527881acb4097c",
"name": "Switch ON",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "false",
"tot": "bool"
},
{
"t": "set",
"p": "toggle_me",
"pt": "flow",
"to": "payload",
"tot": "msg"
},
{
"t": "set",
"p": "background",
"pt": "msg",
"to": "Red",
"tot": "str"
},
{
"t": "set",
"p": "icon",
"pt": "msg",
"to": "open_in_browser",
"tot": "str"
},
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "Open Windows",
"tot": "str"
},
{
"t": "set",
"p": "tooltip",
"pt": "msg",
"to": "Click to open windows",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 470,
"y": 1840,
"wires": [
[
"9b2e25e671f3b8f2",
"c61d0e46da1a5a4f"
]
]
},
{
"id": "9b2e25e671f3b8f2",
"type": "ui_text_input",
"z": "bb527881acb4097c",
"name": "",
"label": "",
"tooltip": "",
"group": "65a72644.483318",
"order": 3,
"width": 0,
"height": 0,
"passthru": true,
"mode": "text",
"delay": 300,
"topic": "",
"sendOnBlur": true,
"className": "",
"topicType": "str",
"x": 640,
"y": 1860,
"wires": [
[
"4192771b9b04007b"
]
]
},
{
"id": "c61d0e46da1a5a4f",
"type": "ui_button",
"z": "bb527881acb4097c",
"name": "",
"group": "65a72644.483318",
"order": 1,
"width": 0,
"height": 0,
"passthru": false,
"label": "{{label}}",
"tooltip": "{{tooltip}}",
"color": "",
"bgcolor": "{{background}}",
"className": "",
"icon": "{{icon}}",
"payload": "toggle_me",
"payloadType": "flow",
"topic": "",
"topicType": "str",
"x": 210,
"y": 1860,
"wires": [
[
"05dccf0103eec66c"
]
]
},
{
"id": "05dccf0103eec66c",
"type": "switch",
"z": "bb527881acb4097c",
"name": "",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "true"
},
{
"t": "else"
}
],
"checkall": "true",
"repair": false,
"outputs": 2,
"x": 330,
"y": 1860,
"wires": [
[
"748322ba933431e2"
],
[
"98ee27c3a3c38e83"
]
]
},
{
"id": "98ee27c3a3c38e83",
"type": "change",
"z": "bb527881acb4097c",
"name": "Switch OFF",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "true",
"tot": "bool"
},
{
"t": "set",
"p": "toggle_me",
"pt": "flow",
"to": "payload",
"tot": "msg"
},
{
"t": "set",
"p": "background",
"pt": "msg",
"to": "Green",
"tot": "str"
},
{
"t": "set",
"p": "icon",
"pt": "msg",
"to": "system_update_alt",
"tot": "str"
},
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "Close Windows",
"tot": "str"
},
{
"t": "set",
"p": "tooltip",
"pt": "msg",
"to": "Click to close windows",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 470,
"y": 1880,
"wires": [
[
"9b2e25e671f3b8f2",
"c61d0e46da1a5a4f"
]
]
},
{
"id": "1656c5b590fe9e63",
"type": "comment",
"z": "bb527881acb4097c",
"name": "Toggle button, src:",
"info": "https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/4\nE1cid, 28/07/2023",
"x": 290,
"y": 1820,
"wires": []
},
{
"id": "96059bb091ae1952",
"type": "inject",
"z": "bb527881acb4097c",
"name": "open",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "true",
"payloadType": "bool",
"x": 210,
"y": 1900,
"wires": [
[
"05dccf0103eec66c"
]
]
},
{
"id": "0cc680f7f0c93235",
"type": "inject",
"z": "bb527881acb4097c",
"name": "close",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "false",
"payloadType": "bool",
"x": 210,
"y": 1940,
"wires": [
[
"05dccf0103eec66c"
]
]
},
{
"id": "4192771b9b04007b",
"type": "debug",
"z": "bb527881acb4097c",
"name": "Window status",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 660,
"y": 1920,
"wires": []
},
{
"id": "65a72644.483318",
"type": "ui_group",
"name": "Virtuelle Taste BidCoS-RF:1",
"tab": "fe205248.f04ed",
"order": 3,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "fe205248.f04ed",
"type": "ui_tab",
"name": "Geräte",
"icon": "dashboard",
"order": 1
}
]
```
---
### Author:  [@Darren](https://discourse.nodered.org/u/Darren)
#### Post date: [28 July 2023 11:57 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/6 "2023-07-28T11:57:35Z")
I noticed that perhaps the bug with the button becoming unresponsive on switching TRUE/FALSE around might be due to outdated cached CSS in the web browser for the nodered webpage - a SHIFT+Reload of the dashboard page, thus forcing a cache clear, got it working again for me.
Again, many thanks to E1cid!
---
### Author:  [@Darren](https://discourse.nodered.org/u/Darren)
#### Post date: [28 July 2023 12:41 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/7 "2023-07-28T12:41:44Z")
I improved the flow to allow more easily configurable output payloads as well as debug control from the nodered backend:
```auto
[
{
"id": "2aab0a5cfbf4b93a",
"type": "change",
"z": "3b105ee9362f5e1f",
"name": "Switch ON",
"rules": [
{
"t": "set",
"p": "toggle_me",
"pt": "flow",
"to": "false",
"tot": "bool"
},
{
"t": "set",
"p": "background",
"pt": "msg",
"to": "Red",
"tot": "str"
},
{
"t": "set",
"p": "icon",
"pt": "msg",
"to": "open_in_browser",
"tot": "str"
},
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "Open Windows",
"tot": "str"
},
{
"t": "set",
"p": "tooltip",
"pt": "msg",
"to": "Click to open windows",
"tot": "str"
},
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "100",
"tot": "num"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1310,
"y": 1500,
"wires": [
[
"d3bbc89a2aa4572b",
"d9f701d09a005a30"
]
]
},
{
"id": "d3bbc89a2aa4572b",
"type": "ui_text_input",
"z": "3b105ee9362f5e1f",
"name": "",
"label": "",
"tooltip": "",
"group": "ea8ce72e44594614",
"order": 4,
"width": 0,
"height": 0,
"passthru": true,
"mode": "text",
"delay": 300,
"topic": "",
"sendOnBlur": true,
"className": "",
"topicType": "str",
"x": 1480,
"y": 1520,
"wires": [
[
"f1456e3ae48ef999"
]
]
},
{
"id": "d9f701d09a005a30",
"type": "ui_button",
"z": "3b105ee9362f5e1f",
"name": "",
"group": "ea8ce72e44594614",
"order": 3,
"width": 0,
"height": 0,
"passthru": false,
"label": "{{label}}",
"tooltip": "{{tooltip}}",
"color": "",
"bgcolor": "{{background}}",
"className": "",
"icon": "{{icon}}",
"payload": "toggle_me",
"payloadType": "flow",
"topic": "",
"topicType": "str",
"x": 1050,
"y": 1520,
"wires": [
[
"39a54ec1bc843ac7"
]
]
},
{
"id": "39a54ec1bc843ac7",
"type": "switch",
"z": "3b105ee9362f5e1f",
"name": "",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "true"
},
{
"t": "else"
}
],
"checkall": "true",
"repair": false,
"outputs": 2,
"x": 1170,
"y": 1520,
"wires": [
[
"2aab0a5cfbf4b93a"
],
[
"222efc0f4031d0d9"
]
]
},
{
"id": "222efc0f4031d0d9",
"type": "change",
"z": "3b105ee9362f5e1f",
"name": "Switch OFF",
"rules": [
{
"t": "set",
"p": "toggle_me",
"pt": "flow",
"to": "true",
"tot": "bool"
},
{
"t": "set",
"p": "background",
"pt": "msg",
"to": "Green",
"tot": "str"
},
{
"t": "set",
"p": "icon",
"pt": "msg",
"to": "system_update_alt",
"tot": "str"
},
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "Close Windows",
"tot": "str"
},
{
"t": "set",
"p": "tooltip",
"pt": "msg",
"to": "Click to close windows",
"tot": "str"
},
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "1",
"tot": "num"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1310,
"y": 1540,
"wires": [
[
"d3bbc89a2aa4572b",
"d9f701d09a005a30"
]
]
},
{
"id": "1737227468d623b2",
"type": "inject",
"z": "3b105ee9362f5e1f",
"name": "open",
"props": [
{
"p": "logic",
"v": "true",
"vt": "bool"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 1050,
"y": 1560,
"wires": [
[
"39a54ec1bc843ac7"
]
]
},
{
"id": "9b26fb2a14514485",
"type": "inject",
"z": "3b105ee9362f5e1f",
"name": "close",
"props": [
{
"p": "logic",
"v": "false",
"vt": "bool"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 1050,
"y": 1600,
"wires": [
[
"39a54ec1bc843ac7"
]
]
},
{
"id": "f1456e3ae48ef999",
"type": "debug",
"z": "3b105ee9362f5e1f",
"name": "Window status",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1500,
"y": 1580,
"wires": []
},
{
"id": "380f6561b3182ef8",
"type": "comment",
"z": "3b105ee9362f5e1f",
"name": "Improved window toggle button",
"info": "Toggle button, src:\nhttps://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/4\nE1cid & Darthagnon, 28/07/2023\n\nConfigurable in Switch ON/Switch OFF:\n- button icons\n- button colours\n- output msg.payload\n\n\nPossible icons:\n\nOpen windows:\nopen_in_browser\nfa-window-restore\n\nClose windows:\nsystem_update_alt\nfa-window-close\ninbox",
"x": 1090,
"y": 1480,
"wires": []
},
{
"id": "ea8ce72e44594614",
"type": "ui_group",
"name": "Factory Windows",
"tab": "7179c13.0628d4",
"order": 6,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "7179c13.0628d4",
"type": "ui_tab",
"name": "Debug",
"icon": "dashboard",
"order": 5,
"disabled": false,
"hidden": false
}
]
```
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [28 July 2023 13:28 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/8 "2023-07-28T13:28:06Z")
Just tried and it has some slight problems. Maybe it's only for me but you can try. If you have more than 1 tab for dashboard and if you switch the tabs and then if you come back to the tab with the button - icons and the label doesn't change any more. It still fires correct payload but the button doesn't change those anyhow.
Not most reliable solution.
And the button of course can't reflect the real world situation cos it made to drive itself. But that's may not be case if it is not requirement.
---
### Author:  [@Darren](https://discourse.nodered.org/u/Darren)
#### Post date: [28 July 2023 13:45 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/9 "2023-07-28T13:45:28Z")
I wonder if that's that CSS refresh situation? Switching tabs changes CSS, but does not refresh page. Full reload makes it work again. Seems like an underlying node-red issue?
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [28 July 2023 13:47 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/10 "2023-07-28T13:47:51Z")
> [@hotNipi](#):
>
> And the button of course can't reflect the real world situation cos it made to drive itself. But that's may not be case if it is not requirement.
Yes it can if you feed the real world value into the flow after the button
see example.
The issue you have highlighted seems to be a bug with dashboard button as the background colour changes but not label, unless you refresh the page. Might be worth raising an issue.
@Darren in example added a way to change the values i.e false, true or 1, 100. Just edit change node that sets msg.values.
```auto
[{"id":"a62d971593d371ba","type":"ui_button","z":"b9860b4b9de8c8da","name":"button one","group":"b9baaa26cb58043a","order":1,"width":0,"height":0,"passthru":false,"label":"{{label}}","tooltip":"{{tooltip}}","color":"","bgcolor":"{{background}}","className":"","icon":"{{icon}}","payload":"toggle_me","payloadType":"flow","topic":"","topicType":"str","x":350,"y":2380,"wires":[["b55fbcbde4804f18"]]},{"id":"754647e1d3d2d518","type":"change","z":"b9860b4b9de8c8da","name":"Switch ON","rules":[{"t":"set","p":"payload","pt":"msg","to":"values.off","tot":"msg"},{"t":"set","p":"toggle_me","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"background","pt":"msg","to":"Red","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"open_in_browser","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"Open Windows","tot":"str"},{"t":"set","p":"tooltip","pt":"msg","to":"Click to open windows","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":2280,"wires":[["a62d971593d371ba","4029bfef97726be7","7869f9213316186e"]]},{"id":"54c4d4d32b5b2883","type":"change","z":"b9860b4b9de8c8da","name":"Switch OFF","rules":[{"t":"set","p":"payload","pt":"msg","to":"values.on","tot":"msg"},{"t":"set","p":"toggle_me","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"background","pt":"msg","to":"Green","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"system_update_alt","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"Close Windows","tot":"str"},{"t":"set","p":"tooltip","pt":"msg","to":"Click to close windows","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":2480,"wires":[["a62d971593d371ba","4029bfef97726be7","7869f9213316186e"]]},{"id":"b55fbcbde4804f18","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"values","pt":"msg","to":"button.one","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":2380,"wires":[["27d07fcbbddee1a1"]]},{"id":"27d07fcbbddee1a1","type":"switch","z":"b9860b4b9de8c8da","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"values.on","vt":"msg"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":670,"y":2380,"wires":[["754647e1d3d2d518"],["54c4d4d32b5b2883"]]},{"id":"4029bfef97726be7","type":"ui_text_input","z":"b9860b4b9de8c8da","name":"","label":"","tooltip":"","group":"b9baaa26cb58043a","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","sendOnBlur":true,"className":"","topicType":"str","x":840,"y":2380,"wires":[[]]},{"id":"7869f9213316186e","type":"debug","z":"b9860b4b9de8c8da","name":"debug 324","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":850,"y":2320,"wires":[]},{"id":"dc8536bc764b4e05","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$flowContext(\"button.one\").*[$ != $$.payload]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":2540,"wires":[["b55fbcbde4804f18"]]},{"id":"2d181930a5325352","type":"ui_button","z":"b9860b4b9de8c8da","name":"","group":"b9baaa26cb58043a","order":2,"width":0,"height":0,"passthru":false,"label":"1","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":2520,"wires":[["dc8536bc764b4e05"]]},{"id":"5f87df6ba54ca19b","type":"ui_button","z":"b9860b4b9de8c8da","name":"","group":"b9baaa26cb58043a","order":3,"width":0,"height":0,"passthru":false,"label":"100","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"100","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":2580,"wires":[["dc8536bc764b4e05"]]},{"id":"d0031228b2fb4651","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":400,"y":2620,"wires":[["2a9b534d4cfbcaf2"]]},{"id":"2a9b534d4cfbcaf2","type":"change","z":"b9860b4b9de8c8da","name":"set button 1 values","rules":[{"t":"set","p":"button.one","pt":"flow","to":"{\"off\":1, \"on\": 100}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":2620,"wires":[[]]},{"id":"b9baaa26cb58043a","type":"ui_group","name":"Virtuelle Taste BidCoS-RF:1","tab":"fe205248.f04ed","order":3,"disp":true,"width":"6","collapse":false,"className":""},{"id":"fe205248.f04ed","type":"ui_tab","name":"Geräte","icon":"dashboard","order":1}]
```
[edit] fixed reversed real world values by reversing them
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [28 July 2023 15:29 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/11 "2023-07-28T15:29:59Z")
> [@E1cid](#):
>
> The issue you have highlighted seems to be a bug with dashboard button
It can't happen if:
button is driven by real world situation and ui\_control node is involved to refresh button states in case of tab changes / page reload / socket connects
Nothing related to CSS for sure.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [28 July 2023 16:08 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/12 "2023-07-28T16:08:21Z")
> [@hotNipi](#):
>
> It can't happen if:
> button is driven by real world situation and ui\_control node is involved to refresh button states in case of tab changes / page reload / socket connects
>
> Nothing related to CSS for sure.
It also can't happen when driven by itself and you use ui-control to reload on opening tab.
Even when driven by real world input the issue happens.
e.g.
```auto
[{"id":"1bb490b83ea31a72","type":"ui_text_input","z":"1aec8b4fbf3e71df","name":"","label":"","tooltip":"","group":"8b5cde76.edd58","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","sendOnBlur":true,"className":"","topicType":"str","x":500,"y":220,"wires":[[]]},{"id":"a94fc2842bdc30a1","type":"ui_button","z":"1aec8b4fbf3e71df","name":"","group":"8b5cde76.edd58","order":1,"width":0,"height":0,"passthru":true,"label":"{{label}}","tooltip":"","color":"","bgcolor":"{{background}}","className":"","icon":"{{icon}}","payload":"toggle_me","payloadType":"flow","topic":"","topicType":"str","x":270,"y":220,"wires":[["1bb490b83ea31a72"]]},{"id":"ef09ff579e5b964b","type":"ui_button","z":"1aec8b4fbf3e71df","name":"false","group":"8b5cde76.edd58","order":0,"width":0,"height":0,"passthru":false,"label":"false","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"false","payloadType":"bool","topic":"topic","topicType":"msg","x":250,"y":300,"wires":[["997e6b65eb11bbbe"]]},{"id":"8f48faac0c8cf43f","type":"ui_button","z":"1aec8b4fbf3e71df","name":"true","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"passthru":false,"label":"true","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":250,"y":340,"wires":[["4721aa82214536e0"]]},{"id":"997e6b65eb11bbbe","type":"change","z":"1aec8b4fbf3e71df","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"open window","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"open_in_browser","tot":"str"},{"t":"set","p":"real","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["a94fc2842bdc30a1"]]},{"id":"4721aa82214536e0","type":"change","z":"1aec8b4fbf3e71df","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"close window","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"close_in_browser","tot":"str"},{"t":"set","p":"real","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":340,"wires":[["a94fc2842bdc30a1"]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```
Never said it was CSS related, just said it may be a bug as the background changes but not icon and label, which seem strange.
[edit] The issue does not happen if you remove the tool tip message and {{msg.tooltip}}
e.g.
```auto
[{"id":"0523a18a656e3643","type":"switch","z":"1aec8b4fbf3e71df","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":390,"y":220,"wires":[["54555e81ee83b983"],["d31222ae448735fc"]]},{"id":"3964b080f9d33cb2","type":"ui_button","z":"1aec8b4fbf3e71df","name":"","group":"1ed15b1f3efebbf1","order":1,"width":"0","height":"0","passthru":false,"label":"{{msg.label}}","tooltip":"","color":"","bgcolor":"{{background}}","className":"","icon":"{{msg.icon}}","payload":"toggle_me","payloadType":"flow","topic":"","topicType":"str","x":210,"y":220,"wires":[["0523a18a656e3643"]]},{"id":"54555e81ee83b983","type":"change","z":"1aec8b4fbf3e71df","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"},{"t":"set","p":"toggle_me","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"system_update_alt","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"close window","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":200,"wires":[["3964b080f9d33cb2","62c9a3427bb1fb1e"]]},{"id":"d31222ae448735fc","type":"change","z":"1aec8b4fbf3e71df","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"toggle_me","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"background","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"open_in_browser","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"open window","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":240,"wires":[["3964b080f9d33cb2","62c9a3427bb1fb1e"]]},{"id":"62c9a3427bb1fb1e","type":"ui_text_input","z":"1aec8b4fbf3e71df","name":"","label":"","tooltip":"","group":"1ed15b1f3efebbf1","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","sendOnBlur":true,"className":"","topicType":"str","x":740,"y":220,"wires":[[]]},{"id":"1ed15b1f3efebbf1","type":"ui_group","name":"Virtuelle Taste BidCoS-RF:1","tab":"fe205248.f04ed","order":1,"disp":true,"width":"6","collapse":false},{"id":"fe205248.f04ed","type":"ui_tab","name":"Geräte","icon":"dashboard","order":1}]
```
---
### Author:  [@Darren](https://discourse.nodered.org/u/Darren)
#### Post date: [31 July 2023 13:32 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/13 "2023-07-31T13:32:43Z")
After experimentation, I found that making sure all references in the button to variables were e.g. `{{msg.background}}` instead of `{{background}}`, it seemed to make the button work even after switching tabs.
Reason I mention CSS is usually when I'm developing websites, if something is borked similar to this, it's usually because the browser is still serving the locally cached CSS rather than my fixed version.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 August 2023 13:32 UTC](https://discourse.nodered.org/t/how-to-set-up-a-toggle-button/80132/14 "2023-08-14T13:32:50Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.