How can i change tabs with button?

[carrero]

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!

[edje11]

Feed a ui_controle with a payload that contains the name of the tab you want to go to.

[carrero]

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

[bdbell]

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).

[{"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;

<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.

[dceejay]

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

[carrero]

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!

[dceejay]

err - you configure a button to send the number you want ?

[carrero]

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!

[edje11]

Remember sending a number as number and not as string.

Else post your flow.

[carrero]

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

[carrero]

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!

[dceejay]

here is a simple example

[{"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}]