Structuring multi-page app template

Dash Python
1

Does anyone have a working multi-page template? I tried copying ‘Structuring a multi-page app’ from https://dash.plot.ly/urls and all I get is ‘404’.

I did find an example on github ( https://github.com/plotly/dash-recipes.git), but get the exact same thing.

Thanks in advance.

2

you can have a look at this example here…

or you can try this code on a single file…

import dash
import dash_core_components as dcc
import dash_html_components as html

print(dcc.__version__) # 0.6.0 or above is required

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'),
    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)


# 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)

hope this works like what you want…

3

ChrissDesy - thanks for the single file version, however I am trying to get the multi-file version working as linked in your Github. When I clone the environment and run it, I still get the ‘404’. There has to be a reason that the program can’t ‘see’ the directories.

4

I did find an example that works right out of the box:

My apologies if this was a sophomoric question, however i am learning Dash and have several dashboards that needed to be tied together. Starting with something that works makes this much, much easier to learn.

2 Likes
5

the ‘404’ error is returned when the URL is not provided a layout to render. I am guessing the error comes when you are on the URL “localhost:8050”.

add a handler for that in the callbacks…

your callback should look like this…

index.py file…

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/':
        return html.Div([
            dcc.Link('Go to App 1', href='/app1'),
            html.Br(),
            dcc.Link('Go to App 2', href='/apps/app2')
        ])

    if pathname == '/app1':
         return layout1
    elif pathname == '/apps/app2':
         return layout2
    else:
        return '404'

try those changes…

2 Likes
6

The first ‘if pathname == ‘/’:’ was the trick. It all seems to work fine now.

Thank you for the guidance and assistance. This is my first foray into dashboards, and the learning curve has been a bit steep at times.

1 Like