Two Different Tabs

sam10 · 2020-06-11T22:10:55.193Z

Hi,

I’m new to Bubble, and I’m trying to add a new tab at the top called ‘Manage,’ which is separate from Dashboard, but it’s showing up as if it’s the same. How do I make them separate, so when I click Manage on the right side, the manage tab shows up, and when I hit Dashboard on the left side, the Dashboard shows up.

https://fscltest.bubbleapps.io/version-test/account?debug_mode=true

Thanks

ambroisedlg · 2020-06-11T22:38:12.683Z

Hey @sam10

You need to create custom states and conditions on elements to make it work

Here is the demo: https://ambroisetestapps.bubbleapps.io/version-test/tabs?debug_mode=true
And the editor: https://bubble.io/page?type=page&name=tabs&id=ambroisetestapps&tab=tabs-1

Hope that helps

sam10 · 2020-06-11T22:48:09.359Z

@ambroisedlg Thanks Im trying to figure it out. I need to add a new state. What would the state type be?

ambroisedlg · 2020-06-11T22:49:38.100Z

@sam10 Have a look on the group Main (the one with both tabs in it). The state is “Tab” which is of type Number

sam10 · 2020-06-11T22:52:24.322Z

@ambroisedlg I can’t seem to get Manage to show as a tab on the top, and therefore I can’t test it, do you know what to do to show the ‘Manage’ Tab at the top?

ambroisedlg · 2020-06-11T22:55:47.359Z

@sam10 I’m not sure I understand why you can’t show the tab, can you share your editor in view mode?
The structure is:

Group Main is the group that includes two other sub-groups: Dashboard and Manage.
When a sub-group is clicked, it changes the state “Tab” of Main to either 1 (for Dashboard) or 2 (for Manage)
Both sub-groups have conditions depending on the “Tab” state

sam10 · 2020-06-11T22:57:19.090Z

@ambroisedlg here you go
Design:https://bubble.io/page?type=page&name=account&version=test&id=fscltest&tab=tabs-1
Workflow: https://bubble.io/page?type=page&name=account&version=test&id=fscltest&tab=tabs-2

ambroisedlg · 2020-06-11T23:14:14.052Z

@sam10

My state Tab of type Number (1 and 2) was only an example. It seems you are using a current state of type Text on the Dashboard Menu Desktop, which works too. But then in your “When Button Manage is clicked” workflows, you should set this to
Element : Dashboard Menu Desktop
Custom state : current
Value : manage

tabs-state21198×342 41.8 KB
You currently have the same conditions (When current is dashboard) on both the Dashboard button and Manage button in your Desktop Menu Dashboard buttons. The condition for the Button Manage should be “When current is manage”
Same thing on the Group Manage, you currently have “When current is dashboard > This element is visible”. It should be “When current is manage > This element is visible”