Multi-page dash application on Django server (django-plotly-dash library)

Dash Python
1

I have a multipage dash app that I want to serve it over Django with django-plotly-dash library. The structure of the main dash app is

app.py

import dash
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash

app = DjangoDash('dash_integration_id', suppress_callback_exceptions=True)

The index navigation file of the dash app is

index.py

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

from django_dash.app import app
# import all pages in the app
from django_dash.apps import app1, app2

# embedding the navigation bar
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 == '/app1/':
      
        return app1.layout
   
    else:
        return app2.layout


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

I call the Djanngo dash app in the app1.html

app1.html

{%load plotly_dash%}
<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
    <main>
        {% plotly_app name='dash_integration_id' ratio=0.45 %}


    </main>

</body>
</html>

My url.py in django app is

urls.py

from django.contrib import admin
from django.conf.urls import url
from django.urls import path, include
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static

# Loading plotly Dash apps script
import django_dash.index

urlpatterns = [
    
    url('^app1

In both pages I receive the app2 layout. But how can I differentiate the two python applications to call them on each html page, since the ID that DjangoDash gets is for running the whole application?

I have also advised the online documentation of django-plotly-dash (django-plotly-dash — django-plotly-dash documentation) in order to be informed for the different parameters that get the DjangoDash function (ex. da, slug) but without success., TemplateView.as_view(template_name=‘app1.html’), name=“app1”),
url(’^django_plotly_dash/’, include(‘django_plotly_dash.urls’)),
path(’’, TemplateView.as_view(template_name=‘app1.html’)),

url('^app2


In both pages I receive the app2 layout. But how can I differentiate the two python applications to call them on each html page, since the ID that DjangoDash gets is for running the whole application?

I have also advised the online documentation of django-plotly-dash (https://django-plotly-dash.readthedocs.io/en/latest/) in order to be informed for the different parameters that get the DjangoDash function (ex. da, slug) but without success., TemplateView.as_view(template_name='app2.html'), name="app2"),
    url('^django_plotly_dash/', include('django_plotly_dash.urls')),
    path('', TemplateView.as_view(template_name='app2.html')),
]

In both pages I receive the app2 layout. But how can I differentiate the two python applications to call them on each html page, since the ID that DjangoDash gets is for running the whole application?

I have also advised the online documentation of django-plotly-dash (django-plotly-dash — django-plotly-dash documentation) in order to be informed for the different parameters that get the DjangoDash function (ex. da, slug) but without success.

2

You’re mixing up layout and callback functions; layout is only called when apps are newly rendered.

You could either collapse everything into one app (probably not what you want if the content of app1 and app2 are non-trivial), or make both app1 and app2 be DjangoDash app instances and then switch between them - how you switch depends on what you are trying to achieve.

1 Like