How to navigate to a certain segment based on user input?

Using Streamlit
1

Beginner here

I am taking user input for the number of articles they want to add as follows:

lin_num = st.number_input('How many articles would you like to add?', min_value=1)

and based on the input, I am creating different segments to take further user inputs as follows:

for i in range(0, lin_num):
        lin_position = st.text_input('Position', str(i + 1))
        article = st.selectbox('Which article would you like to add?', options=articles, key=str(i + 1))
        menge = st.text_input('Enter the Menge', value='0.0', key=str(i + 1))

Now, I also want to enable an option where the user can navigate to a particular article. For that, I am doing the following:

if st.sidebar.checkbox("Go to a specific article"):
        st.sidebar.subheader('Select the article you would like to see')
        specific_lin = st.sidebar.selectbox('Which LIN segment would you like to see?',
                                            [i for i in range(1, lin_num + 1)])

and this shows the list of articles the user has added in the form of a drop-down list.

Now, assuming that the user has added 50 articles and he wants to navigate to an article whose lin_position is 27 to change the value of menge. In such a case scrolling down to go to that particular article can be tedious. So, I would like to use the Go to a specific article checkbox so that the user can select article 27. When the user selects 27, I want the screen to automatically navigate to this particular article and all the related information like: lin_position, article, menge should be shown on the screen so that the user can check them and change them as required.

Is there a way this can be done?

Thanks in advance

1 Like
2

Hi. @Junkrat there are a number of ways to achieve it now.

  1. You can store this part of the state (i.e. which page you’re in) in a selectbox as shown in the Udacity demo.
  2. You can use @tvst’s SessionState hack but please note that this method is undocumented and may not work in the future.
  3. You can store state as a mutable object in the cache using the ignore_hash=True kwarg. (Here’s an example of how to do that.)
3

Hey @arraydude , Thanks for the reply. I looked at all the options and I am still unable to figure it out. Is it possible for you to explain it through a small example? Any one method would be fine

4

Hey @Junkrat, sorry for the late response.

This is what I meant:

import streamlit as st
import SessionState

state = SessionState.get(articles=[])

section = st.sidebar.selectbox("Select a section: ", ["Add an article", "View an article"], index=0)


def add_an_article():
    lin_num = st.number_input('How many articles would you like to add?', min_value=1)
    articles = ["a", "b", "c"]
    articles_to_be_added = []

    for i in range(0, lin_num):
        articles_to_be_added.append({})

        article_id = len(articles_to_be_added)

        articles_to_be_added[i]['position'] = st.text_input('Position', str(article_id))
        articles_to_be_added[i]['article'] = st.selectbox('Which article would you like to add?', options=articles,
                                                    key="article"+str(article_id))
        articles_to_be_added[i]['menge'] = st.text_input('Enter the Menge', value='0.0', key="menge_"+str(article_id))
        st.write("=================")

    if st.button("Save"):
        state.articles = articles_to_be_added

    st.write(state.articles)


def view_an_article():
    st.subheader('Select the article you would like to see')
    specific_lin = st.slider('Which LIN segment would you like to see?', value=0, min_value=0, max_value=len(state.articles)-1, format="%d")

    if state.articles[int(specific_lin)]:
        st.write(state.articles[int(specific_lin)])


if section == "Add an article":
    add_an_article()

if section == "View an article":
    view_an_article()
5

@arraydude I think that might not be what they’re after, I think they already have a large list that can be added but want to jump to parts on the page. Sorry if I’ve misunderstood.

@junkrat If you want a link to a position on an HTML page you can create hidden divs with IDs, then use a standard link to jump to them:

import streamlit as st


link_number = st.number_input("What subheading do you want to go to?", value=50)
st.markdown(f"<a href='#linkto_{link_number}'>Link to {link_number}</a>", unsafe_allow_html=True)

for i in range(100):
    st.markdown(f"<div id='linkto_{i}'></div>", unsafe_allow_html=True)
    st.subheader(f"Subtitle {i}")
    st.write(f"I am a thing {i}")

This should give you a link that jumps to the relevant element on the page.

3 Likes