How to get the parameters from URL

Using Streamlit
1

I am creating a streamlit app where i need to get the parameters from the url as below.
Localhost:8501/id=profile

Where id is the id of an html tag

I am using the bootstrap card with tabs
Where each tab has it ID and once the user select the tab its id i passed to the URL.

So my question is how to get the ID of the tab in order to display the content inside each tab.

2

Hi @leb_dev -

You can use st.experimental_get_query_params to get query parameters, and for setting you can use st.experimental_set_query_params

Best,
Randy

3

i tried to use st.experimental_get_query_params to get the query as below but it did not work .

code:


def card(ID,name,nickname,mother_name,bd,v1,v2,v3,v4):
    return f'''
            <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
                <div class="card-header">
                    <h5 class="card-title"style =" display:{v1};">name: {name}</h5> 
                    <ul class="nav nav-tabs card-header-tabs" data-bs-tabs="tabs">
                        <li class="nav-item">
                            <a class="nav-link active text-white bg-dark mb-3" aria-current="true" data-bs-toggle="tab" href="?id = profile">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link  text-white bg-dark mb-3" aria-current="true" data-bs-toggle="tab" href="?id =info">Info</a>
                        </li>
                    </ul>
                </div>
                <form class="card-body tab-content">
                    <div class="tab-pane active" id="?id = profile" aria-labelledby="#profile">
                        <h5 class="card-title">ID: {ID}</h5> 
                        <p class="card-text"style =" display:{v2};">nickname: {nickname }</p>
                        <p class="card-text"style =" display:{v3};">birthdate: {bd}</p>
                        
                   </div>
                   <div class="tab-pane" id="info">
                        <p class="card-text"style =" display:{v4};">mother_name: {mother_name}</p>      
                    </div>
                </form>
            </div>
        '''

if radioDB=="Search":
     df_result_search = pd.DataFrame()
     with st.sidebar.form(key='search_form',clear_on_submit= False):
            regular_search_term=st.text_input("Enter Search Term")
            if st.form_submit_button("search"):
                   df_result_search = df[df['name'].str.contains(regular_search_term)|
                   df['nickname'].str.contains(regular_search_term)|
                   df['mother_name'].str.contains(regular_search_term)]
                     
     rec = int(df_result_search.shape[0])
     st.write("{} Records ".format(str(df_result_search.shape[0])))
     num_rows = max(1, math.ceil(rec/4))

     dv = 'inherit'
     cards = []
                    
     for index ,row in df_result_search.iterrows():
            v1 = dv if row[1] is not None else 'none'
            v2 = dv if row[2] is not None else 'none'
            v3 = dv if row[3] is not None else 'none'
            v4 = dv if row[4] is not None else 'none'
            cards.append([
                      row[0],    
                      row[1],
                      row[2],
                      row[3],
                      row[4],
                     v1,v2,v3,v4])
                    
      # Show the card data.
      if len(cards):
           for r in range(num_rows):
                 num_cols = min(5, max(1, rec))
                 c = st.columns(num_cols)
                 for m in range(num_cols):
                         if len(cards):
                              mycard = cards.pop(0)
                              c[m].markdown(card(*mycard), unsafe_allow_html=True)   
                    
      query_params = st.experimental_get_query_params()
      st.write(query_params)

once i run the app 3 things happened:

  1. it display the cards with all its content where as what i want is to display 3 fields in the profile tab and 1 field in info tab.

  2. also once i press the the tab it refresh and open new tab in the browser for the same page with empty records with this URL . like so:http://localhost:8501/?id%20=info

  3. in the new opened tab it display

{
    "id ":[
      0:"info"
      ]
}

so how to fix this and where is the error in my code ???

4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.