# How can i change tabs with button?

**URL:** <https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010>\
**Category:** Dashboard\
**Created:** [21 May 2020 00:34 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010 "2020-05-21T00:34:27Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![carrero](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@carrero](https://discourse.nodered.org/u/carrero)\
**Post date:** [21 May 2020 00:34 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/1 "2020-05-21T00:34:27Z")

</div>

Hi everyone, im starting on node-red and first of all i want to create multiple tabs and change into them using a button. I supposed that if i have a tab called 4 and i inject with the button the payload number 4, it should work, but it is not.

Thank you very much!

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [21 May 2020 00:44 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/2 "2020-05-21T00:44:33Z")

</div>

Feed a ui\_controle with a payload that contains the name of the tab you want to go to.

---

<div class="post-metadata">

**Author:** ![carrero](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@carrero](https://discourse.nodered.org/u/carrero)\
**Post date:** [21 May 2020 00:49 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/3 "2020-05-21T00:49:45Z")

</div>

but if im injecting a payload with the number 4 with the button on the ui control because the name tab is 4 should work, and it is not

---

<div class="post-metadata">

**Author:** ![bdbell](https://avatars.discourse-cdn.com/v4/letter/b/34f0e0/32.png) [@bdbell](https://discourse.nodered.org/u/bdbell)\
**Post date:** [21 May 2020 04:41 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/4 "2020-05-21T04:41:37Z")

</div>

Here is an example using 4 tabs with the ability to configure the colors of the buttons, or you could configure them by setting the color in the button itself - I wanted the user to be able to configure them though so added this feature (Tab5).

```auto
[{"id":"dc991e02.7909c","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"6f61fbcc.7aa964","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":2,"width":5,"height":"1","passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":160,"wires":[[]]},{"id":"80d205e.f850df8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":4,"width":5,"height":"1","passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":200,"wires":[["4fb777fc.b1b188"]]},{"id":"1aff6efc.0c0e41","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":6,"width":5,"height":"1","passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":240,"wires":[["4fb777fc.b1b188"]]},{"id":"ab48f573.ca1c58","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":8,"width":5,"height":"1","passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":280,"wires":[["4fb777fc.b1b188"]]},{"id":"4fb777fc.b1b188","type":"function","z":"dc991e02.7909c","name":"","func":"msg.payload = msg.topic;\nreturn msg;","outputs":1,"noerr":0,"x":730,"y":460,"wires":[["90ec60e8.9633b"]]},{"id":"90ec60e8.9633b","type":"ui_ui_control","z":"dc991e02.7909c","name":"","events":"all","x":860,"y":460,"wires":[[]]},{"id":"6c397767.57e678","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":2,"width":5,"height":"1","passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":360,"wires":[["4fb777fc.b1b188"]]},{"id":"6637a736.5f65e8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":4,"width":5,"height":"1","passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":400,"wires":[[]]},{"id":"fb84f3e3.18c86","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":6,"width":5,"height":"1","passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":440,"wires":[["4fb777fc.b1b188"]]},{"id":"bed56047.0e1f8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":8,"width":5,"height":"1","passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":480,"wires":[["4fb777fc.b1b188"]]},{"id":"ea08095e.c968e8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":2,"width":5,"height":"1","passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":560,"wires":[["4fb777fc.b1b188"]]},{"id":"e927d37c.0bf89","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":4,"width":5,"height":"1","passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":600,"wires":[["4fb777fc.b1b188"]]},{"id":"c97a2b94.e26608","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":6,"width":5,"height":"1","passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":640,"wires":[[]]},{"id":"8b9b7158.0197d","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":8,"width":5,"height":"1","passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":680,"wires":[["4fb777fc.b1b188"]]},{"id":"6c87d85d.60bfb8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":2,"width":5,"height":1,"passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":760,"wires":[["4fb777fc.b1b188"]]},{"id":"d8ab3c7f.97228","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":4,"width":5,"height":1,"passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":800,"wires":[["4fb777fc.b1b188"]]},{"id":"9eb09c55.9994","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":6,"width":5,"height":1,"passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":840,"wires":[["4fb777fc.b1b188"]]},{"id":"5fd6d434.3ad78c","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":8,"width":5,"height":1,"passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":880,"wires":[[]]},{"id":"19be37b2.9680a8","type":"comment","z":"dc991e02.7909c","name":"Tab1","info":"","x":490,"y":120,"wires":[]},{"id":"41e0220f.cfe54c","type":"comment","z":"dc991e02.7909c","name":"Tab2","info":"","x":490,"y":320,"wires":[]},{"id":"6688207e.45abd","type":"comment","z":"dc991e02.7909c","name":"Tab3","info":"","x":490,"y":520,"wires":[]},{"id":"8c759956.ae9b78","type":"comment","z":"dc991e02.7909c","name":"Tab4","info":"","x":490,"y":720,"wires":[]},{"id":"3b170e2e.8482c2","type":"comment","z":"dc991e02.7909c","name":"Menu Buttons","info":"","x":310,"y":160,"wires":[]},{"id":"1f59ff53.f9e241","type":"inject","z":"dc991e02.7909c","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":290,"y":380,"wires":[["d99599fb.dd5fa8","fde6ac76.576c6"]]},{"id":"d99599fb.dd5fa8","type":"function","z":"dc991e02.7909c","name":"","func":"msg.colour = flow.get(\"menu_button_color\");\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":440,"wires":[["80d205e.f850df8","1aff6efc.0c0e41","ab48f573.ca1c58","6c397767.57e678","fb84f3e3.18c86","bed56047.0e1f8","ea08095e.c968e8","e927d37c.0bf89","8b9b7158.0197d","6c87d85d.60bfb8","d8ab3c7f.97228","9eb09c55.9994"]]},{"id":"fde6ac76.576c6","type":"function","z":"dc991e02.7909c","name":"","func":"msg.colour = flow.get(\"menu_button_selected_color\");\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":480,"wires":[["6f61fbcc.7aa964","6637a736.5f65e8","c97a2b94.e26608","5fd6d434.3ad78c"]]},{"id":"d23ec3ec.c98a","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d2867c6a.11bb8","order":3,"width":4,"height":1,"passthru":false,"label":"Refresh Button Colours","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"","x":210,"y":540,"wires":[["fde6ac76.576c6","d99599fb.dd5fa8"]]},{"id":"9be3bc68.0db6e","type":"function","z":"dc991e02.7909c","name":"","func":"msg.payload = flow.get(\"menu_button_color\") || \"blue\";\nreturn msg;","outputs":1,"noerr":0,"x":190,"y":960,"wires":[["26fcad7f.eaa762"]]},{"id":"26fcad7f.eaa762","type":"ui_text_input","z":"dc991e02.7909c","name":"","label":"Menu Button Color","tooltip":"","group":"d2867c6a.11bb8","order":1,"width":4,"height":1,"passthru":false,"mode":"color","delay":"0","topic":"","x":370,"y":960,"wires":[["ddaa62c1.8cb05"]]},{"id":"ddaa62c1.8cb05","type":"function","z":"dc991e02.7909c","name":"save_menu_button_color","func":"flow.set(\"menu_button_color\", msg.payload)","outputs":1,"noerr":0,"x":610,"y":960,"wires":[[]]},{"id":"246d09bf.530a26","type":"function","z":"dc991e02.7909c","name":"save_menu_button_selected_color","func":"flow.set(\"menu_button_selected_color\", msg.payload)","outputs":1,"noerr":0,"x":700,"y":1000,"wires":[[]]},{"id":"78a8c503.66fc5c","type":"ui_text_input","z":"dc991e02.7909c","name":"","label":"Menu Button Selected Color","tooltip":"","group":"d2867c6a.11bb8","order":2,"width":4,"height":1,"passthru":false,"mode":"color","delay":"0","topic":"","x":400,"y":1000,"wires":[["246d09bf.530a26"]]},{"id":"e7172377.be6c4","type":"function","z":"dc991e02.7909c","name":"","func":"msg.payload = flow.get(\"menu_button_selected_color\") || 0;\nreturn msg;","outputs":1,"noerr":0,"x":190,"y":1000,"wires":[["78a8c503.66fc5c"]]},{"id":"99b55f85.0bf96","type":"ui_text","z":"dc991e02.7909c","group":"b7378d0e.f1c9c","order":4,"width":0,"height":0,"name":"","label":"This is Tab 1","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":180,"wires":[]},{"id":"a26f9dcf.55166","type":"ui_text","z":"dc991e02.7909c","group":"3b2f6450.209d1c","order":4,"width":0,"height":0,"name":"","label":"This is Tab 2","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":240,"wires":[]},{"id":"158a2d9.1fc1fd2","type":"ui_text","z":"dc991e02.7909c","group":"7352f5ff.21627c","order":4,"width":0,"height":0,"name":"","label":"This is Tab 3","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":300,"wires":[]},{"id":"68e8494d.c528a8","type":"ui_text","z":"dc991e02.7909c","group":"d85af320.76327","order":4,"width":0,"height":0,"name":"","label":"This is Tab 4","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":360,"wires":[]},{"id":"b7378d0e.f1c9c","type":"ui_group","z":"","name":"Buttons","tab":"58ddda69.724c24","order":4,"disp":false,"width":30,"collapse":false},{"id":"3b2f6450.209d1c","type":"ui_group","z":"","name":"Buttons","tab":"980906e8.d43858","order":3,"disp":false,"width":30,"collapse":false},{"id":"7352f5ff.21627c","type":"ui_group","z":"","name":"Buttons","tab":"8f0a9aa0.2d4208","order":1,"disp":false,"width":30,"collapse":false},{"id":"d85af320.76327","type":"ui_group","z":"","name":"Buttons","tab":"486ce70b.339908","order":2,"disp":false,"width":30,"collapse":false},{"id":"d2867c6a.11bb8","type":"ui_group","z":"","name":"Config","tab":"cb43c930.6978e8","order":1,"disp":true,"width":"6","collapse":false},{"id":"58ddda69.724c24","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"980906e8.d43858","type":"ui_tab","z":"","name":"Tab2","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"8f0a9aa0.2d4208","type":"ui_tab","z":"","name":"Tab3","icon":"dashboard","order":3,"disabled":false,"hidden":false},{"id":"486ce70b.339908","type":"ui_tab","z":"","name":"Tab4","icon":"dashboard","order":4,"disabled":false,"hidden":false},{"id":"cb43c930.6978e8","type":"ui_tab","z":"","name":"Tab5","icon":"dashboard","order":6,"disabled":false,"hidden":false}]

```

You will need to enable persistent storage if you want the colors to be retained after reboot.

I also use a groups to space the buttons along the top of the screen - you need to put at least one 1x1 spacer in the group and a ui-template node with the following code will make it transparent;

```auto
<style>
    #Tab1_Tab1LeftSpacer {
    opacity : 0;
    }
</style>

```

Tab1 is name of the tab and Tab1LeftSpacer is the name of the group. If you want to remove the standard tab menu that can be done in Dashboard configuration. Although this setup may need to be adjusted depending on screen resolution - it's working pretty well for me.

---

<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:** [21 May 2020 07:27 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/5 "2020-05-21T07:27:34Z")

</div>

Don't forget tab numbers start from 0. So the 4th tab is number 3

---

<div class="post-metadata">

**Author:** ![carrero](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@carrero](https://discourse.nodered.org/u/carrero)\
**Post date:** [21 May 2020 09:54 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/6 "2020-05-21T09:54:31Z")

</div>

But for instance i have two tabs, one is called X and the other one Y. How can i move into the Y tab with a button?. I dont understand how to configure the button with JSON or with the number. Help please mates!

---

<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:** [21 May 2020 10:26 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/7 "2020-05-21T10:26:45Z")

</div>

err - you configure a button to send the number you want ?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f009d5a2afd61dd42669991a5662382a5ea1357.png)

---

<div class="post-metadata">

**Author:** ![carrero](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@carrero](https://discourse.nodered.org/u/carrero)\
**Post date:** [21 May 2020 10:30 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/8 "2020-05-21T10:30:47Z")

</div>

Yes, totally. I send a 1 when i click the button, because i have two tabs, the first one is called X and the other one is Y. I dont know what is happening!

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [21 May 2020 10:41 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/9 "2020-05-21T10:41:12Z")

</div>

Remember sending a number as number and not as string.

![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/05d6b9ecb0a2b759cfef100611f873dd149dc252.png)

Else post your flow.

---

<div class="post-metadata">

**Author:** ![carrero](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@carrero](https://discourse.nodered.org/u/carrero)\
**Post date:** [21 May 2020 10:44 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/10 "2020-05-21T10:44:25Z")

</div>

This is not working!: My flow is very simple jajaja, only a button connected to an ui control, could be the ui control not working?. Im so confused

---

<div class="post-metadata">

**Author:** ![carrero](https://avatars.discourse-cdn.com/v4/letter/c/e19adc/32.png) [@carrero](https://discourse.nodered.org/u/carrero)\
**Post date:** [21 May 2020 10:48 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/11 "2020-05-21T10:48:05Z")

</div>

Its so weird , now its working. If you do not create a node in a new group on the new tab, you can not move into it!

---

<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:** [21 May 2020 10:59 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/12 "2020-05-21T10:59:40Z")

</div>

here is a simple example

```auto
[{"id":"ad0f74f6.b94598","type":"ui_button","z":"c5c7d3cb.0545f","name":"","group":"520f753e.322f2c","order":1,"width":0,"height":0,"passthru":false,"label":"Go to X","tooltip":"","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"num","topic":"","x":210,"y":120,"wires":[["906f81af.036e7"]]},{"id":"ea29380f.7fc578","type":"ui_button","z":"c5c7d3cb.0545f","name":"","group":"784c5b3f.cb6174","order":1,"width":0,"height":0,"passthru":false,"label":"Go to Y","tooltip":"","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"num","topic":"","x":220,"y":220,"wires":[["906f81af.036e7"]]},{"id":"906f81af.036e7","type":"ui_ui_control","z":"c5c7d3cb.0545f","name":"","events":"all","x":420,"y":120,"wires":[[]]},{"id":"520f753e.322f2c","type":"ui_group","z":"","name":"Default","tab":"6cd21733.279a78","order":1,"disp":true,"width":"6","collapse":false},{"id":"784c5b3f.cb6174","type":"ui_group","z":"","name":"Default","tab":"b95fcd45.07afb","order":1,"disp":true,"width":"6","collapse":false},{"id":"6cd21733.279a78","type":"ui_tab","z":"","name":"Tab Y","icon":"dashboard","disabled":false,"hidden":false},{"id":"b95fcd45.07afb","type":"ui_tab","z":"","name":"Tab X","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [20 June 2020 11:10 UTC](https://discourse.nodered.org/t/how-can-i-change-tabs-with-button/27010/13 "2020-06-20T11:10:42Z")

</div>

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