How to add value of a dropdown while button clicked in python dash?

Question

My question is simple but I'm a beginner in Dash and UI development.

I create a Form like the below code: I have a dropdown with two values ( Node and Edge), a "+" button, and a textarea. A user wants to select a value from the dropdown then click the + button. The selected value must add to the textarea. If the user clicks to + button again, the value must add again. My code update the value in the textarea ad doesn't add the elected values again. What's wrong with my code?

import dash_bootstrap_components as dbc
import dash_core_components as dcc
fLayout = dbc.FormGroup([
    dbc.Form([
        dcc.Dropdown(options=[{'label':'Node','value':'Node'},{'label':'Edge','value':'Edge'}],id='fcolumns'),
        dbc.Button ('+',id='fcol_btn')
    ],inline=True),

dbc.Form([
        dbc.Button(['='],id='fequal'),
        dbc.Button (['>'],id='fgt')
    ],inline=True),

dbc.Form([
        dbc.Textarea(id='ftxt'),
        dbc.Button (['ok'],id='ftxt_btn')
    ],inline=True)
]) 


@app.callback(
    Output("ftxt", "value"),
    [Input("fcol_btn", "n_clicks"), Input("fequal", "n_clicks"),Input("fgt", "n_clicks")],
    [State("fcolumns", "value")],
)
def filter_update(fcol_btn, fequal, fgt,fcolumns):
   if fcol_btn>0:
       return fcolumns
   if fequal >0:
       return "="
   if fgt >0:
       return  ">"

horseshoe · Accepted Answer · 2021-12-27 09:57:56Z

1

Not sure that I fully understand what it is that you are trying to achieve. But the logic concerning the adding, the equal button etc. needs to be defined from you in the if statements according to what you want to get.

Find below a running version. Generally: You should initiate the values when you set up a component otherwise you need to capture all the nones.

import dash
import dash_bootstrap_components as dbc
from dash import dcc
from dash import html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout =  html.Div([
        dcc.Dropdown(options=[{'label':'Node','value':'Node'},
                              {'label':'Edge','value':'Edge'}],id='fcolumns'),
        dbc.Button ('+',id='fcol_btn',n_clicks=0),
        dbc.Button(['='],id='fequal',n_clicks=0),
        dbc.Button (['>'],id='fgt',n_clicks=0),
        dbc.Textarea(id='ftxt',value=" "),
        dbc.Button (['ok'],id='ftxt_btn',n_clicks=0),
        html.Div(id='final_result',children=[])
]) 


@app.callback(
    Output("ftxt", "value"),
    [Input("fcol_btn", "n_clicks"), 
     Input("fequal", "n_clicks"),
     Input("fgt", "n_clicks"),
     Input("fcolumns", "value")],
    State("ftxt", "value")
)
def do_something(fcol_btn,fequal,fgt,fcolumns,ftxt):
    ctx = dash.callback_context
    if ctx.triggered:
        triggered_item = ctx.triggered[0]['prop_id'].split('.')[0]
    else:
        triggered_item = None
    print('Triggered item was', triggered_item)
    print(f'fcol_btn:{fcol_btn}, fequal:{fequal}, fgt:{fgt}, fcolumns:{fcolumns}')
    operator = ''
    if triggered_item != None:
        if triggered_item == "fcol_btn":
            operator= "+"
        if triggered_item == "fequal":
            operator= "="
        if triggered_item == "fgt":
            operator= ">"
        if operator == '':
            ftxt = str(ftxt)
        else:    
            ftxt = str(ftxt)+operator+str(fcolumns)
        return ftxt

@app.callback( Output("final_result", "children"),
               Input("ftxt_btn", "n_clicks"),
               State("ftxt", "value"))
def return_all(ftxt_btn,text):
    if ftxt_btn>0:
        print(text)
        return [text]

if __name__ == '__main__':
    app.run_server(debug=False, port=8050)

edited Dec 27, 2021 at 9:57

answered Jun 15, 2021 at 7:01

horseshoe

1,47719 silver badges42 bronze badges

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

4 Comments

bibiji Over a year ago

Thanks but the result is not correct. Onece i click the + button, it enter Node two time. While i click to = button, it enter the dropdown value. I want to add "=" while click the = button

horseshoe Over a year ago

I dont really understand what it is you want to do but the logic for the different actions need to be defined in the if statements

tags Over a year ago

Unfortunately, many bits in your code snippet are now deprecated, and your code soon breaks as it starts up.

horseshoe Over a year ago

@tagoma the code is updated and now runs with version dash 2.0.0 and dash_core_components 2.0.0

Collectives™ on Stack Overflow

How to add value of a dropdown while button clicked in python dash?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related