Hello!
I created a form with Dash, and after pressing the submit button I’d like to either reroute to a new page which will show a dbc.Alert stating that the form has been submitted, or clearance of the inputs in the form and the alert on the same page. I don’t mind which but the simpler, the better.
My code is below if needed.
Any help appreciated, thank you!
app.layout = html.Div(
children=[
html.H1(children='Technology Information',
style={'font-family': 'calibri'}),
dcc.Store(id='memory'),
dbc.FormGroup([
dbc.Label('Technology Name',
id='tech-name-label',
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'}),
dbc.FormGroup([dbc.Label('Technology Type',
id='tech-type-label',
style={'font-family': 'calibri',
'margin-right': '4em',
'display': 'inline-flex'}),
dcc.Dropdown(id="tech-type-drop",
style={'display': 'inline-flex',
'font-family': 'calibri',
'width': '172px',
'height': '30px',
'margin-left': '0.2em',
'font-size': '15px'},
placeholder='Select Type',
options=[{"label": "Type 1", "value": "Type 1"},
{"label": "Type 2", "value": "Type 2"},
{"label": "Type 3", "value": "Type 3"}])
]),
html.Br(),
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=[]),
html.A(html.Button(children='Submit',
id='submit-form-button',
type='submit',
style={'background-color': '#0099ff',
'margin': '1em'},
disabled=False), href='/apps/app2'),
html.Div(id="submit-form-div",
children=[],
style={'font-family': 'calibri'})
]
)
@app.callback(
Output('process-list', 'children'),
[Input('add-process-button', 'n_clicks'),
Input({'type': 'remove-process-button', 'index': ALL}, 'n_clicks')
],
[State('process-list', 'children')])
def add_step(n_clicks, _, div_list):
input_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
if n_clicks is None:
n_clicks = 0
if "index" in input_id and n_clicks > 0:
delete_form = json.loads(input_id)["index"]
div_list = [form for form in div_list if "'index': " + str(delete_form) not in str(form)]
else:
div_list += [html.Div(children=[
dcc.Store(id='memory'),
html.Button(children='-',
id={'type': 'remove-process-button', 'index': n_clicks},
style={'background-color': 'red',
'display': 'inline',
'float': 'right',
'margin': '1em'}),
dbc.Col(
dbc.FormGroup(
[dbc.Label("Process Name",
id='process-name-label',
style={'font-family': 'calibri',
'margin-right': '2em'}),
dbc.Input(id={'type': 'process-name', 'index': n_clicks},
placeholder="Enter Process Name")],
style={'margin': '1em'})),
html.Div(children=[
dash_table.DataTable(id={'type': 'process-table', 'index': n_clicks},
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'}],
row_deletable=True,
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.Button('Add Row',
style={'background-color': '#38BC23', 'display': 'inline', 'margin': '1em'},
id='editing-rows-button',
n_clicks=0),
# html.Div(id='process-table-container')
])
], style={'border': '2px black solid',
'margin': '1em'}
)]
return div_list
@app.callback(
Output({'type': 'process-table', 'index': MATCH}, 'data'),
[Input('editing-rows-button', 'n_clicks')],
[State({'type': 'process-table', 'index': MATCH}, 'data'),
State({'type': 'process-table', 'index': MATCH}, 'columns')])
def add_row(n_clicks, rows, columns):
input_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
if input_id == 'editing-rows-button' and n_clicks > 0:
rows.append({c['id']: '' for c in columns})
return rows
@app.callback(Output('submit-form-div', 'children'),
[Input('submit-form-button', 'n_clicks')],
[
State('tech-name-row', 'value'),
State('tech-name-label', 'children'),
State('tech-type-drop', 'value'),
State('tech-type-label', 'children'),
State({'type': 'process-name', 'index': ALL}, 'value'),
State('process-name-label', 'children'),
State({'type': 'process-table', 'index': ALL}, 'data')])
def on_data(n_clicks, tn, tn_l, ttd, ttd_l, pn, pn_l, pt):
input_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
if n_clicks is None or n_clicks == 0:
raise PreventUpdate
if input_id == 'submit-form-button' and n_clicks > 0:
for i in range(len(pt)):
for d in pt[i]:
d.update({pn_l: pn[i], tn_l: tn, ttd_l: ttd})
pt = [item for sublist in pt for item in sublist]
datatable = {k: [d.get(k) for d in pt] for k in set().union(*pt)}
final_form = pd.DataFrame.from_dict(datatable)
return final_form