Where do I put callback functions in a multi-page Dash app with inputs and interactive graph?

user_13638243 0
Viewed 2331

Hello beautiful community,

I am working a multi-page Dash app that take inputs from users and updates a dcc.Graph() accordingly.
I do not know where to place my callback functions.

  • In one file (‘app_1.py’) I have my first app’s layout.
  • In a second file (‘app_2.py’) I have my second app’s layout.
  • In a third file (‘home.py’) I have the layout for my home page.
  • In a fourth file (‘index.py’) I have my code linking both pages to a home page: 
    app.layout = html.Div([
           dcc.Location(id='url', refresh=False),
                 html.Div(id='page-content')
            ])
    @app.callback(Output('page-content', 'children'),
          [Input('url', 'pathname')])
    def display_page(pathname):
         if pathname == '/':
                 return home.layout
            elif pathname == '/simulation1':
                 return app_1.layout
            elif pathname == '/simulation2':
                 return app_2.layout
            else:
                return '404'

When I make a single page app, I usually place my callback function after my layout, but here, since my ‘index.py’ is only calling the layout, it does not retrieve the callback placed after it.

I was wondering if anyone know where I need to put my callback functions?

Thank you in advance.

plotly-dash callback python
1 Answers

For those who might need it in the future, I found the solution. Put your callback functions at the end of your 'index' file. Before the:

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