Hello,
I’ve been creating a form with Dash. At the moment I have (successfully run) code which has a green add button; when pressed it shows a dropdown datatable which is editable and a remove button next to it.
Since this remove button only shows up in the callback for the add button, I’m not sure how to use callbacks to also remove these forms. From the documentation I think MATCH callbacks would help, but I cant quite seem to figure it out.
Any help very much appreciated!
app.layout = html.Div(
children=[
html.H1(children='Technology Information',
style={'font-family': 'calibri'}),
dbc.FormGroup([
dbc.Label('Technology Name:',
html_for='tech-name-row',
style={'font-family': 'calibri',
'margin-right': '4em'}),
dbc.Col(dbc.Input(type='technology',
id='tech-name-row',
placeholder='Enter Technology Name',
style={'display': 'inline-flex',
'verticalAlign': 'middle',
'height': '25px'}),
style={'display': 'inline-flex',
'verticalAlign': 'middle'}),
], row=True, style={'margin-bottom': '1em'}),
html.Label(["Technology Type:", dcc.Dropdown(id="tech-type-drop",
style={'display': 'inline-block',
'width': '175px',
'height': '28px',
'margin-left': '2.3em',
# 'margin-bottom': '2.5em',
'verticalAlign': 'middle',
'font-size': '15px'},
placeholder='Select Type',
options=[
{"label": "Type 1", "value": "1"},
{"label": "Type 2", "value": "2"},
{"label": "Type 3", "value": "3"}])],
style={'font-family': 'calibri',
'margin-right': '4em',
'display': 'flex'}),
html.H1(' '),
html.H1(' '),
html.H2('Process Information',
style={'font-family': 'calibri',
'margin-right': '0.5em',
'margin-top': '3em',
'display': 'inline'}),
html.Button(children='+',
id='add_process_button',
style={'background-color': '#38BC23',
'display': 'inline'}),
html.Div(id='process_list', children=[]),
]
)
@app.callback(
Output('process_list', 'children'),
[Input('add_process_button', 'n_clicks')],
[State('process_list', 'children')])
def add_step(add_clicks, div_list):
if add_clicks is not None:
div_list += [html.Div(children=[
html.Button(children='-',
id='remove_process_button',
style={'background-color': 'red',
'display': 'inline',
'float': 'right',
'margin': '1em'}),
dbc.Col(
dbc.FormGroup(
[dbc.Label("Process Name",
html_for="process-name",
style={'font-family': 'calibri',
'margin-right': '2em'}),
dbc.Input(id="process-name",
placeholder="Enter Process Name")],
style={'margin': '1em'})),
html.Div(children=[
dash_table.DataTable(id='process-table',
data=[{}],
style_table={'margin': '2em', 'width': '90%', 'display': 'inline-block'},
style_cell={'font-family': 'calibri', 'textAlign': 'left'},
columns=[{'id': 'Product', 'name': 'Product', 'presentation': 'dropdown'},
{'id': 'Function', 'name': 'Function', 'presentation': 'dropdown'},
{'id': 'Conversion Factor', 'name': 'Conversion Factor',
'presentation': 'dropdown'},
{'id': 'Measure Unit', 'name': 'Measure Unit',
'presentation': 'dropdown'}],
editable=True,
dropdown={'Product': {'options': [{'label': i, 'value': i} for i in
['Benzene', 'HDPE', 'Propylene']]},
'Function': {'options': [{'label': i, 'value': i} for i in
['Input1', 'Input2', 'Input3']]},
'Conversion Factor': {'options': [{'label': i, 'value': i} for i in
['1', '2', '3']]},
'Measure Unit': {'options': [{'label': i, 'value': i} for i in
['Tonne', 'Kilo', 'Gram']]},
}), html.Div(id='process-table-container')
])], style={'border': '2px black solid',
'margin': '1em'}
)]
return div_list
