How do I switch between tabs by using button clicks and control tab visibility?

[community-bot]

How can we switch between tabs using button widgets outside the tab widget?

Is it possible to navigate to a different page and select a specific tab based on the action from the button?

[vihar]

Navigating between tabs is super easy by configuring the Default Tab property on the Tab Widget.

For this specific use case on navigating via buttons, we could use the storeValue function to save the tab names we want to redirect to and update them on the Default Tab property. Here’s how it looks like:

Here, we have two tabs Tab 1 and Tab 2. On Tab 1 we use a button widget, its onClick property is set to:

{{storeValue('tagFlag','Tab 2')}}

We save the tagFlag variable as Tab 2.

Similarly on Tab 2 we set the button’s onClick property to:

{{storeValue('tagFlag','Tab 1')}}

Finally, on the Tab Widget’s Default Tab property we need to set:

{{appsmith.store.tagFlag}}

---

To navigate to a different page and choose a particular tab we can use the following logic:

On Page1 button’s onClick property:

{{navigateTo('Page2',{tab: "Tab 2"})}}

We use navigateTo function and query params to pass tab name.

On Page2 Tab Widget’s Default Tab property:

{{appsmith.URL.queryParams.tab}}

The following question is also discussed on How Do I Do X on Appsmith Session on our community call. Watch it here: How Do I Do X? - YouTube

[antoine]

Thanks for this post that helped me with my tabs.

I just want to notice that this method didn’t work for me, if the tag is already set to the wanted value, and though, the tab won’t update (in my case, the user change the tab without using the tag).

I made it work by setting the tag to a ‘dummy’ value immediately after setting it to the wanted value, like this ;

storeValue('datasetTabsFlag','My Datasets');
storeValue('datasetTabsFlag','default');