Dash multipages application don't work with 3 pages

I have a problem with my dash app multipages.when I work with 2 pages all is Ok but when I add a third page the container disappair.I have somme warning:dash.page_registry.values’ n’est pas reconnu en tant que commande interne ou externe, un programme

maybe you forgot to register the page in the code of that particular page

1 Like

HI @relaoudi welcome to the forums.

I guess you have a typo somewhere:

^^ this could not be found.

Hi @relaoudi !
Un francophone? Bienvenue sur le forum! :partying_face:

As pointed by @AIMPED I also suspect a typo somewhere, but without any code, hard to tell…

@AIMPED : ’ n’ actually n’ is part of the error message: “n’est pas reconnu en tant que commande interne ou externe…”
it’s more like:
'dash.page_registry.values' n’est pas reconnu en tant que commande interne ou externe,…
:grin:

1 Like

Haha, would be nice to speak french, I guess.

4 Likes

I have registered every page. the names of pages are well displayed at the sidebar=dbc.Nav .When I remove a page(file.py) it works and when I add it it does not work that’s to say the dash.page_container disappears

Could you post your code her? Otherwise it’s hard to help you IMHO.

here my main application app2.py:

import dash
from dash import Dash, html, dash_table, dcc, callback, Output, Input, State
import pandas as pd
import datetime
import plotly.express as px
import dash_bootstrap_components as dbc
import base64
from dash.dash_table.Format import Format, Scheme, Trim
from dash.dash_table import FormatTemplate
import plotly.graph_objects as go

today=datetime.datetime.today()
with open('image_gauche1.jpg', "rb") as image_file1:
    img_data1 = base64.b64encode(image_file1.read())
    img_data1 = img_data1.decode()
    img_data1= "{}{}".format("data:image/jpg;base64, ", img_data1)

with open('image_droite1.jpg', "rb") as image_file2:
    img_data2 = base64.b64encode(image_file2.read())
    img_data2 = img_data2.decode()
    img_data2 = "{}{}".format("data:image/jpg;base64, ", img_data2)   

app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.BOOTSTRAP],prevent_initial_callbacks=True,
         meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}])

sidebar = dbc.Nav(
            [
                dbc.NavLink(
                    [
                        html.Div(page["name"], className="ms-2"),
                    ],
                    href=page["path"],
                    active="exact",
                )
                for page  in dash.page_registry.values()
                
            ],
            vertical=True,
            pills=True,
            #className="bg-light",
            
)
app.layout = dbc.Container([
    dbc.Row([
       dbc.Col(
           html.Img(src= img_data1,width="auto",height=30),
       className="d-flex justify-content-start",
            xs=1, sm=1, md=1, lg=1, xl=1),
           
        dbc.Col (html.H1("Programme National pour l'Approvisionnement en Eau Potable et l'Irrigation 2020-2027",
                        style={'color': 'white', 'fontSize': 20}),
            
                 xs=9, sm=9, md=9, lg=9, xl=9, align="center"),
         dbc.Col(
             html.H2(f"{today: %B-%Y}",style={'color': 'yellow', 'fontSize': 15}),
         
              xs=1, sm=1, md=1, lg=1, xl=1,align="center"),
        
        dbc.Col(
            html.Img(src= img_data2,width='auto',height=30),
         className="d-flex justify-content-end",
               # width={'size':1, 'offset':0, 'order':'last'})
           xs=1, sm=1, md=1, lg=1, xl=1)
        
    ],style={'background-color': '#225C86','width':'100%','height':30},  justify="center"),# Horizontal:start,center,end,between,around
   

    dbc.Row(
        [
            dbc.Col(
                [
                    sidebar
                ], xs=3, sm=3, md=3, lg=2, xl=2, xxl=2,style={'background-color': '#F2F3F4'}),

            dbc.Col(
                [
                    dash.page_container,
                ], xs=9, sm=9, md=9, lg=10, xl=10, xxl=10)
        ]
    )
], fluid=True)

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

Did you try running the app with debug=True? Do you get any error?

Where is this code you remove/add?

I tried the code you provided with fake pages, I don’t have any error…
Did you put your pages in a ‘pages’ folder in the same level as your app2.py?
What did you use as arguments in dash.register_page() in your pages?

Hi, I found the solution, I had two callbacks using the same id.
Tanks for your help.

1 Like

I had similar issue and renaming a table_container id on the dropdown and callback Output ID has fixed it.

The question now is, why would that impact when the callbacks and dropdownds are in 2 different .py page files?

Hi @ctrl-alt-del and welcome to the Dash community :slight_smile:

This is a great question! Dash renders web applications, even one with multiple pages, as a single-page app. This makes navigation very fast. When the app starts, all of the pages and callbacks are loaded, so that’s why all the id’s need to be unique across the entire application.

With a multi-page app, which page is displayed is based on the URL. When you use the Pages feature, the callback for displaying the page based on the URL is handled by Dash - so you don’t have to write it yourself.

Thank you for confirming,I had assumed that was the reason, so for any component, dropdown etc it is necessary to have unique callback related ids for every page.

The one I needed to change was the table_container from the dropdown which fed into the output in the callback.

the input id’s did not seem to matter both set as dropdown.

I had a html.Div(id=‘table_container’) after the dropdown.

Very new to this so not sure if that is correct pattern.

I am displaying an dropdown and using the contents to filter the data frame and display a table. I use similar code on each, page.

I hope to eventually make the dropdown dynamic so I can filter on any column on one page from the same or use multiple drop downs, but the callbacks get complex I think and maybe too much so,