Using dcc.store to create a list of inputs

Dash Python
1

Hi,

I have been working on an app which will prompt a user to add factors to a list before running a script that gets data based on the user inputs. I have been having trouble trying to use dcc.store to store user inputs in a list and then update that list every time a user selected a factor to add. Has anyone had experience with this? I put some example code below.

factor_list = ['Price', 'Est_dps_fy_one', 'Est_dps_fy_two',]

lst = []


app.layout = html.Div(children=[
    html.H1(children='Test Project 📈'),
    html.Div(id="input area",style={'margin':'0 auto','width':'50%','background-color':'#99d6ff','padding':'15px','border-radius':'5px','border':'1px solid black'},
             children=[
             html.Div([
        dcc.Store(id='memory-output'),   
        html.Div([html.P("Factor Selector"),
        dcc.Dropdown(
        id="factor_selector",
        options=[{"label": x, "value": x} 
                 for x in factor_list],
        placeholder="Select a factors",
        multi=True
            
    ),
    ],
      className='two columns'
    ),
    dbc.Button('Click here to activate module', id='show-secret'),
    html.Div(id='memory-table'),
   
    ]),            
    ])
])


@app.callback(Output(component_id='memory-output', component_property='data'),
              Input("factor_selector", 'value'),
)
def on_click(factor_selector):
    return factor_selector
lst1 = lst.append(on_click())
@app.callback(Output('memory-table', 'children'),
              Input(component_id='show-secret', component_property='n_clicks'),
              Input('memory-output', 'data'),
             )
def on_data_set_table(n_clicks, data, lst1):
    if n_clicks is None:
        print('Add Data')
    else:
        #lst.append(data)
        return lst1
2

Im not sure :confused:, whether i have understood your post correctly, I guess is this what you are trying to achieve.

factor_list = ['Price', 'Est_dps_fy_one', 'Est_dps_fy_two',]

# lst = []


app.layout = html.Div(children=[
    html.H1(children='Test Project 📈'),
    html.Div(id="input area",style={'margin':'0 auto','width':'50%','background-color':'#99d6ff','padding':'15px','border-radius':'5px','border':'1px solid black'},
             children=[
             html.Div([
        dcc.Store(id='memory-output',data=[]),   
        html.Div([html.P("Factor Selector"),
        dcc.Dropdown(
        id="factor_selector",
        options=[{"label": x, "value": x} 
                 for x in factor_list],
        placeholder="Select a factors",
        multi=True
            
    ),
    ],
      className='two columns'
    ),
    dbc.Button('Click here to activate module', id='show-secret'),
    html.Div(id='memory-table'),
   
    ]),            
    ])
])

# This would append  every values that has been selected in a session to the component memory-output 
@app.callback(Output(component_id='memory-output', component_property='data'),
              Input("factor_selector", 'value'),
              State(component_id='memory-output', component_property='data')
)
def on_click(factor_selector,memory_data):
    if memory_data is not None:
        memory_data.append(factor_selector)
    return memory_data

# lst1 = lst.append(on_click())
@app.callback(Output('memory-table', 'children'),
              Input(component_id='show-secret', component_property='n_clicks'),
              Input('memory-output', 'data'),
             )
def on_data_set_table(n_clicks, data):
    if n_clicks is None:
        print('Add Data')
    else:
        #lst.append(data)
        # data has all the values that a user has selected in a session.
        return data
3

Hi Harish,

This is exactly what I need but for some reason the factors selected are not printing in the web app after being selected