Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Saving form inputs to pandas dataframe or dictionary

Hello!
I have a dash script which has the users filling in a form; first with inputs then filling in a dropdown datatable. I need to take these inputs once they are filled in, and after clicking the ‘Submit’ button, will be stored as a pandas dataframe or dictionary or stored in the database (whichever is easiest, to be frank :slight_smile: )
I feel like I may need to use dcc.Store but I’m uncertain on how to proceed.
Any help appreciated, thank you!

app.layout = html.Div(
    children=[
        html.H1(children='Technology Information',
                style={'font-family': 'calibri'}),
        dcc.Store(id='store-form-info', data={'form-submission': pd.DataFrame()}),
        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=[]),
        html.Button(children='Submit',
                    id='submit-form',
                    type='submit',
                    style={'background-color': '#0099ff',
                           'margin': '1em'}),
    ]
)


@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 "index" in input_id and n_clicks is not None:
        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=[
            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",
                               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')
            ])],
            id={'type': 'process_form', 'index': n_clicks},
            style={'border': '2px black solid',
                   'margin': '1em'}
        )]
    return div_list

I dont have too much experience, but I might depends on where do you want to store the data:

  • If the database is an online repository, you can use python to push your data to the online repository (for expample on GitHub, you can write ‘‘from github import InputGitTreeElement’’ and push your data, see more on https://github.com/PyGithub/PyGithub ).
  • If you use your dash on your local computer, it´s easier. You can write your csv data file.

If you use dcc.Store, you will store your data until you refresh the website.

Hope it can help.