Hi all,
I use Dash and created a multi-page Dashboard like the one below. Each Page will consist of 2 parts, siderbar and content, I want to share the layout of the sidebar between the pages, and share the dropdown, radio button, data, …
Is there any way to do that?
Thanks
Hello @phuonghao145,
For the navigation, bring it to the overall application’s layout.
As far as values, you’d have to probably use a dcc.Store for that. Unless you are referring to having those same buttons on the secondary page?
Are there any examples for it? Thanks
Sure.
For the sharing data, you can check out here:
For the navigation, you just need to put it in your app.layout and not in the pages individual layouts.
1 Like
oh, you seem to have misunderstood what I meant.
I want to share data between child apps, not between callbacks in an app . Currently, each page on the Dashboard I will design is a folder with 1 callbacks file and 1 layout file. And then I will import them one by one into a Flask server
.
My issue:
the sidebar of the pages is the same.
But I currently don’t know how to make these subfolders use the same dropdown values in the siderBar
Currently in each layout file of each of my subfolders there is a sider bar definition. It will have duplicate code, and when I switch to another page, I will have to choose the parameter again from the beginning.
Is there any way to fix it, I would greatly appreciate it.
I’d recommend having app layout that houses everything overall and then loading the other app’s into the overall app.
It takes a little bit more work on the initialization, but with how you’ve designed it, it seems like the way to go.
I try this code, It save parameter in url
but when I F5 page, it will here
this is my code
app.py
from dash import page_registry, page_container
from dash_extensions.enrich import (
DashProxy,
MultiplexerTransform,
html,
dcc,
)
app = DashProxy(
__name__,
transforms=[MultiplexerTransform()],
use_pages=True,
prevent_initial_callbacks=True,
suppress_callback_exceptions=True,
routes_pathname_prefix='/',
)
app.layout = html.Div(
[
html.H1("Welcome to SLT DB"),
html.Hr(),
page_container,
html.Div(
[
html.Div(
dcc.Link(f"{page['name']}", href=page["path"]),
)
for page in page_registry.values()
]
),
]
)
if __name__ == "__main__":
app.run_server(debug=False)
home.py
from dash import dcc, html
from dash import Output, Input, State, callback
import dash
import utils
dash.register_page(__name__, path="/")
layout = html.Div(
[
html.Label("Please selct parameters"),
dcc.Location(id='url', refresh=False),
utils.select_product,
utils.app_spanning_input,
html.Div(id="page1-out"),
]
)
@callback(
Output("page1-out", "children"),
Input("all-pages-year", "value"),
Input("select_cpu_type", "value"),
)
def update(year,cpu):
return f"The dropdown is {year}"
# @callback(
# Output('url', 'href'),
# Input('all-pages-year','value'),
# State('url', 'href'))
# def update_pathname(year,href):
# o = urllib.parse.urlparse(href)
# o = o._replace(path='/')
# q = dict(urllib.parse.parse_qsl(o.query))
# q['year'] = year
# query_string = urllib.parse.urlencode(q)
# o = o._replace(query=query_string)
# a= o.geturl()
# return o.geturl()
sbin_analysis.py
from dash import dcc, html
from dash import Output, Input, State, callback
import urllib
import dash
import utils
dash.register_page(__name__, path="/SBin_Analysis")
layout = html.Div(
[
html.Label("SBin_Analysis"),
dcc.Location(id='url', refresh=False),
utils.select_product,
utils.app_spanning_input,
html.Div([
dcc.RadioItems(
id = 'select_product_plant',
options=[{'label':name, 'value':name} for name in ['ATT','ATK']],
value='ATK',
labelStyle={'display': 'inline-block'},
),
]),
html.Div(id="page3-out"),
]
)
@callback(
Output('url', 'href'),
Input('all-pages-year','value'),
Input("select_cpu_type", "value"),
Input('select_product_plant','value'),
State('url', 'href'))
def update_pathname(year,cpu,plant,href):
o = urllib.parse.urlparse(href)
o = o._replace(path='/SBin_Analysis/')
q = dict(urllib.parse.parse_qsl(o.query))
q['all-pages-year'] = year
q['select_cpu_type'] = cpu
q['select_product_plant'] = plant
query_string = urllib.parse.urlencode(q)
o = o._replace(query=query_string)
href = o.geturl()
return href
@callback(
Output('all-pages-year', 'value'),
Output('select_cpu_type', 'value'),
Output('select_product_plant','value'),
Input("url", "href"),
State('all-pages-year','value'),
State("select_cpu_type", "value"),
State('select_product_plant','value'),
)
def update_general_value(href,year,cpu,plant):
years = range(2010, 2023)
o = list(urllib.parse.urlparse(href))
q = dict(urllib.parse.parse_qsl(o[4]))
pathname = o[2]
if(q!={}):
if(q['select_product_plant']=='None'):
plant = q['select_product_plant']
if(q['all-pages-year']=='None'):
year = q['all-pages-year']
if(q['select_cpu_type']=='None'):
cpu = q['select_cpu_type']
return year,cpu,plant
@callback(
Output("page3-out", "children"),
Input("all-pages-year", "value"),
Input("select_cpu_type", "value"),
)
def update(year,cpu):
return f"The dropdown is {year}"
utils.py
import dash_html_components as html
import dash_core_components as dcc
years = tuple(range(2010, 2023))
today = datetime.now().date()
day = Date(today)
start, end = day.get_start_end_of_this_week()
print(start, end)
app_spanning_input = dcc.Dropdown(
options=years,
id="all-pages-year",
persistence=True,
persistence_type = 'memory',
)
select_product = dcc.Dropdown(
options=('Siryn','Quicksilver','Mystique'),
id="select_cpu_type",
persistence=True,
persistence_type = 'memory',
)
Just because it saves in the url doesn’t mean that it loads when refreshed.
You have to get the layout to reference the search query when either using in the layout or a callback.