I wanted to ask if there is a functionality that while working with tabs lets you block some of them till a condition happens

🎈 Using Streamlit
1

Hello everyone,

I wanted to ask if there is a functionality that lets you block some tabs till a condition happens.

Imagine my Streamlit App works as a “flow app”, that needs the code in the first tab already ran to make the second tab code work, so it doesn’t give errors.
I wanted to know if there is any way to “block” some tabs till a condition happens in the previous tab (like clicking a button, for example), so my app doesn’t break.

I would need this so the user of the app (not me, I already know that I shouldn’t click next tab if the current tab code is not done running) cannot break it while clicking other tabs.

Thank you in advance!

2

Hi @Monica_de_Santos_Rod, why not try using the StepperBar as an alternative: extra-streamlit-components ¡ PyPI

You can have a session variables (either a common list for all the steps /tabs you have OR individual variables for each step /tab), each equating to True / False, to indicate that a step is complete or not. That way the user will need to complete the previous step before going on to the next step.

Cheers

Cheers

3

Thank you @Shawn_Pereira !
I assume that executing your response would make the second tab not work after clicking it, but I would like to find a way to “ban” the user of clicking this second tab, in order to not change tabs till this session state variable == True.
Is it possible to achieve this?

Thank you in advance!

4

Hi @Monica_de_Santos_Rod, with the StepperBar component, you will be able to force the user to choose the 2nd option only after the 1st option is completed… You will need to pip install this component first (from the location mentioned above).

If you still want to use st.tabs, you can’t prevent / ban a user from clicking on a tab, but you can prevent showing or show details in the 2nd tab, based on if a result is achieved in the 1st tab.

Cheers

5

This is a funny use case!

You could hack this with tabs and session_state too btw. Here’s a demo:

https://playground.streamlit.app?q=tabs-as-steps

Hope that helps,

1 Like
6

Thank you @arnaud and @Shawn_Pereira for your answers and the demo!
I wanted to ask also for the same thing but for multipage apps, so instead of tabs if would be the different pages. Is this possible?

Thank you!

7

Yes @Monica_de_Santos_Rod, for non-traditional multi-page apps, you can use components like Hydralit’s Option bar (hydralit-components · PyPI) or Streamlit-option-menu (Create a Multi-Page App with the New Streamlit-Option-Menu Component | by My Data Talk | CodeX | Medium) to navigate to different pages.

Cheers

8

Thank you ! @Shawn_Pereira
I’m already using Streamlit Multipage-app.
Could you tell me the exact name of the functionality to block the pages with Hydralit or the Option-Menu Component? (I’ve been looking at the documentation but couldn’t find it)

Thank you again!

9

Hi @Monica_de_Santos_Rod, one simple option is to simply check if the required steps have been taken, and if not then use st.stop() to keep the rest of the page from running. You can even add a “Back” button using streamlit extras https://extras.streamlit.app/Switch%20page%20function