Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

How to pass avariable from one layout to another

Hello everyone. I’ve seen many posts regarding the problem I am encountering but still, I cannot find a working solution.

I have a multi-page app for insertning data in a DB. In the first page the user has to choose a person, the layout is this:

selectLayout = html.Div(style={‘backgroundColor’: colors[‘background’]},
children = [
html.Div(children = [
html.Button(‘Select Patient’, id=‘select-patient-button’,
style = {‘width’: ‘20%’,
‘borderTop’: ‘1px solid #15908E’,
‘borderBottom’: ‘1px solid #15908E’,
‘borderLeft’: ‘1px solid #15908E’,
‘borderRight’: ‘1px solid #15908E’,‘color’: colors[‘text’]})
], style={‘textAlign’: ‘center’}),

html.Div([
        dcc.Dropdown(
            id='id-patient', value='',
            options=[{'label': 'Yes', 'value': 1},{'label': 'No', 'value': 0}],
            style={'width': '45%', 'display': 'None'},
            ),
        ],style={
               'color': colors['text'],
                'fontWeight': 'bold',
                'textAlign': 'center'
            }),                
html.Div(id='divId-patient',
         style={
        'color': colors['text']
        }),
        
html.Div(children = [ dcc.Input(id='id-patientId',  value = '', style={'display': 'None'})]),
         html.Div(id='divId-patientId',
         style={
        'color': colors['text']
        }),

html.Div(id='container-selectPatient')    
])

when the person is selected, the DB id is returned in the ‘id-patientId’ div through a callback.
Then I have another page with many tabs and the layout:

tabslayout = html.Div(style={‘backgroundColor’: colors[‘background’]},
children = [

dcc.Tabs(id="Tabs", children=[
    clinicalTab, comorbiditiesTab, medicationTab, bloodTestsTab,
    CTATab, operationTab, postOperationTab,followUpTab,
],style=tabs_styles),

html.Br(),
dcc.Link('Go back to home', href='/'),

html.Br(),
dcc.Link('Go to Select', href='/select'),

])

I still cannot find a way how to use the value of ‘id-patientId’ div from a callback of the second page to store the data properly

I’ve tried what is proposed here but it only works for callbacks of the same layout.

If someone has figured it out finally please share…
Thanks.

Im not sure what your problem really is? You have an index page which is always active, how about sing dcc.Store?

thanks a lot, i hadn’t realize the use of the index page