# Trying to create a menu, buttons and actions don't work
**URL:** https://discourse.nodered.org/t/trying-to-create-a-menu-buttons-and-actions-dont-work/46178
**Category:** Developing Nodes
**Created:** [24 May 2021 21:00 UTC](https://discourse.nodered.org/t/trying-to-create-a-menu-buttons-and-actions-dont-work/46178 "2021-05-24T21:00:07Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Cuprani](https://discourse.nodered.org/u/Cuprani)
#### Post date: [24 May 2021 21:00 UTC](https://discourse.nodered.org/t/trying-to-create-a-menu-buttons-and-actions-dont-work/46178/1 "2021-05-24T21:00:08Z")
Can someone please help me with my node?
I'm trying to create a menu with 4 buttons.
The buttons should change color according to the active button.
The buttons should trigger a "show and hide" command for particular groups.
I thought I had done everything right, except it just doesn't work.
Somehow only button 3 seems to work, I think something is going wrong storing the current state.
Can anyone tell me what I'm doing wrong?
.
.
```auto
[{"id":"ad2fe4ba.7f6a28","type":"ui_button","z":"bbff3fe8.ed376","name":"Home Menu","group":"cf059249.5b8b9","order":2,"width":3,"height":1,"passthru":false,"label":"Home","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-home","payload":"home","payloadType":"str","topic":"","topicType":"str","x":530,"y":100,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"ac1d591.ae698a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Energie Menu","group":"cf059249.5b8b9","order":4,"width":3,"height":1,"passthru":false,"label":"Energie","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-bolt","payload":"energie","payloadType":"str","topic":"","topicType":"str","x":540,"y":140,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"d428be50.34237","type":"ui_button","z":"bbff3fe8.ed376","name":"Klimaat Menu","group":"cf059249.5b8b9","order":5,"width":3,"height":1,"passthru":false,"label":"Klimaat","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-thermometer-three-quarters","payload":"klimaat","payloadType":"str","topic":"","topicType":"str","x":540,"y":180,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"ad9353c2.8c3a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Domotica Menu","group":"cf059249.5b8b9","order":6,"width":3,"height":1,"passthru":false,"label":"Domotica","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-eercast","payload":"domotica","payloadType":"str","topic":"","topicType":"str","x":540,"y":220,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"868e0fb8.34d9a","type":"function","z":"bbff3fe8.ed376","name":"","func":"if(msg.payload == \"menu\")\n{\n msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nif(msg.payload == \"energie\")\n{\n msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nif(msg.payload == \"klimaat\")\n{\n msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse{\n msg.payload = {\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":760,"y":140,"wires":[["17e70594.d9e6ba"]]},{"id":"17e70594.d9e6ba","type":"ui_ui_control","z":"bbff3fe8.ed376","name":"","x":940,"y":140,"wires":[[]]},{"id":"eb3a38ca.a8e938","type":"persist in","z":"bbff3fe8.ed376","name":"Set TopMenu","storageNode":"e6d7d60b.123a28","x":950,"y":180,"wires":[]},{"id":"11d2c6ee.f4bd29","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu=global.get(\"TopMenu\");\nvar background=\"#FFFFFF\";\nvar color=\"#000000\";\n\nif(menu==\"menu\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":100,"wires":[["ad2fe4ba.7f6a28"]]},{"id":"b4073f4b.999f1","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu = global.get(\"TopMenu\");\nvar background = \"0094CE\";\nvar color = \"#FFFFFF\";\n\nif(menu == \"energie\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":140,"wires":[["ac1d591.ae698a8"]]},{"id":"47721fdf.a024c","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu=global.get(\"TopMenu\");\nvar background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(menu==\"klimaat\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":180,"wires":[["d428be50.34237"]]},{"id":"67fe8d29.afa994","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu=global.get(\"TopMenu\");\nvar background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(menu==\"domotica\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":220,"wires":[["ad9353c2.8c3a8"]]},{"id":"618540ab.7dec5","type":"function","z":"bbff3fe8.ed376","name":"","func":"global.set(\"TopMenu\",(msg.payload));\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":760,"y":180,"wires":[["eb3a38ca.a8e938"]]},{"id":"72ec42d6.3d842c","type":"persist out","z":"bbff3fe8.ed376","name":"Load TopMenu","storageNode":"e6d7d60b.123a28","x":140,"y":160,"wires":[["67fe8d29.afa994","47721fdf.a024c","b4073f4b.999f1","11d2c6ee.f4bd29"]]},{"id":"cf059249.5b8b9","type":"ui_group","name":"Top Menu","tab":"8146c75c.872268","order":1,"disp":false,"width":27,"collapse":false},{"id":"e6d7d60b.123a28","type":"persist-store","filename":"TopMenu","interval":"2"},{"id":"8146c75c.872268","type":"ui_tab","name":"Huis","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@Cuprani](https://discourse.nodered.org/u/Cuprani)
#### Post date: [25 May 2021 18:42 UTC](https://discourse.nodered.org/t/trying-to-create-a-menu-buttons-and-actions-dont-work/46178/2 "2021-05-25T18:42:22Z")
Okay, sometimes sleeping over it helpes.... 😆
Yesterday it took me 3 hours to build and figuring out why it doesn't work.
Today I fixed it in 10 minutes.
For whoever is looking for an interactive button menu that changes color according to the selected button, here is how I maneged to do that. Maybe there are better ways, but this is simple and it works.
```auto
[{"id":"ad2fe4ba.7f6a28","type":"ui_button","z":"bbff3fe8.ed376","name":"Home Menu","group":"cf059249.5b8b9","order":3,"width":3,"height":1,"passthru":false,"label":"Home","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-home","payload":"home","payloadType":"str","topic":"","topicType":"str","x":530,"y":100,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"ac1d591.ae698a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Energie Menu","group":"cf059249.5b8b9","order":4,"width":3,"height":1,"passthru":false,"label":"Energie","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-bolt","payload":"energie","payloadType":"str","topic":"","topicType":"str","x":540,"y":140,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"d428be50.34237","type":"ui_button","z":"bbff3fe8.ed376","name":"Klimaat Menu","group":"cf059249.5b8b9","order":5,"width":3,"height":1,"passthru":false,"label":"Klimaat","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-thermometer-three-quarters","payload":"klimaat","payloadType":"str","topic":"","topicType":"str","x":540,"y":180,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"ad9353c2.8c3a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Domotica Menu","group":"cf059249.5b8b9","order":6,"width":3,"height":1,"passthru":false,"label":"Domotica","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-eercast","payload":"domotica","payloadType":"str","topic":"","topicType":"str","x":540,"y":220,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"868e0fb8.34d9a","type":"function","z":"bbff3fe8.ed376","name":"","func":"if(msg.payload == \"home\")\n{\n msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse if(msg.payload == \"energie\")\n{\n msg.payload = {\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse if(msg.payload == \"klimaat\")\n{\n msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse{\n msg.payload = {\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":820,"y":160,"wires":[["e17ebfad.54b6a"]]},{"id":"11d2c6ee.f4bd29","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background=\"#FFFFFF\";\nvar color=\"#000000\";\n\nif(msg.payload==\"home\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":100,"wires":[["ad2fe4ba.7f6a28"]]},{"id":"b4073f4b.999f1","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background = \"0094CE\";\nvar color = \"#FFFFFF\";\n\nif(msg.payload == \"energie\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":140,"wires":[["ac1d591.ae698a8"]]},{"id":"47721fdf.a024c","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(msg.payload==\"klimaat\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":180,"wires":[["d428be50.34237"]]},{"id":"67fe8d29.afa994","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(msg.payload==\"domotica\")\n{\n background=\"#FFFFFF\";\n color=\"#000000\";\n}\nelse\n{\n background=\"0094CE\";\n color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":220,"wires":[["ad9353c2.8c3a8"]]},{"id":"e17ebfad.54b6a","type":"ui_ui_control","z":"bbff3fe8.ed376","name":"","x":980,"y":160,"wires":[[]]},{"id":"cf059249.5b8b9","type":"ui_group","name":"Top Menu","tab":"8146c75c.872268","order":1,"disp":false,"width":"27","collapse":false},{"id":"8146c75c.872268","type":"ui_tab","name":"Huis","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [8 June 2021 18:43 UTC](https://discourse.nodered.org/t/trying-to-create-a-menu-buttons-and-actions-dont-work/46178/3 "2021-06-08T18:43:07Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.