How can i set a multiple layout in a webapp (multiple pages)

Dash Python
1

i want some pages to inherit the page layout and other without it how can i set that ?

import dash
from dash import Dash
from dash_bootstrap_components._components.DropdownMenuItem import DropdownMenuItem
from dash import html
from dash import dcc
from dash.dependencies import Input, Output, State
# import dash_auth
from dash import dash_table
import dash_bootstrap_components as dbc
from app import server
from dash_extensions import Lottie
from apps import index, app2, landing_page, Home, login
options = dict(loop=True, autoplay=True, rendererSettings=dict(
    preserveAspectRatio='xMidYMid slice'))

stat = 'https://assets4.lottiefiles.com/private_files/lf30_lyvbczgo.json'
vis = 'https://assets4.lottiefiles.com/private_files/lf30_lZDkKW.json'
application = 'https://assets8.lottiefiles.com/packages/lf20_7pzyukmv.json'
url_covid = 'https://assets5.lottiefiles.com/packages/lf20_xbeapo0i.json'
url_test = 'https://assets5.lottiefiles.com/packages/lf20_4ilboxgz.json'
url_image = 'https://assets5.lottiefiles.com/packages/lf20_wt7bupjp.json'
url_canada = 'https://assets5.lottiefiles.com/packages/lf20_CXxysN.json'
news = 'https://assets9.lottiefiles.com/packages/lf20_glclg2kr.json'
news2 = 'https://assets2.lottiefiles.com/private_files/lf30_4FGi6N.json'
news3 = 'https://assets2.lottiefiles.com/packages/lf20_Fr8Ziv.json'
# --------------------------------------------------------
external_stylesheets = [dbc.themes.QUARTZ]

app = dash.Dash(external_stylesheets=external_stylesheets)

