# Dashboard toggle button without switch

**URL:** <https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777>\
**Category:** Dashboard\
**Created:** [17 May 2021 11:23 UTC](https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777 "2021-05-17T11:23:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [17 May 2021 11:23 UTC](https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777/1 "2021-05-17T11:23:35Z")

</div>

Hello together,

I am trying to build in a button into my dashboard, which should:  
... show a status (1 of 3 different possibles) with the according icon.  
... provide the possibility to toggle the status and provide a dynamic output (e.g. based on the currently showed icon).

I would use the switch button, but this does not work, because I want to influence the icon with the input as I have to differentiate three different types of it (weekend, home, public).

So the output (button pressed) should contain the current status, which does not work as I can only specify a static topic and a static value.

I think I will be able to handle this with a context variable to save the current status/icon, but does anyone has a clue how to build the toggle w/o context variable? If not, I will do it of course with the context variable, but just want to ask, if anyone had the same issue in the past.

I attached the beginning of my ideas with the button and the different input:

```auto
[
    {
        "id": "2f8a5b8b.3b3d84",
        "type": "ui_button",
        "z": "4e44f1f8.f25318",
        "name": "Ranki",
        "group": "966d0c6c.5b7048",
        "order": 8,
        "width": "1",
        "height": "1",
        "passthru": false,
        "label": "",
        "tooltip": "{{tooltip}}",
        "color": " #0079F2",
        "bgcolor": "#FFFFFF",
        "icon": "{{myicon}}",
        "payload": "true",
        "payloadType": "bool",
        "topic": "Button pressed",
        "x": 2430,
        "y": 640,
        "wires": [
            [
                "7e916ace.8d13a4"
            ]
        ]
    },
    {
        "id": "3cc7c581.af95da",
        "type": "inject",
        "z": "4e44f1f8.f25318",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 2080,
        "y": 600,
        "wires": [
            [
                "544dcc8e.4abdb4"
            ]
        ]
    },
    {
        "id": "544dcc8e.4abdb4",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "Ranki Home",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            },
            {
                "t": "set",
                "p": "myicon",
                "pt": "msg",
                "to": "home",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "tooltip",
                "pt": "msg",
                "to": "Ranki@Home",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2250,
        "y": 600,
        "wires": [
            [
                "2f8a5b8b.3b3d84"
            ]
        ]
    },
    {
        "id": "f8e9468d.7d8b88",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "Ranki Base",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            },
            {
                "t": "set",
                "p": "myicon",
                "pt": "msg",
                "to": "weekend",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "tooltip",
                "pt": "msg",
                "to": "Ranki@Base",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2250,
        "y": 640,
        "wires": [
            [
                "2f8a5b8b.3b3d84"
            ]
        ]
    },
    {
        "id": "d91ccfae.ecd93",
        "type": "inject",
        "z": "4e44f1f8.f25318",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 2080,
        "y": 640,
        "wires": [
            [
                "f8e9468d.7d8b88"
            ]
        ]
    },
    {
        "id": "7d223aba.322464",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "Ranki away",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            },
            {
                "t": "set",
                "p": "myicon",
                "pt": "msg",
                "to": "public",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "tooltip",
                "pt": "msg",
                "to": "Ranki away",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2250,
        "y": 680,
        "wires": [
            [
                "2f8a5b8b.3b3d84"
            ]
        ]
    },
    {
        "id": "43957dd0.142034",
        "type": "inject",
        "z": "4e44f1f8.f25318",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 2080,
        "y": 680,
        "wires": [
            [
                "7d223aba.322464"
            ]
        ]
    },
    {
        "id": "7e916ace.8d13a4",
        "type": "debug",
        "z": "4e44f1f8.f25318",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "true",
        "x": 2570,
        "y": 640,
        "wires": []
    },
    {
        "id": "966d0c6c.5b7048",
        "type": "ui_group",
        "name": "Uhrzeit",
        "tab": "14d26b61.40ec4d",
        "order": 1,
        "disp": false,
        "width": "6",
        "collapse": false
    },
    {
        "id": "14d26b61.40ec4d",
        "type": "ui_tab",
        "name": "Smart Boot",
        "icon": "fa-anchor",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

Cheers  
Ranki

---

<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:** [17 May 2021 11:32 UTC](https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777/2 "2021-05-17T11:32:33Z")

</div>

Hi.

You might be better doing this in a template node rather than maintain state in context at server side.

This rather larger demo I did for another user might provide some cues. In particular the mute button that toggles icon. You could use the same design patter to create a 3 state button.

See [this thread](https://discourse.nodered.org/t/adding-output-function-to-buttons-designed-in-template-node/25591/54).

---

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [17 May 2021 12:52 UTC](https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777/3 "2021-05-17T12:52:31Z")

</div>

Hi @Steve-Mcl,

I am currently using a template node, but I wanted to make it "smaller" with just one element 🙃; I'll check your solution out and see, what I will implement. Thank you!

Cheers  
Ranki

---

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [17 May 2021 14:20 UTC](https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777/4 "2021-05-17T14:20:51Z")

</div>

Hello together,

I did it now with a context variable (flow), which is quite easy (see attached flow), but it would be great, if the dashboard-button could save any kind of information (maybe defined with `{{status}}`, which will be handed over to it's outgoing payload, if the button is pressed.

**My way now:**  
I save the icon sent in the context «flow.icon». The change after the button gets the flow.icon and adds it to the msg.

Afterwards I differentiate the output of the button with a switch to set another button stage. 🙂

 ![2021-05-17 16_09_38-Node-RED_ToogleButton](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0dfa3cd61c6ea3626f7146438789194d10081583.png)

Cheers  
Ranki

```auto
[
    {
        "id": "2f8a5b8b.3b3d84",
        "type": "ui_button",
        "z": "4e44f1f8.f25318",
        "name": "toggle button",
        "group": "966d0c6c.5b7048",
        "order": 8,
        "width": "1",
        "height": "1",
        "passthru": false,
        "label": "",
        "tooltip": "{{tooltip}}",
        "color": " #0079F2",
        "bgcolor": "#FFFFFF",
        "icon": "{{myicon}}",
        "payload": "true",
        "payloadType": "bool",
        "topic": "toggle_button",
        "x": 2470,
        "y": 660,
        "wires": [
            [
                "7247a753.fc5448"
            ]
        ]
    },
    {
        "id": "3cc7c581.af95da",
        "type": "inject",
        "z": "4e44f1f8.f25318",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 2080,
        "y": 600,
        "wires": [
            [
                "544dcc8e.4abdb4"
            ]
        ]
    },
    {
        "id": "544dcc8e.4abdb4",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "myicon: home",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            },
            {
                "t": "set",
                "p": "myicon",
                "pt": "msg",
                "to": "home",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "tooltip",
                "pt": "msg",
                "to": "Ranki@Home",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2260,
        "y": 600,
        "wires": [
            [
                "2f8a5b8b.3b3d84",
                "659d26a2.07bf08"
            ]
        ]
    },
    {
        "id": "f8e9468d.7d8b88",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "myicon: weekend",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            },
            {
                "t": "set",
                "p": "myicon",
                "pt": "msg",
                "to": "weekend",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "tooltip",
                "pt": "msg",
                "to": "Ranki@Base",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2270,
        "y": 640,
        "wires": [
            [
                "2f8a5b8b.3b3d84",
                "659d26a2.07bf08"
            ]
        ]
    },
    {
        "id": "d91ccfae.ecd93",
        "type": "inject",
        "z": "4e44f1f8.f25318",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 2080,
        "y": 640,
        "wires": [
            [
                "f8e9468d.7d8b88"
            ]
        ]
    },
    {
        "id": "7d223aba.322464",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "myicon: public",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            },
            {
                "t": "set",
                "p": "myicon",
                "pt": "msg",
                "to": "public",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "tooltip",
                "pt": "msg",
                "to": "Ranki away",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2260,
        "y": 680,
        "wires": [
            [
                "2f8a5b8b.3b3d84",
                "659d26a2.07bf08"
            ]
        ]
    },
    {
        "id": "43957dd0.142034",
        "type": "inject",
        "z": "4e44f1f8.f25318",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 2070,
        "y": 680,
        "wires": [
            [
                "7d223aba.322464"
            ]
        ]
    },
    {
        "id": "7e916ace.8d13a4",
        "type": "debug",
        "z": "4e44f1f8.f25318",
        "name": "home => weekend",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 3130,
        "y": 620,
        "wires": []
    },
    {
        "id": "659d26a2.07bf08",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "icon",
                "pt": "flow",
                "to": "myicon",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2480,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "18f024a5.805b3b",
        "type": "switch",
        "z": "4e44f1f8.f25318",
        "name": "switch(myicon)",
        "property": "myicon",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "home",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "weekend",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "public",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 3,
        "x": 2900,
        "y": 660,
        "wires": [
            [
                "7e916ace.8d13a4",
                "f8e9468d.7d8b88"
            ],
            [
                "6dd47d3c.52b6c4",
                "7d223aba.322464"
            ],
            [
                "fcbe0b43.74aa08",
                "544dcc8e.4abdb4"
            ]
        ]
    },
    {
        "id": "6dd47d3c.52b6c4",
        "type": "debug",
        "z": "4e44f1f8.f25318",
        "name": "weekend => public",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 3130,
        "y": 660,
        "wires": []
    },
    {
        "id": "fcbe0b43.74aa08",
        "type": "debug",
        "z": "4e44f1f8.f25318",
        "name": "public => home",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 3120,
        "y": 700,
        "wires": []
    },
    {
        "id": "7247a753.fc5448",
        "type": "change",
        "z": "4e44f1f8.f25318",
        "name": "clean & update msg",
        "rules": [
            {
                "t": "delete",
                "p": "event",
                "pt": "msg"
            },
            {
                "t": "set",
                "p": "myicon",
                "pt": "msg",
                "to": "icon",
                "tot": "flow"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 2660,
        "y": 660,
        "wires": [
            [
                "18f024a5.805b3b",
                "b6d0eda9.5efea"
            ]
        ]
    },
    {
        "id": "b6d0eda9.5efea",
        "type": "debug",
        "z": "4e44f1f8.f25318",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 2830,
        "y": 700,
        "wires": []
    },
    {
        "id": "966d0c6c.5b7048",
        "type": "ui_group",
        "name": "Uhrzeit",
        "tab": "14d26b61.40ec4d",
        "order": 1,
        "disp": false,
        "width": "6",
        "collapse": false
    },
    {
        "id": "14d26b61.40ec4d",
        "type": "ui_tab",
        "name": "Smart Boot",
        "icon": "fa-anchor",
        "order": 1,
        "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:** [31 May 2021 14:21 UTC](https://discourse.nodered.org/t/dashboard-toggle-button-without-switch/45777/5 "2021-05-31T14:21:43Z")

</div>

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