Dynamic dropdown options calling callback function

Question

I am trying to create a dropdown menu with dash core component in python. The dropdown menu should have dynamic options, and the selections of the dropdown menu would affect other callback functions.

The problem with my code isn't the logic within the functions. The function generating the options within the dropdown menu returns the correct stuff.

I looked at other answers on other sites that said to define the dropdown menu with dynamic options like this

dcc.Dropdown( id="dropdown_id",multi=True,placeholder="Select an Option", ),

While the official plotly site says to include an id in the dropdown menu definition for it to call a callback function every time it is changed

You can probably see my problem now. Since there are 2 id fields within the dropdown menu definition (one for generating the options, the other for calling a function) it is giving me a keyword argument repeated error.

Wondering if anyone can help me out.

Code for reference:

@app.callback(
[Input('my-date-picker-single', 'date'),],
[Output('industry_groups', 'data')])
def get_industry_grps(date):
    ...some operations...
    return out = [
                  {'label': 'abc', 'value': 'abc'},
                  {'label': 'def', 'value': 'def'},
                  {'label': "ghi", 'value': "ghi"},
                  {'label': 'jkl', 'value': 'jkl'}]



html.Div([
          dbc.FormGroup(
                       [
                       dbc.Label("Industry Filter:", width=2, align='center',),
                       dbc.Col(
                       dcc.Dropdown( id='industry_groups', #(output of the callback function above)
                                     value=['abc', 'def', "ghi", 'jkl'],
                                     id="portfolio_views_exposure_industry_dropdown", #(function to be called after selections within dropdown menu)
                                            multi=True
                                            ), ...........style stuff #(deleted to save space)


@app.callback(
    [Output(...)],
    [...
     Input('portfolio_views_exposure_industry_dropdown', 'value'),
     ...
     ])
@cache.memoize(timeout=TIMEOUT)
def update_portfolio_utilization_hist_callback(..., industry_group, ...):
    ...some operations using industry_group

You only need one ID per component. In the callback definition, just use the same ID and reference the prop you want, either options or value. — coralvanda
– coralvanda, Commented Feb 4, 2022 at 1:36
@coralvanda Can you elaborate? Which callback definition? How can I use the same ID? 'value' in the second callback definition is the selections the user made in the dropdown menu, while (assuming by options you mean data) are the possible selections within the menu. One is upstream and the other downstream so how do I use the same ID — kinskrig
– kinskrig, Commented Feb 4, 2022 at 3:29

kinskrig · Accepted Answer · 2022-02-04 05:02:10Z

1

I got the answer. @coralvanda was correct. Took a look at the documentation and added a dummy_div in front of the dropdown menu to initialize the callback function. This is what I got:

    @app.callback(
    [Input('dummy_div', 'children'),
    Input('my-date-picker-single', 'date'),],
    [Output("portfolio_views_exposure_industry_dropdown", 'options'),
    Output("portfolio_views_exposure_industry_dropdown", "value")])
    def get_industry_grps(date):
        ...some operations...
        out1 = [{'label': 'abc', 'value': 'abc'},
               {'label': 'def', 'value': 'def'},
               {'label': "ghi", 'value': "ghi"},
               {'label': 'jkl', 'value': 'jkl'}]
        out2 = ['abc','def','ghi','jkl']
        return out1, out2
    
    
    html.Div(id='Dummy_div') #added to initialize get_industry_grps, otherwise it doesn't run until manually interact with the date picker
    
    html.Div([
              dbc.FormGroup(
                           [
                           dbc.Label("Industry Filter:", width=2, align='center',),
                           dbc.Col(
                           dcc.Dropdown(
id="portfolio_views_exposure_industry_dropdown",
multi=True), ...........style stuff #(deleted to save space)
    
    
    #... everything else is the same

answered Feb 4, 2022 at 5:02

kinskrig

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coralvanda Over a year ago

Nice work here!

Collectives™ on Stack Overflow

Dynamic dropdown options calling callback function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related