# app layout
nav_item = dbc.Nav(
    [dbc.NavItem(dbc.NavLink("Home", href="#")),
     dbc.NavItem(dbc.NavLink("Data", href="#")),
     dbc.NavItem(dbc.NavLink("Persons with disabilities", href="#")),
     dbc.NavItem(dbc.NavLink("Health inscription", href="#")),
     dbc.NavItem(dbc.NavLink(
         "Vaccine", href="https://www.canada.ca/en/health-canada/services/drugs-health-products/covid19-industry/drugs-vaccines-treatments/vaccines.html")),
     dbc.NavItem(dbc.NavLink("Sources", href="#")),
     dbc.NavItem(dbc.NavLink("Contact", href="#")),
     dbc.NavItem(dbc.NavLink("login", href="/apps/login")),
     dbc.NavItem(dbc.NavLink("sign up ", href="#")),
     ]
)
# make a reuseable dropdown for the different examples https://github.com/facultyai/dash-bootstrap-components/blob/main/examples/multi-page-apps/navbar.py
dropdown = dbc.DropdownMenu(
    children=[
        dbc.DropdownMenuItem(dbc.NavLink("test", href="/apps/landing_page")),
        dbc.DropdownMenuItem(dbc.NavLink("index", href="/apps/index")),
        dbc.DropdownMenuItem(dbc.NavLink("app2", href="/apps/app2")),
        dbc.DropdownMenuItem(dbc.NavLink("app3", href="/apps/app1")),
        dbc.DropdownMenuItem(dbc.NavLink("Home", href="/apps/Home")),


    ],
    nav=True,
    in_navbar=True,
    label="Next",
)
# this is the default navbar style created by the NavbarSimple component
default = dbc.NavbarSimple(
    children=[nav_item, dropdown],
    brand="COVID-19 Dashboard",
    brand_href=app.get_asset_url("assets/favicon.ico"),
    sticky="top",
    className="mb-5",
    color="dark",
    dark=True,
)
app.layout = dbc.Container([
    dcc.Location(id='url', refresh=False),
    default,
    # # ----------------------------------------------Body ----------------------------------------
    dbc.Row([
            dbc.Col(html.H1('The real impact of Covid-19'),
                    className='mt-4 m-b-4')
            ]),

    dbc.Row([
        dbc.Carousel(
            items=[
                {"key": "1", "src": app.get_asset_url('1.jpg')},
                {"key": "2", "src": app.get_asset_url('2.jpg')},
                {"key": "3", "src": app.get_asset_url('3.jpg')},
            ],
            controls=True,
            indicators=True,
            className=''
        ),
    ]),
    # dbc.Row([
    #         dbc.Col([html.H1('Activity'),
    #                  html.Hr()]),
    #         ]),
    # dbc.Row([
    #     dbc.Card([
    #         dbc.CardHeader(
    #             Lottie(options=options, width="32%", height="32%", url=stat)),
    #         dbc.CardBody([
    #             html.P('SOMETHING HERE ', className='p'),
    #         ], style={
    #             'textAlign': 'center',
    #             'borderRadius': '100px',
    #             'size': '12px'
    #         })
    #     ], color="secondary", inverse=True),
    #     dbc.Card([
    #         dbc.CardHeader(
    #             Lottie(options=options, width="32%", height="32%", url=vis)),
    #         dbc.CardBody([
    #             html.P('SOMETHING HERE ', className='p'),
    #         ], style={
    #             'textAlign': 'center',
    #             'borderRadius': '100px',
    #             'size': '12px'
    #         })
    #     ], color="info", inverse=True),
    #     dbc.Card([
    #         dbc.CardHeader(
    #             Lottie(options=options, width="32%", height="32%", url=application)),
    #         dbc.CardBody([
    #             html.P('SOMETHING HERE ', className='p'),
    #         ], style={
    #             'textAlign': 'center',
    #             'borderRadius': '100px',
    #             'size': '12px'
    #         })
    #     ], color="primary", inverse=True),

    # ], className='RowActivity'),
    # dbc.Row([
    #     dbc.Col([html.H1('Latest News '), html.Hr()]),
    # ]),
    # dbc.Row([
    #         dbc.Card([dbc.CardHeader(
    #             Lottie(options=options, width="32%", height="32%", url=news)),
    #             dbc.CardBody([
    #                 html.P('COVID-19 Announcements ', className='p'),
    #                 html.Button([
    #                     html.A(
    #                         'Read More ', href='https://www.canada.ca/en/news/COVID-19-announcements.html'),
    #                 ], className='BtnNews'),
    #             ], style={
    #                 'textAlign': 'center',
    #                 'borderRadius': '100%',
    #                 'size': '12px'
    #             }),
    #         ], color="primary", inverse=True),
    #         dbc.Card([dbc.CardHeader(
    #             Lottie(options=options, width="32%", height="32%", url=news2)),
    #             dbc.CardBody([
    #                 html.P('COVID-19: Outbreak update ', className='p'),
    #                 html.Button([
    #                     html.A(
    #                         'Read More ', href='https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html'),
    #                 ], className='BtnNews'),
    #             ], style={
    #                 'textAlign': 'center',
    #                 'borderRadius': '100%',
    #                 'size': '12px'
    #             }),
    #         ], color="danger", inverse=True, className='CardNews1'),
    #         dbc.Card([dbc.CardHeader(
    #             Lottie(options=options, width="32%", height="32%", url=news3)),
    #             dbc.CardBody([
    #                 html.P('Info Base', className='p'),
    #                 html.Button([
    #                     html.A(
    #                         'Read More ', href='https://health-infobase.canada.ca/covid-19/'),
    #                 ], className='BtnNews'),
    #             ], style={
    #                 'textAlign': 'center',
    #                 'borderRadius': '100%',
    #                 'size': '12px'
    #             }),
    #         ], color="Warning", inverse=True, className='CardNews3'),
    #         ], className='RowNews'),
    dbc.Row([
        dbc.Col([html.H1('Prevention measures'), html.Hr()]),
    ]),
    dbc.Row([
            html.Div([
                html.Img(
                    src=app.get_asset_url('64753-covid-icon-use-a-mask.gif'), id='MesuresImg1'),
                html.Img(src=app.get_asset_url(
                    '64455-covid-icon-dont-touch-face.gif'), id='MesuresImg2'),
                html.Img(src=app.get_asset_url(
                    '64311-covid-icon-avoid-handshakes.gif'), id='MesuresImg3'),
            ], className='Mesures'),
            html.Div([
                html.Img(src=app.get_asset_url(
                    '64195-covid-icon-avoid-crowd-places.gif'), id='MesuresImg4'),
                html.Img(src=app.get_asset_url(
                    '64153-covid-icon-avoid-contacts.gif'), id='MesuresImg5'),
                html.Img(src=app.get_asset_url(
                    '34954-covid-19-distance.gif'), id='MesuresImg6'),
            ], className='Mesures'),
            html.Div([
                html.Img(src=app.get_asset_url(
                    '64371-covid-icon-avoid-travelling.gif'), id='MesuresImg'),
                html.Img(src=app.get_asset_url(
                    '64837-covid-icon-use-hand-sanitizer.gif'), id='MesuresImg8'),
                html.Img(src=app.get_asset_url(
                    '64592-covid-icon-stay-at-home.gif'), id='MesuresImg7'),

            ], className='Mesures'),

            dbc.Row([
                dbc.Col([html.H1('Symptoms'),
                         html.Hr()]),
                html.Div([
                    html.Img(src=app.get_asset_url(
                        '68203-covid-icon-sore-throat.gif')),
                    html.Img(src=app.get_asset_url(
                        '66245-covid-icon-shortness-of-breath.gif')),
                    html.Img(src=app.get_asset_url(
                        '65783-covid-icon-pneumonia.gif')),

                ], className='Mesures'),
                html.Div([
                    html.Img(src=app.get_asset_url(
                        '65725-covid-icon-hemoptysis.gif')),
                    html.Img(src=app.get_asset_url(
                        '65667-covid-icon-headache.gif')),
                    html.Img(src=app.get_asset_url(
                        '65627-covid-icon-fever.gif')),

                ], className='Mesures'),
                html.Div([
                    html.Img(src=app.get_asset_url(
                        '65357-covid-icon-fatigue.gif')),
                    html.Img(src=app.get_asset_url(
                        '65231-covid-icon-dry-cough.gif')),
                    html.Img(src=app.get_asset_url(
                        '65079-covid-icon-diarrhea.gif')),

                ], className='Mesures'),
            ]),


            ]),

    html.Div(id='page-content', children=[]),

    # ---------------------------------------------------Footer-------------------------------------
    html.Footer(children=[
        html.P(
            '@copyright2022', className=''),
        html.A(' Author Github', href='https://github.com/manelalayet19',
               target='_blank', className=''),
        html.A([
            html.Img(
                src=app.get_asset_url("universite_de_sherbrooke_logo.png"),
                # style={'height':'4%','width':'8%','float':'right','position':'relative','padding-top':'20px','padding-right':0}
            )], href="https://www.usherbrooke.ca/geomatique/", target='_blank'),
    ], className="bg-dark"),
], fluid=True)


@ app.callback(Output(component_id='page-content', component_property='children'),
               [Input(component_id='url', component_property='pathname')])
def display_page_url(pathname):
    if pathname == '/apps/index':
        return index.layout
    elif pathname == '/apps/app2':
        return app2.layout
    elif pathname == '/apps/login':
        return login.layout
    elif pathname == '/apps/landing_page':
        return landing_page.layout
    elif pathname == '/apps/Home':
        return Home.layout
    else:
        return application.layout


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

Hello @manelalayet,

It’s really hard to read your code and to understand what is going on.

Could you please wrap your code using this button </>?

3

i think it’s done. what i need is that some pages inherit the carrousel and the items in the index file i posted but others stay as they are i tried but is that possible ?.

4

It’s not really possible to have the carousel not be on all pages, but, what you could do is have a dcc.Location in your layout.

Then, you could use the url in a callback to either hide or show the carousel with the output to the style of it.

Something like:

if url in desired:
     return {“display”:”initial”}
else:
     return {“display”:”none”}
``

Where desired is the pages where you want the carousel to show.
5

Thank you so much :smiley:

1 Like