Hi,
I have a multi page app and want to prevent reset of inputs when user navigates from a page back to the main page (Fig.1).
Usually that works well, but I have a problem when user collapses the drop down container rows (Fig.2), enters data into it and switches forth and back between pages, the collapse has not been preserved (Fig 3) and only the last entry (Fig. 4) has been stored.
The first question is, how can I modify my code, that the drop down container is still collapsed when the user navigates back to the main page? Ans second, how can all data in the drop down persist, not only the most recent as seen in Fig. 4?
Thanks for your help, much appreciated!
@callback(
Output('dropdown-container', 'children'),
Input('add-filter', 'n_clicks'),
State('dropdown-container', 'children'))
def display_dropdowns(n_clicks, children):
new_dropdown = dbc.Row([
dbc.Col([
dcc.Dropdown(
df1['Prozess'].loc[0:3],
placeholder='GK-Typ',
id={
'type': 'GK-dropdown',
'index': n_clicks},
persistence=True,
persistence_type='memory',
style={'text-align':'left', "width": "230px", 'margin-right':'25px'}),
dcc.Input(
id={'type':'GK-Menge',
'index':n_clicks},
type='number',
value=0,
persistence=True,
persistence_type='memory',
style={'margin-right':'25px'}),
dcc.Dropdown(
df1['Prozess'].loc[10:12],
placeholder='Transportmittel',
id={
'type':'Transportauswahl2',
'index':n_clicks},
persistence=True,
persistence_type='memory',
style={'text-align':'left', "width": "230px", 'margin-right':'25px'}),
dcc.Input(
id={'type':'Transport_input2',
'index': n_clicks},
type='number',
value=0,
persistence=True,
persistence_type='memory',
style={'height':'36px'}),
], style={'display':'flex', "width": "30%", 'margin-top':'12px'}),
dbc.Row([
dbc.Col([
dcc.Dropdown(
df1['Prozess'].loc[10:12],
placeholder='Transportmittel',
id={
'type':'Transportauswahl_trans',
'index':n_clicks},
persistence=True,
persistence_type='memory',
style={'text-align':'left', "width": "230px", 'margin-right':'25px', 'margin-top':'1px', 'margin-left':'0px'}),
dcc.Input(
id={'type':'Transport_input_trans',
'index': n_clicks},
type='number',
value=0,
persistence=True,
persistence_type='memory',
style={'height':'35px', 'margin-top':'1px', 'margin-left':'-0.5px'}),
], style={'display':'flex', "width": "30%", 'margin-left':'489px'})
])
])
children.append(new_dropdown)
return children
Fig.1: Main page, user can add input here
Fig. 2: User can collapse drop down container of rows of inputs/dropdowns on main page
Fig. 3: If user switches forth and back between pages and comes back to the main page, the collapse of the container has not been preserved, also not the first row entries
Fig.4: If user clicks on"+" drop down container collapses. It can bee seen that only the last row entry was stored in memory
