Output different value based on condition with the help of dash.callback_context

Dash Python
1

Hello forum

I am trying to output a different value based on which input has fired.
For example when a button gets pressed I want to output a number and when another input got pressed like dropdown or radio button I want just output zero and to reset both buttons to zero.

html.Div(
id='buttons-output',
style={'display': 'none'}),

@app.callback(
    [Output(component_id='buttons-output', component_property='children'),],
    [Input(component_id='button-left', component_property='n_clicks'),
     Input(component_id='button-right', component_property='n_clicks'),
     Input(component_id='product-dropdown', component_property='value'),
     Input(component_id='radio-buttons', component_property='value')],
)
def update_buttons_output(left_button, right_button, dropdown_output, radio_output):
    ctx = dash.callback_context
    context_id = ctx.triggered[0]['prop_id'].split('.')[0]
    if context_id == 'button-left' or 'button-right':
        return [left_button - right_button]        
    else:
        return [0]

@app.callback(
    [Output(component_id='button-left', component_property='n_clicks'),
     Output(component_id='button-right', component_property='n_clicks')],
     Input(component_id='buttons-output', component_property='children')
)
def update_buttons(buttons_output):
    return buttons_output, 0

But this results in a circular dependency and in an infinite loop…
What’s the way to do this?

2

Actually i dont understand clearly, but if you mean you want to return something for different dropdowns for different cond, you can do this with if else only with multiple condition, like this.

Our scenario like this: if value is lower than 5, go to dropdown. If it is more than 10, go to radiobutton,
if its 10>x>5 than go to alert.

@callback1
input(x1,value)
output(dropdown,value)
def something(x)
if x>5:
a=x
else:
return x

@callback2
input(x1,value)
output(radiobuttton,value)
def something(x)
if x>10:
return x
else:
a=x

@callback3
input(x1,value)
output(alert,value)
def something(x)
if x>5 & <10:
return x
else:
a=10

Yea it is not so logical but it works :smiley:

3

Thanks for your reply @bilallozdemir

I figured it out by myself in the meantime.

button-left, button-right, product-dropdown and radio-buttons are inputs for the hidden div.
But only product-dropdown and radio-buttons are inputs for the two buttons.

Here is the updated code:

@app.callback(
    [Output(component_id='buttons-output', component_property='children'),],
    [Input(component_id='button-left', component_property='n_clicks'),
     Input(component_id='button-right', component_property='n_clicks'),
     Input(component_id='product-dropdown', component_property='value'),
     Input(component_id='radio-buttons', component_property='value')],
)
def update_buttons_output(left_button, right_button, dropdown_output, radio_output):
    ctx = dash.callback_context
    context_id = ctx.triggered[0]['prop_id'].split('.')[0]
    if context_id == 'button-left' or 'button-right':
        return [left_button - right_button]        
    else:
        return [0]

@app.callback(
    [Output(component_id='button-left', component_property='n_clicks'),
     Output(component_id='button-right', component_property='n_clicks')],
     [Input(component_id='product-dropdown', component_property='value'),
     Input(component_id='radio-buttons', component_property='value')]
)
def update_buttons(product_dropdown, radio_buttons):
    return 0, 0```