Navigation panel - can we have a button on the right hand side like 'Next' which automatically moves to the next 'page' in the navigation panel

Using Streamlit
2

Hey @vbard,

Sorry for the slow reply, but I have been working on a possible solution to this using just the standard Streamlit functions.

Essentially, this requires knowledge of using session state, that is to get the state of the app at a certain point and be able to increment or change this based on a click that the user does. This is currently not supported in Streamlit but there have been other posts that have created work arounds, and it is something that our team is working on implementing, hopefully in the near future. Here is a link to using session state workarounds: Multi-page app with session state

That being said, if your newer to using python (like myself) and session state seems a bit daunting I have made a bit of a hack that does seem to work.

import streamlit as st
import pickle as pkle
import os.path

# create a button in the side bar that will move to the next page/radio button choice
next = st.sidebar.button('Next on list')

# will use this list and next button to increment page, MUST BE in the SAME order
# as the list passed to the radio button
new_choice = ['Home','Resources','Gallery','Vision','About']

# This is what makes this work, check directory for a pickled file that contains
# the index of the page you want displayed, if it exists, then you pick up where the
#previous run through of your Streamlit Script left off,
# if it's the first go it's just set to 0
if os.path.isfile('next.p'):
    next_clicked = pkle.load(open('next.p', 'rb'))
    # check if you are at the end of the list of pages
    if next_clicked == len(new_choice):
        next_clicked = 0 # go back to the beginning i.e. homepage
else:
    next_clicked = 0 #the start

# this is the second tricky bit, check to see if the person has clicked the
# next button and increment our index tracker (next_clicked)
if next:
    #increment value to get to the next page
    next_clicked = next_clicked +1

    # check if you are at the end of the list of pages again
    if next_clicked == len(new_choice):
        next_clicked = 0 # go back to the beginning i.e. homepage

# create your radio button with the index that we loaded
choice = st.sidebar.radio("go to",('Home','Resources', 'Gallery', 'Vision', 'About'), index=next_clicked)

# pickle the index associated with the value, to keep track if the radio button has been used
pkle.dump(new_choice.index(choice), open('next.p', 'wb'))

# finally get to whats on each page
if choice == 'Home':
    st.write('this is home')
elif choice == 'Resources':
    st.write('here is a resources page')
elif choice == 'Gallery':
    st.write('A Gallery of some sort')
elif choice == 'Vision':
    st.write('The Vision')
elif choice == 'About':
    st.write('About page')

I was able to get this to work on my own computer running locally. This workaround should allow you to click the next button to move down your pages OR click on one of the radio button options to display that page.

HOWEVER CAVEAT CAVEAT CAVEAT:
I have found that occasionally you have to click a radio button 2 times to get it to actually display the page. As I said this is a bit of a hack because it’s kinda cheating how Streamlit reruns your script from top to bottom every time the user presses a button.

Happy Streamlit-ing!
Marisa

2 Likes