Problem migrating von dash lab pages to dash pages

Dash Python
1

Hi,

with the new update I tryed to update my Dashboard to use multi-page from dash insteat of the option from dash labs.
Yet it does not work now and I do not know why.

Here ist my code.
app.py:

import dash

from dash import dcc, html, Output, Input, State

#import dash_labs as dl

import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])

and

for page in dash.page_registry.values():
    print("Name ", page["name"])
    print("Pfad ", page["path"])
print("Test")
print(dash.page_registry)


app.layout = dbc.Container(
    [header,
        navbar,
        dash.page_container,
        footer
    ],
    fluid=True,
)



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

The problem seems to me that there are no pages register which can be shown. Since the the first prints do not return.
In the pages I use the following code:

import dash
from dash import dcc, html ,callback
import dash_bootstrap_components as dbc
import os 


dash.register_page(__name__, path="/")

THIS_FOLDER = os.path.dirname(os.path.abspath(__file__))
befo_png= os.path.join(THIS_FOLDER, 'wand.jpg')

layout = html.Div([
   dbc.Row(
       dbc.Col(content, width={"size": 9, "offset": 1})
       , align="center"),
    dbc.Row([
        dbc.Col(card_befo, width={"size": 3, "offset": 1}),
        dbc.Col(card_wand, width={"size": 3, "offset": 0}),
        dbc.Col(card_test, width={"size": 3, "offset": 0})]
        
        , align="center"),
   
])

Thank you for your help!

2

Hi @lovitas Patrick,
:wave: Welcome to the community. With the latest version of Dash (v2.5.0 announcement coming shortly), you need to include use_pages=True. So it would look like this:

app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.BOOTSTRAP, 
dbc.icons.FONT_AWESOME])

Let me know if that worked.

3

Thank you! That worked. I would recommend to add this information to the official documentation.

4

I can now load my start page. But when I try to load pages with callbacks I get the:

Attempting to connect a callback Input item to component:
  "name_klick"
but no components with that id exist in the layout.

Error and the page will not load: 404 - Page not found

The output of

for page in dash.page_registry.values():
    print("Name ", page["name"])
    print("Pfad ", page["path"])

is without the page.

Layout within a page:

#############################################################################3.Layout

###3.1 Graphical Elements:

Infobox=dbc.Container([ dbc.CardHeader("Zusätzliche Informationen:"),
                dbc.CardBody([html.P("Card title", className="card-title",id='cardname1'),
                            html.P('Example P', className='card-text', id='cardyear1'),
                            html.P('Example P', className='card-text', id='cardeinw1'),
                            html.P('Example P', className='card-text', id='cardmänner1'),
                            html.P('Example P', className='card-text', id='cardfrauen1'),
                            html.P('Example P', className='card-text', id='cardgeschl_v1'),
                            html.P('Example P', className='card-text', id='carddalter1'),
                                ],className="card border-secondary divBorder d-grid gap-2")
])

Dropdown1=dcc.Dropdown(id='gem_ken', options=
    ['Durchschnittsalter','Einwohner','Geschlechterverhältnis','Jugendquotient','Altenquotient','Gesamtquotient','Bevölkerungsdichte'],
    value='Durchschnittsalter',className='dropdown')

Slider1= dcc.Slider(id='year_map_gem', min = 2011, max=2020,step =1, value=2020,className='slider',updatemode='drag', marks={
                               2011:'2011',2012:'2012',2013:'2013',2014:'2014',2015:'2015',2016:'2016',2017:'2017',2018:'2018',
                               2019:'2019',2020:'2020',})

Dropdown2=dcc.Dropdown(id='name_klick',options=[{'label': x,'value': x} for x in sorted(df_03['Name'].unique())],
             value='MĂĽnchen, Landeshauptstadt',className='dropdown')

###3.2 Adding Elements to a layout of the site:

layout = dbc.Container([
        dbc.Row([
            dbc.Col([ 
                    html.P(" ",className='text-left text-secundary mb-4'),
                    html.P("Gemeinden",className='text-left text-secundary mb-4'),
                    Dropdown1,
                    Slider1,                   
                    dcc.Markdown('',mathjax=True, id="text_ken"),
                    Dropdown2,
                    ], width={'size':9,'offset':1,'order':1})
                ],justify = 'start'),       
        dbc.Row([
            dbc.Col([ 
                html.P("Erhalten Sie die Kennzahlen zu dieser Gemeinde im Excel-Format",className=''),
                ], width={'size':3,'offset':0,'order':2}),
            dbc.Col([ 
                html.Button("Download", id="btn_xlsx"),
                dcc.Download(id="download-dataframe-xlsx"),
                ], width={'size':2,'offset':0,'order':3}),

        ],justify = 'start'),
        dbc.Row([           
            dbc.Col([   
                    dcc.Graph(id='graph_map_gem',figure={},className=''),
                    ], width={'size':5,'offset':1,'order':1}),
            dbc.Col([
                    dcc.Graph(id='entwick',figure={}),             
                    ], width={'size':4,'offset':0,'order':1}),
                ],justify = 'start'),
         dbc.Row([
            dbc.Col([
                    dcc.Graph(id='pyramid_graph',figure={}),
        ], width={'size':5,'offset':1,'order':1}),
        dbc.Col([
                    Infobox,
        ], width={'size':4,'offset':0,'order':1}),

        ],className='divBorder',justify = 'start'),
         dbc.Row([
            dbc.Col([
                    dcc.Graph(id='pyramid_graph2',figure={},className='divBorder'),
        ], width={'size':9,'offset':1,'order':1})
        ],justify = 'start'),

         ], fluid=True, className='body' )

Example-Error:

Attempting to connect a callback Output item to component:
  "cardfrauen1"
but no components with that id exist in the layout.

If you are assigning callbacks to components that are
generated by other callbacks (and therefore not in the
initial layout), you can suppress this exception by setting
`suppress_callback_exceptions=True`.
This ID was used in the callback(s) for Output(s):
  cardname1.children, cardyear1.children, cardeinw1.children, cardmänner1.children, cardfrauen1.children, cardgeschl_v1.children, carddalter1.children
5

Problem fixed with Dash 2.5.1

1 Like
6

I’m glad you solved it @lovitas . Here is the info about Pages in the docs. There is a lot more about Pages in there that might interest you.