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?
