I built an app with multiple tabs and subtabs structure. I am now having to add pages to the App structure. The app file structure looks like this:
index.py
app.py
-- Tabs
---- Tab1.py
---- Tab2.py
-- Pages
---- home.py
---- archive.py
requirements.txt
In my index.py, I have two separate callbacks for updating tab and page content. I run into issues when I update page content and then attempt to update tab content. i.e unable to clear page content or overwrite page content with tab content.
Here’s my code with callbacks:
app.layout = html.Div([
# header
html.Div([
html.H2("Product", style={"float":"center",
"margin-left":"40%",
"margin-top":"30px"}),
html.Div(
html.Img(src='logo-white.png', height="100%")
),
dcc.Link(
href=app.get_relative_path('/home'),
children='Home',
style={'paddingRight': 10}
),
dcc.Link(
href=app.get_relative_path('/archive'),
children='Archive',
style={'paddingRight': 5}
),
],
className="row header"
),
# tabs
html.Div([
dcc.Tabs(
id="tabs",
vertical=True,
className="mb-3",
persistence=True,
children=[
dcc.Tab(label="Tab1", value="Tab1",
children=[dcc.Tabs(id="subtabs", persistence=True, style={"margin-left":"30px"},
children=[dcc.Tab(label='SubTab1', value='subtab1'),
dcc.Tab(label='SubTab2', value='subtab'2)
],
)
]),
dcc.Tab(label="Tab2", value="Tab2"),
],
value="Tab1",
)
],
className="row tabs_div"
),
dcc.Location(id="url"),
html.Div(id="page-content"),
# Tab content
html.Div(id="tab_content", style={"margin": "0% 8.9%", "float":"left"}),
])
# App Callbacks
# # Render tabs/subtabs
@app.callback(Output("tab_content", "children"),
[
Input("tabs", "value"),
Input("subtabs", "value"),
Input('url', 'pathname')
],
)
def render_content(tab, subtab, pathname):
"""
For user selections, return the relevant tab
"""
page = app.strip_relative_path(pathname)
print(page)
if tab == "tab1":
return tab1.layout
if tab == "tab2" or page == 'home':
if subtab == "subtab1":
return subtab1.layout
if subtab == "subtab2":
return subtab2.layout
else:
return (dash.no_update)
# Render Page content - Home and Archive
@app.callback([
Output('page-content', 'children'),
],
[
Input('url', 'pathname'),
]
)
def display_page(pathname):
if page_name == 'archive':
return [archive.layout(), dash.no_update]
Current behavior: When clicking on archive page, I am unable to clear / update tab content.
Desired behavior: Render Tab/subtab content when clicking on home page link.
Default page:
Page: archive link
Page: home link
