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

user_8871058 0
Viewed 636

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  ">"
plotly-dash python-3.x python
1 Answers

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)
user_54469330
Related