# Multiple changes of the button label

**URL:** <https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696>\
**Category:** Dashboard\
**Created:** [3 October 2020 13:27 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696 "2020-10-03T13:27:28Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkrasowski](https://avatars.discourse-cdn.com/v4/letter/r/bbe5ce/32.png) [@rkrasowski](https://discourse.nodered.org/u/rkrasowski)\
**Post date:** [3 October 2020 13:27 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/1 "2020-10-03T13:27:28Z")

</div>

Hi everybody,  
The project that I am working on is fairly simple. Looking for an idea about how best to do it.  
I am creating an electronic checklist for my plane. 5-inch touch screen that will display what I need to do manually before the fly (some of this is critical, so manual switches are still there). I created a large button on the screen, that is showing "Fuel On", also audio announcement "Fuel On", after pressing the button, the label should change to "Master Switch ON" with the audio announcement "Master Switch ON", after that "Engine ON" etc, etc.  
What would be the best way to implement this?  
Should I do a button change, only label change? If so, how?  
Thanks for your help  
Robert

---

<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:** [3 October 2020 13:41 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/2 "2020-10-03T13:41:17Z")

</div>

It's quite easy to implement but do you have feedback from the system so you can switch the button state according to incoming events or should it just be sequence of states the button will have?

---

<div class="post-metadata">

**Author:** ![rkrasowski](https://avatars.discourse-cdn.com/v4/letter/r/bbe5ce/32.png) [@rkrasowski](https://discourse.nodered.org/u/rkrasowski)\
**Post date:** [3 October 2020 14:07 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/3 "2020-10-03T14:07:58Z")

</div>

No need to have a feedback, I simply have to switch "Fuel On" manually, press the button, and go to the next item. The only feedback is me pressing the button. The list is for me not to forget anything. With audio announcement I do not even have to look at the screen.  
Normally, I have a piece of paper with the list of item I have to do before, let's say starting the engine. These are critical items, so still prefer to do it manually.  
Thanks

---

<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:** [3 October 2020 14:25 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/4 "2020-10-03T14:25:56Z")

</div>

Then probably something like this may do the trick.

```auto
[{"id":"8c811146.a2541","type":"function","z":"a3ab0b27.873be8","name":"Set defaults","func":"let startSequence = [\n {\n id:0,\n name:\"Fuel On\"\n },\n {\n id:1,\n name:\"Master Switch On\"\n },\n {\n id:2,\n name:\"Engine On\" \n }\n]\nglobal.set('startSequence',startSequence)\n\nvar state = startSequence.find(element => element.id == 0);\nglobal.set('currentState',state)\nreturn msg\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":210,"y":200,"wires":[["8488189a.5f6998"]]},{"id":"1d7b5e29.c55722","type":"inject","z":"a3ab0b27.873be8","name":"Init / reset","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":140,"wires":[["8c811146.a2541"]]},{"id":"a4fb2aec.c39b68","type":"ui_button","z":"a3ab0b27.873be8","name":"","group":"f7080b8f.ec7f98","order":1,"width":0,"height":0,"passthru":false,"label":"{{payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":430,"y":300,"wires":[["7007a429.63614c"]]},{"id":"8488189a.5f6998","type":"function","z":"a3ab0b27.873be8","name":"Determine state for button label","func":"var state = global.get('currentState')\nvar sequence = global.get('startSequence')\nif(!state){\n state = sequence.find(element => element.id == 0);\n global.set('currentState',state)\n}\nmsg.payload = state.name\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":210,"y":300,"wires":[["a4fb2aec.c39b68","5b2bae94.7bb42"]]},{"id":"7007a429.63614c","type":"function","z":"a3ab0b27.873be8","name":"Change state","func":"var state = global.get('currentState')\nvar sequence = global.get('startSequence')\nif(state.id + 1 == sequence.length){\n state = sequence.find(element => element.id == 0);\n}else{\n state = sequence.find(element => element.id == state.id + 1);\n}\n\nglobal.set(\"currentState\",state)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":590,"y":300,"wires":[["8488189a.5f6998"]]},{"id":"5b2bae94.7bb42","type":"ui_audio","z":"a3ab0b27.873be8","name":"","group":"f7080b8f.ec7f98","voice":"en-US","always":"","x":480,"y":200,"wires":[]},{"id":"f7080b8f.ec7f98","type":"ui_group","z":"","name":"default","tab":"cecac48e.2a6aa8","order":1,"disp":true,"width":"9","collapse":false},{"id":"cecac48e.2a6aa8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![rkrasowski](https://avatars.discourse-cdn.com/v4/letter/r/bbe5ce/32.png) [@rkrasowski](https://discourse.nodered.org/u/rkrasowski)\
**Post date:** [3 October 2020 14:35 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/5 "2020-10-03T14:35:54Z")

</div>

Wow, thanks for doing it.  
I am getting an error  
" [error] [function:Change state] TypeError: Cannot read property 'id' of undefined"

---

<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:** [3 October 2020 14:38 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/6 "2020-10-03T14:38:44Z")

</div>

You should press the init first  
And you can set the inject node to do it automatically  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/9701019595aced45059657c3061f3ed67acc7cb2.png)

---

<div class="post-metadata">

**Author:** ![rkrasowski](https://avatars.discourse-cdn.com/v4/letter/r/bbe5ce/32.png) [@rkrasowski](https://discourse.nodered.org/u/rkrasowski)\
**Post date:** [3 October 2020 14:40 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/7 "2020-10-03T14:40:47Z")

</div>

Got it,  
thanks  
Appreciate, will try to digest it and learn how you did it.  
Thanks again

---

<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:** [3 October 2020 14:49 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/8 "2020-10-03T14:49:00Z")

</div>

Welcome to the forum. And don't hesitate to ask questions about the solution cos that's the way to learn things.

---

<div class="post-metadata">

**Author:** ![rkrasowski](https://avatars.discourse-cdn.com/v4/letter/r/bbe5ce/32.png) [@rkrasowski](https://discourse.nodered.org/u/rkrasowski)\
**Post date:** [3 October 2020 14:50 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/9 "2020-10-03T14:50:35Z")

</div>

Fantastic, did not expect such a quick fix to the problem that I was facing.  
Thanks again  
Robert

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 October 2020 20:09 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/10 "2020-10-03T20:09:00Z")

</div>

Would love to see it in action.

---

<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:** [2 November 2020 20:09 UTC](https://discourse.nodered.org/t/multiple-changes-of-the-button-label/33696/11 "2020-11-02T20:09:16Z")

</div>

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