Pass a parameter from one page to another page

Dash Python
1

I am developing a multipage application, what I would like to do is to pass a value defined in the first page to another page when I initiate it. E.g., I selected a date/time in the first page, then I used dcc.Link to the second page:
dcc.Link(‘Go to second page’, href=’/examples/second_page’)

How can I pass the selected date/time to second_page?

Thanks for your inputs.

1 Like
2

My Case: Single-Page App which loads different Layouts into my page-content div. In the Index App, i have a dcc.Store component, which stores data locally. I use it to store settings data on it. Check the component out,it might help. Else you might be able to give some parameters in the url.

1 Like
3

just put it as a variable in ther url querystring localhost:8050/examples/second_page?variable_1=‘my_value’

and recorver this value in the callbacks from this page with the url search paramerter like
Input(‘url’,‘search’) or State(‘url’,‘search’)

2 Likes
4

Hi… Request you to please elaborate. I am trying to create a dash where I have different pages. I am selecting one value on page 1. Then a message gets displayed- You have selected Value. Now I want that value to gets passed to Page 2, so that it says- You selected Value (Value on Page 1 using dropdown). But I am not able to do that. On running the dash, till Page 1, it works fine, but then on coming to Page 2, it shows updating.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

print(dcc.__version__)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


index_page = html.Div([
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
])


page_1_layout = html.Div([
    html.H1('Page 1'),
    dcc.Dropdown(
        id='page-1-dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='page-1-content'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
    html.Br(),
    dcc.Link('Go back to home', href='/'),
])

@app.callback(dash.dependencies.Output('page-1-content', 'children'),
              [dash.dependencies.Input('page-1-dropdown', 'value')])
def page_1_dropdown(value):
    return 'You have selected "{}"'.format(value)



page_2_layout = html.Div([
    html.H1('Page 2'),
    html.Div(id='page-2-content'),
    html.Br(),
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go back to home', href='/')
])

@app.callback(Output('page-2-content', 'children'),
              [Input('page-1-dropdown', 'value')])
def page_2(value):
    return 'You selected "{}"'.format(value)


# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_page


if __name__ == '__main__':
    app.run_server(debug=False,port=1244,host = '0.0.0.0')
1 Like
5

Hi!

Try this approach: How to pass values between pages in dash

6

when working with web pages we have querystrings that are use to pass values to a page via the url for example if you have a page that requires one value you can send this value via the url like this www.example.com?value=my_value.

In dash we can fire callbacks with querystrings with an Input(‘url’, ‘search’) which returns the string after the question mark (?) .
With this approach you can send parameters to the second page with the url and receive them in the second page as an input.

In order to achive this your callbacks in page one should modify you dcc.link elements specially the href property where you should have something like href=‘page2?value=my_value’ after the callback is fire

7

Will this work if I have a large data frame instead of my_value? @lahashh

8

If the data frame is large, it would probably be more efficient to save it on the server, e.g. in a file or a memory cache. You could then pass the file name/key via the url or via a Store component that is always present on the page.

9

Hi @Emil, thanks for your reply but I think that only holds for single page. Here, we are talking about multiple pages i.e. sharing data between layouts.

This is the challenge we are trying to solve (page-1-dropdown and page-2-content are parts of different layouts, see @ajeeteshmishra’s code above):

@app.callback(Output('page-2-content', 'children'),
              [Input('page-1-dropdown', 'value')])
def page_2(value):
    return 'You selected "{}"'.format(value)

In the tutorials, dash seems to require Input and Output come from the same layout.

So far @marlon’s How to pass values between pages in dash seem to be the only viable option. But I think that is a hack and the code is a little cumbersome. So, I am still looking for a better way to share data between pages.

10

Hi if you have a dataframe es better to store it in a temporary file and assign it a hash vaule (you can ingest the dataframe in hash 256 or 512 to obtain it and make sure the value is unique) as its name and pass this value as a parameter in the querystring. in the second page you can retrieve this dataframe from your server. The problem with a large dataframe is the time it will take to pull all this data from your server to the browser. However its the only way to do it that i have knowledge of since we dont have global variables in our browser

11

Wow, thank you! It helps me a lot!!