✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Multiple callback inputs produced from values in a dropdown

I need to achieve as mentioned in the comment below. Really struggling to create multiple inputs which were created using number from a dropdown. Please help.

app.layout = html.Div(
html.Div(
dcc.Dropdown(
id=‘vehicle-number-dropdown’,
options=[{‘label’:’{}’.format(i+1),‘value’:’{}’.format(i+1)} for i in range(5)],
value=‘1’
),
),
html.Div(
id=‘vehicle_info’,
)
)

def generate_vehicle_info(vehicle_num):
return html.Div(
[
html.Div(
children=[
dcc.Input(
id=‘veh_capacity_{}’.format(vehicle_num),
type=“text”,
value=‘1000’,
),
],
)
],
)

@app.callback(
Output(‘vehicle_info’, ‘children’),
[
Input(“vehicle-number-dropdown”, “value”)
],
)
def generate_vehicle_info_input(n_vehicles):
if n_vehicles:
return [generate_vehicle_info(i+1) for i in range(int(n_vehicles))]
else:
return [generate_vehicle_info(1)]

@app.callback(
Output(‘agg_vehicle_data’, ‘data’),
[
Input(“veh_capacity_{}”.format(i), “value”) for i in ???
#Here I want all the ‘veh_capacity_{}’ inputs which were created based on ‘value’ from ‘vehicle-number-dropdown’
],
)
def generate_vehicle_info_input(n_vehicles):

Hello!

You should probably use pattern matching callbacks instead of Input(“veh_capacity_{}”.format(i), “value”): https://dash.plotly.com/pattern-matching-callbacks

If you replace id=‘veh_capacity_{}’.format(vehicle_num) by id={‘type’:‘veh_capacity’, ‘index’: vehicle_num} and use Input({‘type’: veh_capacity’, ‘index’: ALL}, ‘value’) it should work better.

Hope this helps

@Lheira Thank you so much! This is exactly what I was looking for.