# Change Text Label via UI Button

**URL:** <https://discourse.nodered.org/t/change-text-label-via-ui-button/37812>\
**Category:** Dashboard\
**Created:** [20 December 2020 19:52 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812 "2020-12-20T19:52:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![hawks76](https://avatars.discourse-cdn.com/v4/letter/h/46a35a/32.png) [@hawks76](https://discourse.nodered.org/u/hawks76)\
**Post date:** [20 December 2020 19:52 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/1 "2020-12-20T19:52:07Z")

</div>

Pretty new to Node-Red. I know it's probably a rookie mistake causing this, but i can't figure it out.

Trying to set the label of a button based on a global variable (that is being stored in a file). Also wanting to change the value based on input in a change node. for some reason, the change node ignores what comes in. msg.payload gets set on initialization, then want to set variable and change label on button click. Here is a copy of my code.

```auto
[{"id":"a167f92c.0edfb8","type":"tab","label":"Dishwasher Schedule","disabled":false,"info":"Keeps track of who has done the dishes last and who's turn it is next"},{"id":"89be00c5.ae132","type":"inject","z":"a167f92c.0edfb8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":100,"wires":[["c6241b0f.5338f8"]]},{"id":"883959c3.6829c8","type":"ui_button","z":"a167f92c.0edfb8","name":"","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"Dishwash Task Completed","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":520,"y":160,"wires":[["286b777b.e50488"]]},{"id":"86ea2ea9.3aa1b","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":900,"y":80,"wires":[]},{"id":"c116e7dd.0779f8","type":"change","z":"a167f92c.0edfb8","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"value1","fromt":"str","to":"value2","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"value2","fromt":"str","to":"value3","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"value3","fromt":"str","to":"value1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":300,"wires":[["cd8af471.2908b8","8a50cedc.bfd43"]]},{"id":"cd8af471.2908b8","type":"debug","z":"a167f92c.0edfb8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":930,"y":400,"wires":[]},{"id":"286b777b.e50488","type":"function","z":"a167f92c.0edfb8","name":"","func":"msg.payload = global.get(\"upnext\",\"storeInFile\");\n\nnode.warn(\"2nd Function Payload: \" + msg.payload)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":410,"y":260,"wires":[["c116e7dd.0779f8"]]},{"id":"c6241b0f.5338f8","type":"function","z":"a167f92c.0edfb8","name":"","func":"msg.payload = global.get(\"upnext\",\"storeInFile\") || \"empty\";\nnode.warn(\"Initial Function: \" + msg.payload);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":100,"wires":[["86ea2ea9.3aa1b","c8e672c3.7f37d","883959c3.6829c8"]]},{"id":"8a50cedc.bfd43","type":"function","z":"a167f92c.0edfb8","name":"","func":"//flow.set(\"upnext\",msg.payload,\"storeInFile\");\nnode.warn(\"3rd Function Payload: \" + global.get(\"upnext\",\"storeInFile\"));\nmsg.payload = global.get(\"upnext\",\"storeInFile\");\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":960,"y":280,"wires":[["86ea2ea9.3aa1b"]]},{"id":"c8e672c3.7f37d","type":"debug","z":"a167f92c.0edfb8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":460,"y":60,"wires":[]},{"id":"9aa94744.d86908","type":"inject","z":"a167f92c.0edfb8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":600,"wires":[["aff9a723.46ead8"]]},{"id":"aff9a723.46ead8","type":"function","z":"a167f92c.0edfb8","name":"","func":"global.set(\"upnext\",\"value1\",\"storeInFile\");\nmsg.payload = global.get(\"upnext\",\"storeInFile\");\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":600,"wires":[["21b70c2a.ae3684"]]},{"id":"21b70c2a.ae3684","type":"debug","z":"a167f92c.0edfb8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":600,"wires":[]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 December 2020 01:28 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/2 "2020-12-21T01:28:19Z")

</div>

Hi Hawk76. Welcome to Node-Red.

I am not an expert, but here are some things to consider.

1 - The first `function` node:

```auto
msg.payload = global.get("upnext","storeInFile") || "empty";
node.warn("Initial Function: " + msg.payload);
return msg;

```

The first line doesn't make sense to me.

You are setting the `msg.payload` to what a global context of `upnext` is.  
If it isn't set, it is set to `empty`. Fair enough.  
But what is this `storeInFile` part?

There seems to be a lot of the _magic_ which you are using not covered here.

Could you break it down to a more simple thing of what you want to do?

---

<div class="post-metadata">

**Author:** ![hawks76](https://avatars.discourse-cdn.com/v4/letter/h/46a35a/32.png) [@hawks76](https://discourse.nodered.org/u/hawks76)\
**Post date:** [21 December 2020 02:01 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/3 "2020-12-21T02:01:11Z")

</div>

> [@Trying\_to\_learn](#):
>
> `msg.payload = global.get("upnext","storeInFile") || "empty";`

The storeInFile is telling Node-Red to store the data in a file so the data will be persistent across reboots and redeploys.  
That is based on info from here: [A guide to understanding 'Persistent Context'](https://discourse.nodered.org/t/a-guide-to-understanding-persistent-context/4115)  
Basically what i'm trying to do is create a button that my kids press when they do a chore (ie dishes,etc) and keep track of who has done it and who is next up. I want the Text Label to show who is next up based on the logic of who pressed the button (who is currently showing as next up) and who should show next. Maybe this isn't the right approach. If there is a better way, i'm certainly open other options.

Thanks

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 December 2020 02:27 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/4 "2020-12-21T02:27:54Z")

</div>

Sorry for the short reply, but the computer and I are having an argument about what it should and should not be doing.

This is an effort in doing what I think you want to do.

It is a bit nasty, sorry. But I think you can fix the problem it has just now.

```auto
[{"id":"20f58583.f8c112","type":"ui_button","z":"a167f92c.0edfb8","name":"New Button","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"{{msg.payload}}","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"X","payloadType":"str","topic":"","x":230,"y":630,"wires":[["5e0161ce.ab5ba8"]]},{"id":"b4613704.8bee88","type":"inject","z":"a167f92c.0edfb8","name":"Must do this first","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":500,"wires":[["9302b57d.5e11a8"]]},{"id":"9302b57d.5e11a8","type":"function","z":"a167f92c.0edfb8","name":"","func":"var todo = {\"0\":\"Idle\",\"1\":\"Start\",\"2\":\"Run\",\"3\":\"End\"}\n\nmsg.payload = todo;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":500,"wires":[["8930dd33.14d36"]]},{"id":"8930dd33.14d36","type":"change","z":"a167f92c.0edfb8","name":"","rules":[{"t":"set","p":"todo","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":500,"wires":[[]]},{"id":"5e0161ce.ab5ba8","type":"function","z":"a167f92c.0edfb8","name":"counter","func":"var counter = context.get(\"COUNTER\") || 0;\n\nvar y = counter;\n\ncounter = (counter + 1) %4;\ncontext.set(\"COUNTER\",counter);\n\nmsg.payload = y;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":400,"y":630,"wires":[["f9887310.8a202","f47aaa25.335f88"]]},{"id":"f47aaa25.335f88","type":"function","z":"a167f92c.0edfb8","name":"","func":"var pointer = parseInt(msg.payload);\nvar todo = flow.get(\"todo\");\nvar next = (pointer + 1) %4;\nmsg1 = {};\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[pointer];\nmsg1.payload = todo[next];\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":400,"y":710,"wires":[["8ecbb296.62a028","20f58583.f8c112"],["4384dea7.3b976"]]},{"id":"4384dea7.3b976","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":600,"y":730,"wires":[]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]

```

You have to click on the `inject` node at the start to get things going. (As said on the node)

Then the button should work as you want. I hope.

Ah! The computer is behaving itself a bit more.

Here is a better version with the initial problem resolved.

```auto
[{"id":"20f58583.f8c112","type":"ui_button","z":"a167f92c.0edfb8","name":"New Button","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"{{msg.payload}}","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"X","payloadType":"str","topic":"","x":250,"y":670,"wires":[["5e0161ce.ab5ba8"]]},{"id":"b4613704.8bee88","type":"inject","z":"a167f92c.0edfb8","name":"Must do this first","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":500,"wires":[["9302b57d.5e11a8","c3f5e64e.983958"]]},{"id":"9302b57d.5e11a8","type":"function","z":"a167f92c.0edfb8","name":"","func":"var todo = {\"0\":\"Idle\",\"1\":\"Start\",\"2\":\"Run\",\"3\":\"End\"}\n\nmsg.payload = todo;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":500,"wires":[["8930dd33.14d36"]]},{"id":"8930dd33.14d36","type":"change","z":"a167f92c.0edfb8","name":"","rules":[{"t":"set","p":"todo","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":500,"wires":[[]]},{"id":"5e0161ce.ab5ba8","type":"function","z":"a167f92c.0edfb8","name":"counter","func":"var counter = context.get(\"COUNTER\") || 0;\n\nvar y = counter;\n\ncounter = (counter + 1) %4;\ncontext.set(\"COUNTER\",counter);\n\nmsg.payload = y;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":670,"wires":[["f9887310.8a202","f47aaa25.335f88"]]},{"id":"f47aaa25.335f88","type":"function","z":"a167f92c.0edfb8","name":"","func":"var pointer = parseInt(msg.payload);\nvar todo = flow.get(\"todo\");\nvar next = (pointer + 1) %4;\nmsg1 = {};\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[pointer];\nmsg1.payload = todo[next];\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":420,"y":750,"wires":[["8ecbb296.62a028","20f58583.f8c112"],["4384dea7.3b976"]]},{"id":"4384dea7.3b976","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":620,"y":770,"wires":[]},{"id":"c3f5e64e.983958","type":"function","z":"a167f92c.0edfb8","name":"Set up","func":"var todo = flow.get(\"todo\");\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[0];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":240,"y":580,"wires":[["20f58583.f8c112"]]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![hawks76](https://avatars.discourse-cdn.com/v4/letter/h/46a35a/32.png) [@hawks76](https://discourse.nodered.org/u/hawks76)\
**Post date:** [21 December 2020 04:08 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/5 "2020-12-21T04:08:30Z")

</div>

@Trying_to_learn This is exactly what i'm wanting to do!! Thank you!!

Now, if i can figure out how to store the last value somewhere that it can be picked up if the server restarts or the flow is redeployed.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 December 2020 00:20 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/6 "2020-12-22T00:20:44Z")

</div>

Sorry I can't help you with that.

But I would start a new thread on just that topic: Storing context to file system.

Or: use the `file` nodes and write the state to a file and read it when the button is pressed.

Something like this:

(This does not work, it is only to show a way of doing it.)

```auto
[{"id":"b4613704.8bee88","type":"inject","z":"a167f92c.0edfb8","name":"Must do this first","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":510,"wires":[["9302b57d.5e11a8","c3f5e64e.983958","16881c8c.946503"]]},{"id":"9302b57d.5e11a8","type":"function","z":"a167f92c.0edfb8","name":"","func":"var todo = {\"0\":\"Idle\",\"1\":\"Start\",\"2\":\"Run\",\"3\":\"End\"}\n\nmsg.payload = todo;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":510,"wires":[["6e381928.a2f788","8930dd33.14d36"]]},{"id":"16881c8c.946503","type":"trigger","z":"a167f92c.0edfb8","name":"","op1":"","op2":"0","op1type":"nul","op2type":"str","duration":"5","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":125,"y":590,"wires":[["dc332642.1d94c8"]],"l":false},{"id":"6e381928.a2f788","type":"file","z":"a167f92c.0edfb8","name":"","filename":"","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":610,"y":510,"wires":[[]]},{"id":"20f58583.f8c112","type":"ui_button","z":"a167f92c.0edfb8","name":"New Button","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"{{msg.payload}}","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"X","payloadType":"str","topic":"","x":250,"y":670,"wires":[["5e0161ce.ab5ba8"]]},{"id":"dc332642.1d94c8","type":"file in","z":"a167f92c.0edfb8","name":"","filename":"","format":"utf8","chunk":false,"sendError":false,"encoding":"none","x":230,"y":590,"wires":[["20f58583.f8c112"]]},{"id":"5e0161ce.ab5ba8","type":"function","z":"a167f92c.0edfb8","name":"counter","func":"var counter = context.get(\"COUNTER\") || 0;\n\nvar y = counter;\n\ncounter = (counter + 1) %4;\ncontext.set(\"COUNTER\",counter);\n\nmsg.payload = y;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":670,"wires":[["f9887310.8a202","f47aaa25.335f88"]]},{"id":"f47aaa25.335f88","type":"function","z":"a167f92c.0edfb8","name":"","func":"var pointer = parseInt(msg.payload);\nvar todo = flow.get(\"todo\");\nvar next = (pointer + 1) %4;\nmsg1 = {};\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[pointer];\nmsg1.payload = todo[next];\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":430,"y":750,"wires":[["8ecbb296.62a028","20f58583.f8c112"],["4384dea7.3b976"]]},{"id":"e5384b05.f9698","type":"inject","z":"a167f92c.0edfb8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":240,"y":630,"wires":[["5e0161ce.ab5ba8"]]},{"id":"4384dea7.3b976","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":620,"y":770,"wires":[]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [22 December 2020 07:36 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/7 "2020-12-22T07:36:26Z")

</div>

> [@hawks76](#):
>
> Now, if i can figure out how to store the last value somewhere that it can be picked up if the server restarts or the flow is redeployed.

There are some contrib nodes that do that (search flow library) or enable [file backed context](https://nodered.org/docs/api/context/store/localfilesystem) in the settings file.

---

<div class="post-metadata">

**Author:** ![hawks76](https://avatars.discourse-cdn.com/v4/letter/h/46a35a/32.png) [@hawks76](https://discourse.nodered.org/u/hawks76)\
**Post date:** [22 December 2020 13:09 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/8 "2020-12-22T13:09:52Z")

</div>

@Steve-Mcl I have the file backed context enabled, and have that working now.

Thanks @Trying_to_learn for the great example that set me on the correct path to accomplish what i was trying to do!!

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 December 2020 02:47 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/9 "2020-12-23T02:47:37Z")

</div>

No problems.

All the best.

---

<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:** [6 January 2021 02:47 UTC](https://discourse.nodered.org/t/change-text-label-via-ui-button/37812/10 "2021-01-06T02:47:38Z")

</div>

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