# Set button label at startup and change it when pressed and back after a set time (SOLVED)

**URL:** <https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609>\
**Category:** Dashboard\
**Created:** [20 October 2020 23:20 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609 "2020-10-20T23:20:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ebolisa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ebolisa/32/89203_2.png) [@ebolisa](https://discourse.nodered.org/u/ebolisa)\
**Post date:** [20 October 2020 23:20 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/1 "2020-10-20T23:20:02Z")

</div>

Hi,

I've a push button label controlled by a function. When the button is pressed, it displays a text/icon and after a second, displays a different text/icon.

When the UI page is loaded, the button doesn't display anything unless, it's pressed. How do I show a default text when the page is loaded?

TIA

```auto
[
    {
        "id": "ee1479b1.ec6d68",
        "type": "ui_button",
        "z": "df2b4f99.163318",
        "name": "btnCx",
        "group": "c5612050.2ced2",
        "order": 10,
        "width": "3",
        "height": "1",
        "passthru": false,
        "label": "{{msg.icon}}",
        "tooltip": "",
        "color": "white",
        "bgcolor": "{{msg.colour}}",
        "icon": "",
        "payload": "ON",
        "payloadType": "str",
        "topic": "",
        "x": 290,
        "y": 2120,
        "wires": [
            [
                "b1b14787.e6082"
            ]
        ]
    },
    {
        "id": "b1b14787.e6082",
        "type": "function",
        "z": "df2b4f99.163318",
        "name": "With icon on press",
        "func": "if (msg.payload == \"ON\")\n{\n //if 'ON' is received, trigger relay;\n msg.payload = \"0\";\n\n msg.icon = '<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>'\n}\nelse\n{\n msg.payload = \"1\";\n msg.icon = \"Centralita\";\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 310,
        "y": 2200,
        "wires": [
            [
                "ee1479b1.ec6d68",
                "f753a14e.3c19c"
            ]
        ]
    },
    {
        "id": "f753a14e.3c19c",
        "type": "trigger",
        "z": "df2b4f99.163318",
        "name": "",
        "op1": "0",
        "op2": "OFF",
        "op1type": "str",
        "op2type": "str",
        "duration": "1",
        "extend": false,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 280,
        "y": 2260,
        "wires": [
            [
                "b1b14787.e6082"
            ]
        ]
    },
    {
        "id": "c5612050.2ced2",
        "type": "ui_group",
        "z": "",
        "name": "Control",
        "tab": "2332b0a1.2f261",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "2332b0a1.2f261",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [21 October 2020 09:07 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/2 "2020-10-21T09:07:57Z")

</div>

You have two issues here

1. you don't have anything to initialize the button (it shows up empty when you start NR) and
2. you have created a loop. - to see this put a debug node on the output of the `function` node and see what happens.

If the output of the `function` node is fed to the relay, what do you think will happen to the relay?

---

<div class="post-metadata">

**Author:** ![ebolisa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ebolisa/32/89203_2.png) [@ebolisa](https://discourse.nodered.org/u/ebolisa)\
**Post date:** [21 October 2020 11:50 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/3 "2020-10-21T11:50:54Z")

</div>

Hi,

The code is doing what I want it to do. It flips the button label text after activating the relay for a second.

So my problem is issue 1, the button does not initialize when the page is loaded the first time. Beside that, it works fine.

How do I initialize it?

Thanks for helping.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [21 October 2020 12:18 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/4 "2020-10-21T12:18:08Z")

</div>

Add an insert node and set msg.icon to the string in your function.

But be warned you have a loop. When you press the button a msg is sent to the function. The function sends out a msg to the button and to the delay. The delay sends a msg to the function which sends out a msg to the button and to the delay...

Put a debug node on the output of the function, press the button and see what happens

---

<div class="post-metadata">

**Author:** ![ebolisa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ebolisa/32/89203_2.png) [@ebolisa](https://discourse.nodered.org/u/ebolisa)\
**Post date:** [21 October 2020 13:09 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/5 "2020-10-21T13:09:10Z")

</div>

Thanks Paul, will try when I get at home.

The idea behind the loop was to generate a push button instead of a switch. Probably was a bad idea doing it this way.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [21 October 2020 21:00 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/6 "2020-10-21T21:00:20Z")

</div>

So here is a way to do it. Import this flow

```auto
[{"id":"d172fd38.95bd28","type":"ui_button","z":"a3da46a5.bf0908","name":"btnCx","group":"9b5bfaf.72c8088","order":10,"width":"3","height":"1","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"white","bgcolor":"{{msg.colour}}","icon":"","payload":"ON","payloadType":"str","topic":"","x":110,"y":180,"wires":[["5de7a76e.fd5978","2a5bc083.774478"]]},{"id":"9bc5f0f9.7b838","type":"debug","z":"a3da46a5.bf0908","name":"Turn Relay ON/OFF","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":770,"y":160,"wires":[]},{"id":"45567ed5.3256e8","type":"inject","z":"a3da46a5.bf0908","name":"set button to 'Centralia' on startup","props":[{"p":"icon","v":"<font color = \"white\"><i> Centralita </i></font>","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":220,"y":40,"wires":[["9fdffbb6.eef928"]]},{"id":"5de7a76e.fd5978","type":"switch","z":"a3da46a5.bf0908","name":"Only pass 'ON'","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"ON","vt":"str"}],"checkall":"false","repair":false,"outputs":1,"x":140,"y":240,"wires":[["95b40794.d76b4"]]},{"id":"95b40794.d76b4","type":"change","z":"a3da46a5.bf0908","name":"payload ==> 0 icon=>Check box","rules":[{"t":"set","p":"payload","pt":"msg","to":"0","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":200,"y":300,"wires":[["eb96edec.bcd498","2a9a4771.e2b698","6b369c22.c55fa4"]]},{"id":"fb6fdd8.6d12ca","type":"change","z":"a3da46a5.bf0908","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"1","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"Centralita","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":140,"y":420,"wires":[["641bb359.41960c","1518b954.eb4417"]]},{"id":"eb96edec.bcd498","type":"trigger","z":"a3da46a5.bf0908","name":"Wait 1 second and turn relay OFF","op1":"","op2":"1","op1type":"nul","op2type":"str","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":200,"y":360,"wires":[["fb6fdd8.6d12ca"]]},{"id":"2a5bc083.774478","type":"debug","z":"a3da46a5.bf0908","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":120,"wires":[]},{"id":"209f055c.95da5a","type":"link in","z":"a3da46a5.bf0908","name":"Button","links":["9fdffbb6.eef928","641bb359.41960c","2a9a4771.e2b698"],"x":110,"y":120,"wires":[["d172fd38.95bd28"]],"l":true},{"id":"9fdffbb6.eef928","type":"link out","z":"a3da46a5.bf0908","name":"to Button","links":["209f055c.95da5a"],"x":520,"y":40,"wires":[],"l":true},{"id":"641bb359.41960c","type":"link out","z":"a3da46a5.bf0908","name":"to Button","links":["209f055c.95da5a"],"x":520,"y":440,"wires":[],"l":true},{"id":"2a9a4771.e2b698","type":"link out","z":"a3da46a5.bf0908","name":"to Button","links":["209f055c.95da5a"],"x":520,"y":320,"wires":[],"l":true},{"id":"2b28fc23.47c36c","type":"link in","z":"a3da46a5.bf0908","name":"Relay","links":["6b369c22.c55fa4","1518b954.eb4417"],"x":730,"y":100,"wires":[["9bc5f0f9.7b838"]],"l":true},{"id":"1518b954.eb4417","type":"link out","z":"a3da46a5.bf0908","name":"to Relay","links":["2b28fc23.47c36c"],"x":520,"y":400,"wires":[],"l":true},{"id":"6b369c22.c55fa4","type":"link out","z":"a3da46a5.bf0908","name":"to Relay","links":["2b28fc23.47c36c"],"x":520,"y":280,"wires":[],"l":true},{"id":"9b5bfaf.72c8088","type":"ui_group","z":"","name":"Control","tab":"93341d64.5a6ab","order":2,"disp":true,"width":"6","collapse":false},{"id":"93341d64.5a6ab","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

I've added `link` nodes to make it neater.

 ![Screen Shot 2020-10-21 at 4.49.50 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16916fd1115217b3f06a8392bad68c61fdb10961.png)

The top part runs at startup or on a deploy and sends the label 'Cetralia' to the `button`.  
When you press the `button` the msg is tested in a `switch` node and only will allow a 'ON' msg to pass on.  
Next the msg goes to a `change` node that sets the payload to a '0' and the icon to a check box. This msg is sent to the r elay (repsented by the `debug` node), the `button` (to show the check box' and to a `trigger` node  
the `trigger` node does nothing with the original msg and waits 1 second then sends the msg to a `change` node.  
The `change` node sets the payload to a '1' and the icon 'Centralia' and passes this back to the `button` to change the label.

Hope this helps and youi understand what is going on.

{EDIT} Note: I've changed the title to reflect what you wanted done.

---

<div class="post-metadata">

**Author:** ![ebolisa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ebolisa/32/89203_2.png) [@ebolisa](https://discourse.nodered.org/u/ebolisa)\
**Post date:** [21 October 2020 22:36 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/7 "2020-10-21T22:36:29Z")

</div>

Thank you very much for your time, Paul!!

Because I'm dealing with over 12 buttons/relays, at the end, I decided to use a simple way to toggle the switches:

 ![Captura](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/a/0a240f22c7b9e2471a94e1533638b04d24f140b0.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:** [4 November 2020 22:36 UTC](https://discourse.nodered.org/t/set-button-label-at-startup-and-change-it-when-pressed-and-back-after-a-set-time-solved/34609/8 "2020-11-04T22:36:34Z")

</div>

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