Hi. I’ve looked through the user manual, and at all posts related to multi page apps. I think I’m missing the concept of making an object persist across multiple pages in html.
I would like to process some data on the initial ‘index’ page, and have it available to other tabs. In this example, I like the dataframe created on the index page to be available to page_1_layout and page_2_layout for further manipulation. Why doesn’t something like this work?
I have spent several days on this. So any help is appreciated. Thanks
import dash
import pandas as pd
import numpy as np
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.scripts.config.serve_locally = True
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’,className=“container”),
html.Div(id=‘data’,style={‘display’:‘none’})
])
index_page = html.Div([
html.Div(dcc.Dropdown(id =‘df’, options=[{‘label’:str(i), ‘value’: i } for i in [‘df1’,‘df2’]])),
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(dcc.Checklist(id ='dfdrop', values=[] )),
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)
@app.callback(dash.dependencies.Output(‘dfdrop’,‘options’),
[dash.dependencies.Input(‘data’,‘children’)
])
def option1(child):
df = pd.read_json(child)
return [{‘label’:i, ‘value’:i} for i in df.columns]
page_2_layout = html.Div([
html.H1(‘Page 2’),
dcc.RadioItems(
id=‘page-2-radios’,
options=[{‘label’: i, ‘value’: i} for i in [‘Orange’, ‘Blue’, ‘Red’]],
value=‘Orange’
),
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’)])
def page_2_radios(value):
return ‘You have selected “{}”’.format(value)
@app.callback(dash.dependencies.Output(‘data’,‘children’),
[dash.dependencies.Input(‘df’,‘value’)])
def create_df(val):
df = pd.DataFrame()
if val == ‘df1’:
df = pd.DataFrame(np.random.randint(0,100,size=(100,4)),columns=list(‘ABCD’))
if val == ‘df2’:
df = pd.DataFrame(np.random.randint(0,1000,size=(100,4)),columns=list(‘ABCD’))
return df.to_json()# Update the index
# You could also return a 404 "URL not found" page here
@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=True)
