Fill the Input box from data frame column value when click on submit

Dash Python
1

Hi Dash,

I don’t know if there is any way to fill the input box and dropdown boxes in-app by data frame column value where the user using a key as input to fill the input box on clicking the submit button.

Here is the small piece of code where I am submitting a value in getting the report section and then filling the account id input box by clicking on the submit button.

import dash
import dash_bootstrap_components as dbc
external_stylesheets = dbc.themes.BOOTSTRAP
app = dash.Dash(__name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}],
                external_stylesheets=[external_stylesheets], serve_locally=False, prevent_initial_callbacks=True)
app.title = "Data"
server = app.server
app.config['suppress_callback_exceptions'] = True

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import datetime
import dash_table

from Dash_App.app import app
import pandas as pd

df = pd.read_csv('query.csv')


row1 = html.Div(
    [dcc.Store(id='local', storage_type='local'),
     dbc.Row([
         dbc.Col([
             dbc.Input(id="ad_account_id",
                       type="text",
                       placeholder="Account ID",
                       style={'width': '150px'}, persistence=True,
                       persistence_type='memory'),
         ])])])

row6 = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Input(id="get-report",
                      type="text",
                      placeholder="Get Report",
                      style={'width': '150px', 'margin-top': 20, 'margin-left': 10}, persistence=True,
                      persistence_type='memory'),
        ])])])

row7 = html.Div([
    dbc.Row([
        dbc.Col([
            html.Button(id='submit-button-get', type='submit', children='Submit', style={'width': '150px',
                                                                                         'margin-top': 20,
                                                                                         'margin-left': 10}),

        ], width={"order": "first"}),
        dbc.Col([
            html.Div(id='output_div-get'),
        ])
    ])
])


app.layout = dbc.Container(children=[
    row1,
    html.Br(),
    row6,
    html.Br(),
    row7])


@app.callback(Output('output_div-get', 'children'),
              [Input('submit-button-get', 'n_clicks')],
              [State('get-report', 'value'),
               State('ad_account_id', 'value')], )
def facebook_output(clicks, get_report, ad_account_id):
    if clicks is not None:
        new_df = df.loc[df['Report Name'] == get_report]
        print(new_df)
        ad_account_id = new_df.iloc[:, 1]
        print(ad_account_id)
        return


if __name__ == '__main__':
    app.run_server(debug=True)
2

Can any one help me with this or propose new idea to achieve it?

3

Hi @ MishD,

Try adding Output(‘ad_account_id’, ‘value’) to your callback.

4

@AnnMarieW, Is it possible to add two outputs in the same callback?
Or are you saying to remove current output that is output_div-get?

5

You can have multiple outputs in the same callback.

Also, unless you are using the it somewhere else in your callback, it looks like you may not need State(‘ad_account_id’, ‘value’)

6

I did this but getting error.

dash.exceptions.IncorrectTypeException: The input argument `ad_account_id.value` must be a list or tuple of
`dash.dependencies.Input`s.

@app.callback(Output('output_div-get', 'children'), Output('ad_account_id', 'value'),
              [Input('submit-button-get', 'n_clicks')],
              [State('get-report', 'value')], )
def facebook_output(clicks, get_report):
    if clicks is not None:
        my_report = get_report
        new_df = df.loc[df['Report Name'] == my_report]
        ad_account_id = new_df.iloc[:, 1]
        print(ad_account_id)
7

right… need to add [ ] like this:

@app.callback([Output('output_div-get', 'children'), Output('ad_account_id', 'value')],

8

Sorry my bad. but now i am getting this error
dash.exceptions.InvalidCallbackReturnValue: The callback ..output_div-get.children...ad_account_id.value.. is a multi-output. Expected the output type to be a list or tuple but got: None. I believe something to do with the return but don’t know what it is? please help.

@app.callback([Output('output_div-get', 'children'), Output('ad_account_id', 'value')],
              [Input('submit-button-get', 'n_clicks')],
              [State('get-report', 'value')], )
def facebook_output(clicks, get_report):
    if clicks is not None:
        my_report = get_report
        new_df = df.loc[df['Report Name'] == my_report]
        ad_account_id = new_df.iloc[:, 1]
        print(ad_account_id)
    return
9

You need to return something for each of the outputs.

So for now, since you don’t yet have the output defined for ‘output_div-get’ you could return some placeholder. Something like this should work:

return ‘test’, ad_account_id

1 Like
10

That works! You saved a lot of hours. Thank you so much.

11

Glad it worked for you! :grinning: