Callback through multipage

Dash Python
1

Hi,

I would like to code a multipage app, using this documentation URL Routing and Multiple Apps | Dash for Python Documentation | Plotly with the second example presented. What I try to do is to set a value in the first page, and use it in the second page. I have tried to store it like in the “Example 1” of this documentation Part 5. Sharing Data Between Callbacks | Dash for Python Documentation | Plotly , as a hidden div. But I can not manage to pass the callback to the second layout. What did I miss ? Is it possible with these simple ways ? Where can I find a quick example of a callback from a page updating an element from another page ?

Thanks,
Bill

2

Hey there Bill,

What I would do personally is use dcc.Store in place of a hidden div and attach it to the app.layout that way, no matter what page the user is on, the contents of the div should be accessible.

I took the example you brought up just now and changed a few things it worked for me. Basically, I added a dcc.store component onto app.layout with the id “index_input”, then I changed the callback for page1-content to include 2 outputs, the 2nd basically stores the value into the index_input.

Lastly, I changed the output of the callback for page-2.content, to include the selection from page 1 and page 2, this shows that page 2, does in fact “know” what he user selected in page 1. To use that value, all you need to do is add an additional input to a callback in page 2 with index_input to access this value.
Hope this helps.

Jon

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(name, suppress_callback_exceptions=True)

app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’),
dcc.Store(id=‘index_input’,storage_type=‘session’)
])

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.Output(‘index_input’,‘value’)],
[dash.dependencies.Input(‘page-1-dropdown’, ‘value’)])
def page_1_dropdown(value):
return ‘You have selected “{}”’.format(value),value

page_2_layout = html.Div([
html.H1(‘Page 2’),
dcc.RadioItems(
id=‘page-2-radios’,
options=[{‘label’: i, ‘value’: i} for i in [‘LA’, ‘NYC’, ‘MTL’]],
value=‘LA’
),
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(dash.dependencies.Output(‘page-2-content’, ‘children’),
[dash.dependencies.Input(‘page-2-radios’, ‘value’),
dash.dependencies.Input(‘index_input’, ‘value’)])
def page_2_radios(value,p1_input):
test = ‘You have selected’ + p1_input + ‘in page1 and ’ + value + ’ in page 2’
return test

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
# You could also return a 404 “URL not found” page here

if name == ‘main’:
app.run_server(debug=True)

3

Hi Jon,

Thank you very much, your idea is exactly what I was looking for and your example is of great help.

Thank you !