Black Lives Matter. Please consider donating to Black Girls Code today.

Multi-Page Apps and URL not displaying multi-page views

Question: Does the app.config.suppress_callback_exceptions = True setting have limitations on how many variable layout pages can be displayed? Dash provides example of this located at: https://dash.plot.ly/urls

A good example of this is “full-view” link in the vanguard-report app located at: https://vanguard-report.herokuapp.com/ This report returns the “full-view” consisting of the following return: overview,pricePerformance,portfolioManagement,feesMins,distributions,newsReviews

Thanks for any help on this.

~~ Vanguard- Report Display Page ~~

@app.callback(dash.dependencies.Output(‘page-content’, ‘children’),
1286 [dash.dependencies.Input(‘url’, ‘pathname’)])
1287 def display_page(pathname):
1288 if pathname == ‘/’ or pathname == ‘/overview’:
1289 return overview
1290 elif pathname == ‘/price-performance’:
1291 return pricePerformance
1292 elif pathname == ‘/portfolio-management’:
1293 return portfolioManagement
1294 elif pathname == ‘/fees’:
1295 return feesMins
1296 elif pathname == ‘/distributions’:
1297 return distributions
1298 elif pathname == ‘/news-and-reviews’:
1299 return newsReviews
1300 elif pathname == ‘/full-view’:
1301 return overview,pricePerformance,portfolioManagement,feesMins,distributions,newsReviews
1302 else:
1303 return noPage

However, this app doesn’t have callbacks outside of the layout. I’ve created an app where there are callbacks outside the layout and I can’t seem to get the returned “full-view” to display.

I’ve edited the below code showing what I’m trying to do by adding a “page_2_layout_pg2” variable and then adding it as a list for the return value.

     Example from dash with edits 
         https://dash.plot.ly/urls 

Import dash
import dash_core_components as dcc
import dash_html_components as html

print(dcc.version) # 0.6.0 or above is required

app = dash.Dash()

Since we’re adding callbacks to elements that don’t exist in the app.layout,

Dash will raise an exception to warn us that we might be

doing something wrong.

In this case, we’re adding the elements through a callback, so we can ignore

the exception.

app.config.suppress_callback_exceptions = True

app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])

index_page = html.Div([
dcc.Link(‘Go to Page 1’, href=’/page-1’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=’/page-2’),
])

page_1_layout = html.Div([
html.H1(‘Page 1’),
dcc.Dropdown(
id=‘page-1-dropdown’,
options=[{‘label’: i, ‘value’: i} for i in [‘LA’, ‘NYC’, ‘MTL’]],
value=‘LA’
),
html.Div(id=‘page-1-content’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=’/page-2’),
html.Br(),
dcc.Link(‘Go back to home’, href=’/’),

])

@app.callback(dash.dependencies.Output(‘page-1-content’, ‘children’),
[dash.dependencies.Input(‘page-1-dropdown’, ‘value’)])
def page_1_dropdown(value):
return ‘You have selected “{}”’.format(value)

page_2_layout = html.Div([
html.H1(‘Page 2’),
dcc.RadioItems(
id=‘page-2-radios’,
options=[{‘label’: i, ‘value’: i} for i in [‘Orange’, ‘Blue’, ‘Red’]],
value=‘Orange’
),
html.Div(id=‘page-2-content’),
html.Br(),
dcc.Link(‘Go to Page 1’, href=’/page-1’),
html.Br(),
dcc.Link(‘Go back to home’, href=’/’)
])

page_2_layout_pg2 = html.Div([ #ADDING A SECOND PAGE TO THE TAB
html.H1(‘Page 2’),
dcc.RadioItems(
id=‘page-2-radios’,
options=[{‘label’: i, ‘value’: i} for i in [‘Orange’, ‘Blue’, ‘Red’]],
value=‘Orange’
),
html.Div(id=‘page-2-content’),
html.Br(),
dcc.Link(‘Go to Page 1’, href=’/page-1’),
html.Br(),
dcc.Link(‘Go back to home’, href=’/’)
])

@app.callback(dash.dependencies.Output(‘page-2-content’, ‘children’),
[dash.dependencies.Input(‘page-2-radios’, ‘value’)])
def page_2_radios(value):
return ‘You have selected “{}”’.format(value)

Update the index

@app.callback(dash.dependencies.Output(‘page-content’, ‘children’),
[dash.dependencies.Input(‘url’, ‘pathname’)])
def display_page(pathname):
if pathname == ‘/page-1’:
return page_1_layout
elif pathname == ‘/page-2’:
page_2_pages = [page_2_layout, page_2_layout-2
return page_2_pages
else:
return page_1_layout, page_2_pages # RETURNING MULTIPLE PAGES

# You could also return a 404 "URL not found" page here

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css
})

if name == ‘main’:
app.run_server(debug=True)

There isn’t anywhere to edit my question so I just want to ensure clarity here. All I’m trying to do is return a page with multiple pages when using the config.suppress_callback_exceptions = True setting. I’m assuming this setting is why the app won’t return the “full-view” pages as show in the Vanguard report “full-view” referenced in the question.