Multi-Tab Dash App : share data between two tabs

Question

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

dcc.Tabs(

            id="tabs",
            persistence=True,

            children=[


                 dcc.Tab(label="Tab1", value="tab1",
                         children=[dcc.Tabs(id="subtabs", 
                            children=[
                                      dcc.Tab(label='subtab1', value='subtab1'),
                                      dcc.Tab(label='subtab2', value='subtab2')
                            ],

                    )
                 ]),
            ],
        )

I calculate a value when a user clicks on a button, which is rendered in a component in subtab1.

# subtab1.py

layout = html.Div([

             dbc.Input(
                       id="value1",
                       persistence=True,
                      ),

             dbc.Input(
                       id="value2",
                       persistence=True,
                      ),
])

# Callback

@app.callback(Output('value1', 'value'),
              [Input('value2', 'value')])
def resetInput(value):

    return value

Now in subtab2.py, I'd like to pass this calculated value to a component that would render this value.

# subtab2.py

    layout = html.Div([
    
                 dbc.Input(
                           id="value3",
                           persistence=True,
                          ),

    ])

    # Callback

    @app.callback(Output('value3', 'value'),
                  [Input('value-from-subtab1', 'value')])
    def resetInput(value):
    
        return value

Is there a way to share data between different tabs? This would be a pretty useful feature for multi-page/tab dash applications.

Answer 1

I think this would be a great solution. Use the dcc.Store component to put the data in, and then read it back out. The first tab could output to it, and the second would read it.