Sharing data between Multi-page Apps

Dash Python
8

I just tested to get value of dropdown from index page to other pages. Here is app layout. (App entry point is index.py)

Multipage
 |-- app.py
 |-- index.py
 |-- apps
      |-- app1.py
      |-- app2.py
      |-- __init__.py

app.py

import dash

app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server

index.py

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

from app import app
from apps import app1, app2


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content',children=dcc.Dropdown(id='dd',options=[
            {'label': 'From Index Page - {}'.format(i), 'value': i} for i in [
                'PivotPy', 'PivotPy-Dash', 'Vasp2Visual'
            ]])),
    html.Div(id = 'display-page'),
    dcc.Link('Go to App 1 ', href='/apps/app1'), html.Br(), html.Br(),
    dcc.Link('Go to App 2 ', href='/apps/app2')
        ])


@app.callback(Output('display-page', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
    else:
        return ''

if __name__ == '__main__':
    app.run_server(debug=True)

app1.py

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

from app import app

layout = html.Div([
    html.H3('App 1'),
    html.Div(id='d2')
])

@app.callback(Output('d2','children'),[Input('dd','value')])
def return_1(value):
    print("App 1 Clicked with value {}".format(value))
    return html.H1("App 1 Clicked with value {}".format(value))

app2.py

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

from app import app

layout = html.Div([
    html.H3('App 2'),
    html.Div(id='d1')
])

@app.callback(Output('d1','children'),[Input('dd','value')])
def return_2(value):
    print('Sleeping')
    sleep(2)
    print("App 2 Clicked with value {}".format(value))
    return html.H1("App 2 Clicked with value {}".format(value))

Result

plotly
plotly1612×1145 585 KB

Only the visible page updated as I see print out put in terminal.