Redirect to a different page through code

[Rajat1]

I am making a tickets dashboard where an api is fetching tickets from backend and I am using streamlit dataframes to show it in a tabular form on front end like this

st.dataframe(cook_tickets,use_container_width=True,hide_index=True,on_select=“rerun”,selection_mode=[“single-row”])

I want that when I select a row , the ticket_id in that row should be captured in url and I should be redirected to a different page. How can I do it?

[Dhruv4]

Hey, very interesting usecase you’re working with.

Here’s my suggestion here -
By using the callback - on_select method for st.dataframe - Streamlit Docs, you can define an executable here. Something like this -

def go_to_url(item : dict) -> None:
    base_url = f"https://example.com/product?id={item}"

    st.html ( f"""
    <script>
        window.open("{url}", "_blank");
    </script>
    """)

st.dataframe(on_select=go_to_url)

A more elegent approch here can be using Class (with inbuild dataclass, error handling) to ensure a good standard code.

Happy to hear your thoughts and results here.

[Rajat1]

Thank you for the suggestion…but I have already achieved the desired functionality with the use of “st_aggrid” . Saw Aggrid somewhere in the documentation so thought of trying it, it’s a pretty good thing, I used

“gb = GridOptionsBuilder.from_dataframe(dataframe)”

instead of standard st.dataframe and then used this kind of thing for selection

“gb.configure_selection(‘single’, use_checkbox=True, groupSelectsChildren=False, groupSelectsFiltered=False)”

for redirection used the classic js code

" redirect_js = JsCode(“”"
function(params) {
if (params.node.selected) {
window.open(params.data[‘View URL’], ‘_blank’);
}
}
“”") "

added a “View_Url” column stores the url for each tickets according to their id

if ‘id’ in A_tickets.columns:
A_tickets = A_tickets.copy()
A_tickets[‘View URL’] = A_tickets[‘id’].apply(lambda x: f"{base_url}{x}")

        if 'id' in B_tickets.columns:
            B_tickets = B_tickets.copy()
            B_tickets['View URL'] = B_tickets['id'].apply(lambda x: f"{base_url}{x}")

then I made the view_url column hidden and configured grid options to include the row selection event listener

if ‘View URL’ in dataframe.columns:
gb.configure_column(“View URL”, hide=True)

            # Configure grid options to include the row selection event listener
            gb.configure_grid_options(
                onRowSelected=redirect_js,  # Attach the JavaScript function to the row selection event
                domLayout='normal'
            )

I displayed A and B tickets in different tabbs so in each tab added aggrid configuration

with tab1:
st.subheader(“A Tickets”)
if not A.empty:
grid_options = configure_aggrid(A_tickets)

                AgGrid(
                    A_tickets,
                    gridOptions=grid_options,
                    update_mode=GridUpdateMode.NO_UPDATE,
                    allow_unsafe_jscode=True,  # Allows rendering of JavaScript
                    height=500,
                    width='100%',
                )
            else:
                st.info("No A tickets available.") 

This pretty much did the job for me…now when I am clicking the checkbox it is opening the info of ticket in a different tab

[Dhruv4]

Great approach Rajat ! it’s always a great day to learn something new

[Rajat1]

Thank You