Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Multi-Page App callbacks not registering

Hey all,

I am working on my first app, but I am having trouble with the routing and registering of callbacks for new pages.
I have read a few articles on the subject such as: URL Routing and Multiple Apps | Dash for Python Documentation | Plotly

Currently I have my main app.py:

from app2 import build as app2

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server
app.config.suppress_callback_exceptions = True


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

app.layout = html.Div([navbar, body])


@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/' or pathname == '' or pathname == '/index':
        return build_index_page()
    elif pathname == '/2':
        return app2.layout
    else:
        return html.H3('URL Error!')


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

And then I would like to build out sub apps / graphs that will be loaded into the “html.Div(id=‘page-content’)”

App2 is its own sub dir with init.py and build.py where build will generate the layout and callbacks to be loaded. build.py:

from app import app

#layout = build_body()
# initialize_callbacks(app)

layout = html.Div([
    html.H3('App 1'),
    dcc.Dropdown(
        id='app-1-dropdown',
        options=[
            {'label': 'App 1 - {}'.format(i), 'value': i} for i in [
                'NYC', 'MTL', 'LA'
            ]
        ]
    ),
    html.Div(id='app-1-display-value')
])


@app.callback(
    Output('app-1-display-value', 'children'),
    [Input('app-1-dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)

Eventually I would like to then make 2 other files, one to contain layout and one to contain the callbacks. You can see my original implementation commented out, but I just moved the code into build.py when it did not work. (The functionality was taken directly from the Dash example linked above.)

When I go to my second page, the content loads fine but the callback does not, so selecting an item from the drop down does not populate the div as it is supposed to.

Any help would be greatly appreciated! Thanks!

Changed title to multi-page since I have discovered in my reading that dash tabs are a different thing entirely.

The solution was to have app.py contain the above, put the remaining code into index.py and have index.py call app.py… If someone could explain why that works and my code didnt that would be great… haha

Hey all,
in case you need help with building a multipage app and deploying it to the web, I created a tutorial on it here.