Save/load layout of dropdowns and values after page refresh or tab change

Dash Python
1

Hello,
I generate new Dropdowns via a Button and a Callback like this :

@app.callback(

    Output('category-dropdown', 'children'),

    [Input('add-item', 'n_clicks')],

    [State('category-dropdown', 'children')])

def category_dropdown(n_clicks, children): 

        new_dropdown = dcc.Dropdown(id={'type': 'filter-category','index':n_clicks },options=[{'label': i, 'value': i } for i in newlist]) 

        children.append(new_dropdown)

        return children

The Dropdowns are used to select data from a database.
This is working fine at the moment.

Now the problem: After refreshing the page or changing the tab the Dropdowns set back to 0. I managed to store the amount of n_clicks, but I don’t know how to loop through the callback.

Is it somehow possible to save and load the layout and the values inside the dropdown ?

Thanks in advance!

2

Hi Question19,

Perhaps this could help you:

Using the storage_type property.

3

Hi Eduardo! Thank you for your answer!
I already used the dcc.store to store the the amount of clicks, which is the amount of generated Dropdowns.
But how do I use this value after refresh to generate the dropdowns again?

4

I use a callback where the input is the value in dcc.store and the output is ‘my-dropdown’ ‘value’.
I do not know if there is a way to use the stored value directly like a global variable.

5

Yeah thanks, that would work for the value in the Dropdown.

But the main issue is this:
If I generate by clicking 5 times on my button, 5 dropdowns, I store the 5.
When I refresh, I lose the dropdowns. How do I use the 5 to generate the 5 dropdowns again?

6

Sorry I do not understand how your code works, normally the user selects directly from the dropdown and the value that the user selects I store in the dcc.Store.
Why if instead of saving the clicks you save the values that those clicks implies?

7

I have generated the buttons like in the documentation below.

To fill the dropdowns again with the stored values after refresh, I need to generate them before.
I hope it is clearer now. Sorry for the bad explanation.

8

Sorry but this exceeded my limited knowledge. :roll_eyes:
This code is bilding new dropdowns each time the user clicks the button.
If then the user select a value in the created dropdown you can save that value in a dcc.store. I think perhaps you can rebild the structure.
I can’t help on that. :thinking:

1 Like
9

See the persistence property of the dcc.Dropdown here:


I hope it helps.
10

Yes and I want to rebuild that dropdowns after refresh. Maybe somebody else has an idea.
Thank you for your help Eduardo!