# Share layout and dropdown values in Dash app multi pages (synchronize component values between pages)

**URL:** <https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [January 2, 2023, 3:02pm UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271 "2023-01-02T15:02:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![phuonghao145](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/phuonghao145/32/15805_2.png) [@phuonghao145](https://community.plotly.com/u/phuonghao145)\
**Post date:** [January 2, 2023, 3:02pm UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/1 "2023-01-02T15:02:48Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/5/d516d29002bbe2162732f3d8f05e9a4dde2a9378.png)

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 2, 2023, 3:07pm UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/2 "2023-01-02T15:07:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![phuonghao145](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/phuonghao145/32/15805_2.png) [@phuonghao145](https://community.plotly.com/u/phuonghao145)\
**Post date:** [January 3, 2023, 1:35am UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/3 "2023-01-03T01:35:49Z")

</div>

Are there any examples for it? Thanks

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 3, 2023, 2:00am UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/4 "2023-01-03T02:00:25Z")

</div>

Sure.

For the sharing data, you can check out here:

> **[Part 5. Sharing Data Between Callbacks | Dash for Python Documentation | Plotly](https://dash.plotly.com/sharing-data-between-callbacks)**
>
> Global variables will break your Dash apps. However, there are other ways to share data between callbacks. This chapter is useful for callbacks that run expensive data processing tasks or process large data.

For the navigation, you just need to put it in your app.layout and not in the pages individual layouts.

---

<div class="post-metadata">

**Author:** ![phuonghao145](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/phuonghao145/32/15805_2.png) [@phuonghao145](https://community.plotly.com/u/phuonghao145)\
**Post date:** [January 3, 2023, 4:15am UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/5 "2023-01-03T04:15:25Z")

</div>

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  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/9/094ff16448129aba6c423eff5c218e8be3d1121a.png).

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/8/081990d289b5f600acf1c309122cbff5a49cc5dc.png)

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  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/7/b7ab934d1d90c6abd79cf8443ca2bedc3fa0376c.png)  
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.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 3, 2023, 8:41pm UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/6 "2023-01-03T20:41:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![phuonghao145](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/phuonghao145/32/15805_2.png) [@phuonghao145](https://community.plotly.com/u/phuonghao145)\
**Post date:** [January 4, 2023, 2:30am UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/7 "2023-01-04T02:30:24Z")

</div>

I try this code, It save parameter in url

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/f/d/fdacc7219a904c4f2720490914005646005ed09c.png)

but when I F5 page, it will here

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/9/b9f405bc48ec45a7f4322797063877d48057c657.png)

this is my code  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/6/a653ab4463309ff1a9315b58ad42436625fd0c07.png)

app.py

```auto
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

```auto
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

```auto
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

```auto

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',
)

```

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 4, 2023, 2:37am UTC](https://community.plotly.com/t/share-layout-and-dropdown-values-in-dash-app-multi-pages-synchronize-component-values-between-pages/71271/8 "2023-01-04T02:37:51Z")

</div>

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.