Introducing multipage apps! 📄

[DerinChiu]

I also found this problem and currently I’m using

<style>div[data-testid=stSidebarNav] {display: none !important;}</style>

instead.

[massimobrivio]

Hi.

Very interesting. This is an important feature.
But how to avoid that entered information on one page get lost when switching to another page?
Let’s say I have 2 pages: “settings” and “visualization”. In the first one I select all settings for plotting and in the second one I show the graph and do some animation.
Once I set everything in the first page and then move to the “visualization” page everything works but when I move back to the “settings” page (let’s say I want to update an entry) all the data that I previously entered are lost.

[ac3]

You can use session state to store variables from widgets across pages

[kseniaanske]

Hey @hagsted,

Thank you for your comment! We think that those characters aren’t being recognized as emojis. IIRC we use a manual regex to detect emojis, but maybe we should just go for a library instead? Likely less buggy and more future-proof (as more emojis are added to the standard). TDLR: It’s likely a bug. Please file it. Thank you!

(Cc: @vdonato)

[arnaud]

Hey @massimobrivio! Welcome to our forum!

As @ac3 said, you can use Streamlit’s session state to store data across app reruns. Session state is also preserved when changing page! So here’s what you could do:

In 00_🛠️_Settings.py:

import streamlit as st

colors = ["blue", "red"]
index = (
    colors.index(st.session_state.settings)
    if "settings" in st.session_state
    else 0
)
settings = st.selectbox(
    "What color for the visualization?", ["blue", "red"], index=index
)
st.session_state["settings"] = settings

In 01_🎨_Visualization.py

import streamlit as st

if "settings" in st.session_state:
    st.write("Here are the settings you chose...", st.session_state.settings)
else:
    st.write("No settings found. Head over to the settings page!")

Demo:

Let me know if that works. Hope it helps! More about st.session_state

[blz]

Very nice addition! Is there a way to share components, like a selectbox, across the different pages, in particular in the sidebar ? I managed to make it work by duplicating the code and keeping the choice in session_state but maybe there is a better way?

[arnaud]

Hey @blz - welcome on board!

Unfortunately, I can’t think of a better way than what you described when it comes to sharing UI components across pages within the sidebar. Maybe simply put these into a function so at least you are not duplicating code?

Curious if you would envision a better way to achieve that?

Let me know how that goes

[blz]

Hi @arnaud , thanks for the quick reply.

I couldn’t think of a better way and I am experiencing some limitations. I added a selectbox in the sidebar. In order to keep the selection across the pages I need to set a default index, the one corresponding to the last item selected.

The selection works fine the first time. From 2nd time I need to repeat it twice for it to work, it goes back to the previous item. Any idea what is happening?

Here is a minimal example, I hope it is clear: GitHub - blenzi/st_multipage_test: Test of multipage app with streamlit and selectbox in sidebar

[arnaud]

Hi @blz,

I have tried running your app and I don’t see where the issue is: whenever I choose a selection, it is successfully stored while switching pages (even more than once). See below:

If the issue persists, my suggestion is that you open a thread in the dedicated section “Using Streamlit” here to get more help

[blz]

Thanks @arnaud . The issue happens when you do a selection more than once in the same page. For example if you stay in “hello” and select B, then A again, it will go back to B.

[Ace]

Has anyone seen code or been able to reduce the whitespace above the individual pages in the sidebar? Alternatively, been able to expand the >>down arrow<< button by default.

I have 5 pages and have been attempting to list them all on the sidebar without clicking anything extra.

[Catpockets]

I absolutely LOVE this. My question is though are emojis the only thing I can put in the navigation buttons or can I use something a little more profesional looking like Bootstrap icons?

[LukeF]

I guess this has been noted already (I haven’t read every comment on this thread), but there is sometimes an annoying issue when using session state with multipage apps.

I have a home page (home.py) and one page in my “pages” folder (page1.py):

1. I initialize some session state objects in home.py
2. I navigate to page1. The session state objects persist :–)
3. I press refresh while I am on page1.
4. My app crashes because my session state objects from home.py no longer exist:
   'st.session_state has no key “now”. Did you forget to initialize it?

I guess this is expected, but does anyone have a nice solution to overcome his?

Tanks

[snehankekre]

@LukeF Would the following check in pages/page1.py work:

# pages/page1.py
import streamlit as st

if "now" not in st.session_state:
    st.session_state["now"] = ""

[LukeF]

Thanks @snehankekre
Yes, I ended up doing a similar thing, except I need the variable in session state for the function on the page.
So I did as you suggested but also printed a message to “click the home page first”.

Thanks.

[twelsh37]

Definitely need something simple like st.sidebar.hide/st.sidebar.show. As Tony says, lots of us have a login page where we hide the sidebar. And then when you get back into the app, you have to show it again manually. This should be able to be done programaticaly

[nishantseth]

Hi! This “multipage apps” layout works great. I would really appreciate if someone could help me with the following issue.

My current directory layout is like the following :-

arbitraryName
├── pages
│ ├── 01_Search.py
│ ├── 02_Analytics.py
├── app.py

Here, If i try to import a function from app.py in 02_Analytics.py, say:-
“from arbitraryName.app import graphData”

I get a “ModuleNotFoundError: No module named ‘arbitraryFunction’” error.

Please help me with either the correct way or a work-around for the same.

Thanks,
Nishant

[dataprofessor]

Hi @nishantseth, welcome to the community.

Can you try using the following in your 02_Analytics.py file:
from app import graphData

where app is app.py

Hope this helps.

[nishantseth]

@dataprofessor Perfect! My IDE gives an error for this saying that the module does not exist, however it works in the Streamlit app. Does the work! Thank you!

[mirfan899]

Any update on the editable dataframe?