Synchronizing dropdowns in a multi-page app

Dash Python
1

Hello,

I have a multi-page dash app where the script of each tab is in a separate file.

I have dropdowns in the first tab which are the same in the second tab. So, when a user selects a value for the one in the first tab and goes to the second tab. He should not select the value again.

I followed this approach: Is there a way to synchronize dropdowns across tabs, but it did not work when you have separated files.

files do not have access to the other components in other files.

2

@hadisotudeh I am looking for a solution to this exact same problem. Were you able to figure out a solution?

3

I think what you should try is save the selection of one dropdown into the session and then when loading the other dashboard, use this information to populate the dropdown of this dashboard. You should do this when the dashboard is initially loaded, i.e. hand over a function for the layout of your dash app.

From my understanding, when switching from one dashboard to another dashboard in the multi-page dash app, the dashboards have no way of communicating apart from the URL (you could also save the selection in the URL) or the session.

4

I am using dcc.Store with storage type session in one tab1.py to store the values. Then, in tab2.py, I use this component to read State. This doesn’t seem to work either.

Tab1. py 

# Store graph and data-table in dcc.Store component
@app.callback(Output("comps-store","data"),
             [
              Input("map-graph1","figure"),
              Input("comps-table","data"),
              Input("comps-button","n_clicks")
             ]
             )
def comp_store(map, table, n_clicks):

    # Store map-graph and data-table as dictionary.

     return {"map": map, "table": table, "price": "$25"}

Tab2.py 

# Callbacks
@app.callback([
                       Output("median", "value"),
                      ],
                      [
                       Input("submarket-select", "value")
                      ],
                      [
                       State("comps-store", "data")
                     ]
                   )
def datacard(submarket, store_data):

        if store_data:
            print("comps-store", store_data)

            return (store_data['price'])

Error: 

A nonexistent object was used in an `State` of a Dash callback. The id of this object is `comps-store` and the property is `data`. The string ids in the current layout are: [button-container, url, content, tabs, subtabs, page-content, tab_content, submarket-select, price-graph, market-graph]
5

What I could think about is that the state is scoped to the dashboard. That is, you can only every access the state from the dashboard that you originally attached it to.

It should not be hard to instead of using the session store, to use the session directly in your usecase. Have you tried that?

6

I am looking for a solution to this exact same problem. Were you able to figure out a solution?