# Button text not visible on first load

**URL:** https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [1 October 2021 07:19 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743 "2021-10-01T07:19:32Z")
**Posts on this page:** 12
**Page:** 2

<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: [1 October 2021 11:26 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/21 "2021-10-01T11:26:10Z")

</div>

But why cannot a push-button be added to the palette's dashboard as an additional widget? I'd suggest this to the developer.

---

<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: [1 October 2021 11:34 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/22 "2021-10-01T11:34:29Z")

</div>

Did you get the label to work?

> [@ebolisa](#):
>
> But why cannot a push-button be added to the palette's dashboard as an additional widget?

I don't understant this question. what do you mean by a push button and what would make it different from the ui-button?

BTW - if the label will always contain the same text, you can just put that text in the ui-button's label configuration

---

<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: [1 October 2021 11:45 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/23 "2021-10-01T11:45:23Z")

</div>

> [@zenofmud](#):
>
> I don't understant this question. what do you mean by a push button and what would make it different from the ui-button?

I meat to add a push-button alread preset with some variables like timing ON to OFF to ON in the ui-dashboard just like the switch widget.  
Will go back to my issue in an hour or so. Need to feed my burnt out neurons. Thanks for helping out.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [1 October 2021 12:40 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/24 "2021-10-01T12:40:14Z")

</div>

It is not so hard to make momentary button. Even with the look and feel similar to the dashboard standard buttons.

There is many different examples shared but one more does not harm anybody

```auto
[
    {
        "id": "9a19901ff0e3f29d",
        "type": "ui_template",
        "z": "e490bfdba10fb48a",
        "group": "d1ae1ccfedfa70c5",
        "name": "momentary button 1/0",
        "order": 7,
        "width": "2",
        "height": "1",
        "format": "<div class=\"momentary-button\" id=\"{{'momentary_'+$id}}\">\n <md-button id=\"{{'m_button_'+$id}}\"></md-button>\n</div>\n\n<script>\n (function(scope) {\n const push = 1\n const release = 0\n const pushLabel = \"<i class='fa fa-2x fa-user'></i>\"\n const releaseLabel = \"<i class='fa fa-2x fa-home'></i>\"\n function init(){\n $(\"#m_button_\"+scope.$id).html(releaseLabel);\n $(\"#momentary_\"+scope.$id).on('touchstart mousedown', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(pushLabel)\n scope.send({\"payload\": push});\n });\n\n $(\"#momentary_\"+scope.$id).on('touchend mouseup', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(releaseLabel)\n scope.send({\"payload\": release});\n });\n }\n\n if($(\"#momentary_\"+scope.$id).is(\"div\")){\n init()\n } \n else{\n setTimeout(init,200)\n }\n \n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 270,
        "y": 1170,
        "wires": [
            [
                "c9964afd7d132807"
            ]
        ]
    },
    {
        "id": "c9964afd7d132807",
        "type": "ui_text",
        "z": "e490bfdba10fb48a",
        "group": "d1ae1ccfedfa70c5",
        "order": 8,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Momentary button activity: ",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 540,
        "y": 1140,
        "wires": []
    },
    {
        "id": "bf78ce5db8cd46c8",
        "type": "ui_template",
        "z": "e490bfdba10fb48a",
        "group": "d1ae1ccfedfa70c5",
        "name": "momentary button ON/OFF",
        "order": 7,
        "width": "2",
        "height": "1",
        "format": "<div class=\"momentary-button\" id=\"{{'momentary_'+$id}}\">\n <md-button id=\"{{'m_button_'+$id}}\"></md-button>\n</div>\n\n<script>\n \n (function(scope) {\n const push = \"ON\"\n const release = \"OFF\"\n const pushLabel = \"ON\"\n const releaseLabel = \"OFF\"\n function init(){\n $(\"#m_button_\"+scope.$id).html(releaseLabel);\n $(\"#momentary_\"+scope.$id).on('touchstart mousedown', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(pushLabel)\n scope.send({\"payload\": push});\n });\n\n $(\"#momentary_\"+scope.$id).on('touchend mouseup', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(releaseLabel)\n scope.send({\"payload\": release});\n });\n }\n\n if($(\"#momentary_\"+scope.$id).is(\"div\")){\n init()\n } \n else{\n setTimeout(init,200)\n }\n \n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 250,
        "y": 1120,
        "wires": [
            [
                "c9964afd7d132807"
            ]
        ]
    },
    {
        "id": "e7731dddbe92fbf0",
        "type": "ui_template",
        "z": "e490bfdba10fb48a",
        "group": "d1ae1ccfedfa70c5",
        "name": "CSS",
        "order": 10,
        "width": 0,
        "height": 0,
        "format": "<style id=\"custom-styles\">\n .momentary-button > button{\n min-width:100% !important;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 300,
        "y": 1070,
        "wires": [
            []
        ]
    },
    {
        "id": "d1ae1ccfedfa70c5",
        "type": "ui_group",
        "name": "Default",
        "tab": "b15d581341d0093f",
        "order": 1,
        "disp": false,
        "width": "8",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b15d581341d0093f",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "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: [1 October 2021 12:45 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/25 "2021-10-01T12:45:11Z")

</div>

FYI, While testing your flow, I found a weird edge case (which I will report) that if the `inject` node does not contain a msg.payload, and the `ui-button` node has `If msg arrives on input, emulate a button click:` checked, the ui-button will NOT return a msg. But once the ui-button receives a msg with a msg.payload, then the msgs from the inject without the msg.payload will work.

---

<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: [1 October 2021 12:48 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/26 "2021-10-01T12:48:58Z")

</div>

I'm hard headed and I don't stop till I understand what I'm doing wrong.  
So, I cleaned up my code and now, seems to work as designed.  
Thank you all.

```auto
[
    {
        "id": "a8fd423c.f1f4f",
        "type": "rpi-gpio out",
        "z": "d2d5d2de2e29a4b5",
        "name": "relayS",
        "pin": "33",
        "set": "",
        "level": "0",
        "freq": "",
        "out": "out",
        "x": 470,
        "y": 80,
        "wires": []
    },
    {
        "id": "7f19db02.fc5264",
        "type": "ui_button",
        "z": "d2d5d2de2e29a4b5",
        "name": "btnS",
        "group": "b7650ad6.bcc6",
        "order": 1,
        "width": "3",
        "height": "1",
        "passthru": false,
        "label": "{{msg.label}}",
        "tooltip": "",
        "color": "white",
        "bgcolor": "{{msg.background}}",
        "icon": "local_laundry_service",
        "payload": "X",
        "payloadType": "str",
        "topic": "",
        "x": 290,
        "y": 60,
        "wires": [
            [
                "4bed650f.761c1c"
            ]
        ]
    },
    {
        "id": "4bed650f.761c1c",
        "type": "function",
        "z": "d2d5d2de2e29a4b5",
        "name": "FlipFlop",
        "func": "if (msg.payload == \"X\")\n{\n msg.payload = \"0\";\n msg.label = \"Activado\";\n msg.background = \"red\";\n}\nelse\n{\n msg.payload = \"1\";\n msg.label = \"Lavadora S\";\n msg.background = \"#0094ce\";\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 280,
        "y": 140,
        "wires": [
            [
                "7f19db02.fc5264",
                "b5e515d.94727e8",
                "706403a615fa0be1"
            ]
        ]
    },
    {
        "id": "b5e515d.94727e8",
        "type": "switch",
        "z": "d2d5d2de2e29a4b5",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 470,
        "y": 180,
        "wires": [
            [
                "34f617a0.51a2e8"
            ]
        ]
    },
    {
        "id": "34f617a0.51a2e8",
        "type": "trigger",
        "z": "d2d5d2de2e29a4b5",
        "name": "",
        "op1": "",
        "op2": "Z",
        "op1type": "nul",
        "op2type": "str",
        "duration": "1",
        "extend": false,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 280,
        "y": 240,
        "wires": [
            [
                "4bed650f.761c1c"
            ]
        ]
    },
    {
        "id": "706403a615fa0be1",
        "type": "debug",
        "z": "d2d5d2de2e29a4b5",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 490,
        "y": 140,
        "wires": []
    },
    {
        "id": "5ba4a9384c0d9ec7",
        "type": "inject",
        "z": "d2d5d2de2e29a4b5",
        "name": "Set at start",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{{label}}",
        "payloadType": "msg",
        "x": 100,
        "y": 60,
        "wires": [
            [
                "7f19db02.fc5264"
            ]
        ]
    },
    {
        "id": "b7650ad6.bcc6",
        "type": "ui_group",
        "name": "Control",
        "tab": "ef5d65ce.36e6b",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "ef5d65ce.36e6b",
        "type": "ui_tab",
        "name": "Washup",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<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: [1 October 2021 13:17 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/27 "2021-10-01T13:17:35Z")

</div>

> [@hotNipi](#):
>
> It is not so hard to make momentary button.

😆 easy for you to say 😉

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [1 October 2021 15:40 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/28 "2021-10-01T15:40:41Z")

</div>

Still working on my first coffee, so unsure if I read enough to fully understand your desired action...

But assuming your relay is active LOW, and you want to start HIGH with button displaying "Lavadora S" in blue, Start with the `inject` set as this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/948b24860f7e31d1382ad991765ece197d9b907a.png)

I may not have this "wired" totally correct, but seems to work.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/1633c042b49fd21fdf4f52388a7e543cb6c1c067.png)

```auto
[{"id":"6d77caf313345d43","type":"rpi-gpio out","z":"e77af6359c6ce6d6","name":"relayS","pin":"12","set":"","level":"0","freq":"","out":"out","x":1010,"y":320,"wires":[]},{"id":"19d49de0ca33701d","type":"ui_button","z":"e77af6359c6ce6d6","name":"btnS","group":"23a52a846f6fc199","order":1,"width":"3","height":"1","passthru":false,"label":"{{msg.label}}","tooltip":"","color":"white","bgcolor":"{{msg.background}}","className":"","icon":"local_laundry_service","payload":"X","payloadType":"str","topic":"","topicType":"str","x":810,"y":200,"wires":[["6abeceadcf99551e"]]},{"id":"6abeceadcf99551e","type":"function","z":"e77af6359c6ce6d6","name":"FlipFlop","func":"if (msg.payload == \"X\")\n{\n msg.payload = \"0\";\n msg.label = \"Activado\";\n msg.background = \"red\";\n}\nelse\n{\n msg.payload = \"1\";\n msg.label = \"Lavadora S\";\n msg.background = \"#0094ce\";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":820,"y":260,"wires":[["19d49de0ca33701d","d0b0372762937f0b","2e32ec5416ec4942","6d77caf313345d43"]]},{"id":"d0b0372762937f0b","type":"switch","z":"e77af6359c6ce6d6","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":810,"y":320,"wires":[["682ed3b1c6b529ef"]]},{"id":"682ed3b1c6b529ef","type":"trigger","z":"e77af6359c6ce6d6","name":"","op1":"","op2":"Z","op1type":"nul","op2type":"str","duration":"1","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":820,"y":380,"wires":[["6abeceadcf99551e","6d77caf313345d43"]]},{"id":"2e32ec5416ec4942","type":"debug","z":"e77af6359c6ce6d6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1030,"y":260,"wires":[]},{"id":"9b48879ca32afe69","type":"inject","z":"e77af6359c6ce6d6","name":"Set at start","props":[{"p":"payload"},{"p":"label","v":"Lavadora S","vt":"str"},{"p":"background","v":"#0094ce","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":610,"y":200,"wires":[["19d49de0ca33701d"]]},{"id":"23a52a846f6fc199","type":"ui_group","name":"Default","tab":"0a57de3958fc9319","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"0a57de3958fc9319","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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: [1 October 2021 15:59 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/29 "2021-10-01T15:59:40Z")

</div>

Thank you. I basically did the same. Nevertheless, your initial tip was the clue I needed. Thank you.

 ![Cap1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/aea8a0a76f3f76fb9683a817bc28bf11879f6bca.png)

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [1 October 2021 16:02 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/30 "2021-10-01T16:02:29Z")

</div>

Ya, it took me awhile to figure out that I can just type in what I needed after the **msg.** 😛

---

<div class="post-metadata">

### Author: ![Tommy1](https://avatars.discourse-cdn.com/v4/letter/t/e47774/32.png) [@Tommy1](https://discourse.nodered.org/u/Tommy1)
#### Post date: [4 October 2021 08:14 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/31 "2021-10-04T08:14:32Z")

</div>

Just to add if its a dropdown item that you want to refresh to the selected value a persist node to the in and out of the button and it will reload the selected value at start up. also can be used to refresh data from anything ive used it to keep chart data after a restart.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/41fa7e71f3668e214bd0b64a395b780b7d728811.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: [3 November 2021 08:14 UTC](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743/32 "2021-11-03T08:14:49Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/button-text-not-visible-on-first-load/51743.md?page=1)