How to make callbacks for randomly generated components

Dash Python
1

We are currently undergoing a project where we are creating a control panel that should affect several graphs/charts.

A problem that we are stuck on, is how to refer to the ids of randomly generated ids

html.H4(children=['Select your used currencies']),
dcc.Dropdown(id="currencyChooser",
                     options=[{'label': k, 'value': v} for k, v in final_dict.items()],
                     placeholder="Select a currency..",
                     multi=True),
                     html.Button("Submit", id="currencyBtn"),
                     html.Div(id="currencyOutput",
                                  children=[
                      
                                   ]),

So in the above html snippet, we have a dropdown with a list of currency names and currency codes.

@app.callback(
    dash.dependencies.Output("currencyOutput", "children"),
    [dash.dependencies.Input("currencyBtn", "n_clicks")],
    [dash.dependencies.State("currencyChooser", "value")]
)
def addCurrency(n_clicks, value):
    result_divs=[]
    result_divs.append(
        html.P(children="Select how each currency influences your procurement in %"))
    if value:
        result_divs.append(html.Button(("Submit"), id="currPercentBtn"))
        for i in value:
            result_divs.append(html.Div(id="currDiv" + str(i), children=[
                html.Li(id="currLi" + str(i), children=[i]),
                dcc.Input(id="currInput" + str(i),
                          className="currInputs", type="number")
            ])
            )
        return result_divs
    else:
        return html.P(children="Please select your used currencies!")

The above callback generates a button, then a div with an input and a list item.

Using the method above we generate the IDs of the dynamic components, using the value from the dropdown. So the ids will look something like “currDivUSD”, “currInputEUR”, “currInputUSD” and so on.

Now, we want to use the values from the generated inputs. E.G using the value from an input like “currInputUSD”, but we don’t know how to refer to these html components.

Is there a solution to this? We’ve looked at creating dynamic callbacks, but we don’t know if that would work or if it is the correct solution. Is there some other way to achieve what we want in Dash?

2

A fundamental aspect of Dash is that every callback you app will use needs to be defined before you start the app. This means that you can’t create new callbacks within a callback. But, if you disable callback validation, then you can create new layout fragments that contain IDs which callbacks reference, but these are callbacks have to already be created previously, so the IDs can’t be actually random.

This basically means you need to enumerate all possible callback combinations (in terms of potential input and output IDs) and define them programatically.

Here’s a description of this approach: Dynamic Controls and Dynamic Output Components

1 Like
3

Does someone know if this aspect of Dash is something that is worked on? I think it would open up so much more cool interactions if you could create a callback runtime.

4

it is being worked on right now. we should have something by the end of the year.

1 Like
5

Nice to hear! Excited to use it. Thx

6

Too bad our assignement is due in 3 weeks :sweat_smile: