Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How do I set tab visibillity from program?

Issue

I need help figuring out how to make only the first tab visible in my tab widget until a certain action is performed. I tried reading the documentation but could only find a manual method. I asked for help and was advised to set the Tab's Visibility setting to JS and reference a value in the Appsmith store, which worked. I learned something new and it solved my problem.

Resolution

To make only the first tab visible in an Appsmith tab widget until an action is performed, set the tab's Visible property to JS and reference a value in the Appsmith store. When the value in the store is set to TRUE, the tab will become visible.

Here's an example of the code that can be used to achieve this:



  1. Set up a variable in the Appsmith store:



$watches.tabVisibility = false;



  1. Set the Visible property of the first tab to JS and reference the store variable:



{{!$watches.tabVisibility ? true : false}}



  1. When the action is performed, set the value of the store variable to TRUE:



$watches.tabVisibility = true;

This will make the first tab visible and all other tabs hidden until the action is performed, at which point all tabs will become visible.