Dash-multi-page-app - pass data paths to page

Dash Python
1

We have a dash app that displays data, prior to loading you are prompted to select data location. We are trying to move to a multi-page app where the home page of the app loads and you can input the data locations. Once locations are entered, we would like the other pages to populate.

In a nutshell, we are trying to have the app pause loading of all pages but home page for the dash-multi-page-app, until data locations are selected.

2

HI @desertwrangler I did something similar in the past. I used a modal at startup for the selection.

app.py

import dash
from dash import Dash, dcc, html, Input, Output, State, callback
import dash_bootstrap_components as dbc

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

app.layout = html.Div(
    [
        dbc.Navbar(
            id='navbar',
            children=[
                dbc.NavbarBrand(
                    dcc.Link(
                        html.Div(
                            className='bi bi-house',
                            style={
                                'font-size': '25px',
                                'marginLeft': '5px',
                                'marginRight': 'auto',
                                'padding-bottom': '5px',
                                'color': 'white'
                            }
                        ),
                        href='/',
                    ),
                    className='me-auto'
                ),
                dbc.Button(id='btn', children='switch country'),
                dbc.Nav(
                    dbc.DropdownMenu(
                        [
                            dbc.DropdownMenuItem(
                                children=page['name'],
                                href=page['path']
                            )
                            for page in dash.page_registry.values()
                            if page['name'] != 'Not found 404'
                        ],
                        align_end=True,
                        label='Menu',
                        color='primary',
                        style={'marginLeft': '15px'},
                    ),
                    navbar=True,
                ),
            ],
            color='primary',
            className='mb-0',
            # ^^ no margin on bottom
            style={'height': '50px'}
        ),
        dbc.Modal(
            [
                dbc.ModalHeader(
                    dbc.ModalTitle('Please choose the country'),
                    close_button=False
                ),
                dbc.ModalBody(
                    children=dcc.Dropdown(
                        id='drop',
                        options=['Gambia', 'Senegal', 'Congo'],
                        className='dbc'
                    )
                ),
            ],
            id='modal',
            is_open=True,
            keyboard=False,
            backdrop='static',
            centered=True,
            size='xl'
        ),
        dcc.Store(
            id='chosen_country',
            storage_type='session'
        ),
        dash.page_container,
    ]
)


# modal for selection of country to open
@callback(
    Output('modal', 'is_open'),
    Output('chosen_country', 'data'),
    State('modal', 'is_open'),
    Input('drop', 'value'),
    Input('btn', 'n_clicks'),
    prevent_initial_call=True
)
def toggle_modal(is_open, drop_value, _):
    return not is_open, drop_value


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

home.py

from dash import html
import dash

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

layout = html.Div("Home")

page_1.py

from dash import html, Input, Output, callback
import dash

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


def layout_func(country):
    flag = {
        'Senegal': 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Flag_of_Senegal.svg',
        'Gambia': 'https://upload.wikimedia.org/wikipedia/commons/7/77/Flag_of_The_Gambia.svg',
        'Congo': 'https://upload.wikimedia.org/wikipedia/commons/6/6f/Flag_of_the_Democratic_Republic_of_the_Congo.svg',
    }[country]
    return html.Img(src=flag)


layout = html.Div(id='layout_page_1')


@callback(
    Output('layout_page_1', 'children'),
    Input('chosen_country', 'data'),
)
def do(country):
    return layout_func(country)

gif
mred layout func

2 Likes
3

thanks, I will give that a try today

appreciate it