Dcc.dropdown options generated from a callback

📊 Plotly Python
1

Please assist me here

My project is a multi page dash app. index.py goes as below

import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from dash import html, dcc
import pandas as pd

app = dash.Dash(name=__name__,  external_stylesheets=[
                dbc.themes.PULSE], use_pages=True,title='Dashboard')

company_info = [
    {'cid': '1',
     'data': {'database': 'company_a'}    
     }
		]

secondory_row = dbc.Row(
	children=[
        dbc.Col(
            [
                dcc.Dropdown(
                    options=[
                        {'label': i['data']['long_name'], 'value': i['data']['database']} for i in company_info
                    ],
                    value='nbn_logistics',
                    id='company-name',
                    className='mt-1',
                    optionHeight=35,
                    clearable=False
                )
            ], width={'size': 2}

        )
]
)

app.layout = html.Div(children=[
    dcc.Store(id='database', data={}),
    secondory_row,
    dash.page_container]
		     )

@app.callback(
    [Output(component_id='database', component_property='data')],
    [Input(component_id='company-name', component_property='value')]
)
def output_data(database):
    return [database]


if __name__ == '__main__':
    app.run(debug=True, port=3000)

and another page “sales.py” goes as below

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html, callback, Output, Input
import pandas as pd
from sqlalchemy import create_engine
import plotly.express as px


dash.register_page(__name__, external_stylesheets=[dbc.themes.PULSE])

db_info = {'HOSTNAME': 'localhost',
           'USERNAME': 'postgres',
           'PWD': '0000',
           'PORT_ID': 5432}

row_one = [
children = [
        dbc.Col(
            children=[
                dcc.Dropdown(
                    id='cust-select',
                    multi=False, 
                    value=['Customer-A'],
                    options=[ ]
                )
            ], width={'size': 6}
        )
	]
	]

layout = html.Div(
    dcc.Loading(children=[row_one,
], color='#119DFF', type='dot', fullscreen=True)
)

@callback(
    [Output(component_id='cust-select', component_property='options')],
    [Input(component_id='database', component_property='data')]
)

def data_output(database):

    engine = create_engine(
        f'postgresql://{db_info["USERNAME"]}:{db_info["PWD"]}@{db_info["HOSTNAME"]}:{db_info["PORT_ID"]}/{database}')

    df_dCustomers = pd.read_sql('dCustomers', engine)
    return [{'label': cust, 'value': cust} for cust in df_dCustomers['cus_name'].unique()]

Error

dash._grouping.SchemaLengthValidationError: Schema: [<Output cust-select.options>]
Path: ()
Expected length: 1
Received value of length 300:
[
{‘label’: ‘Customer-a’, ‘value’: ‘Customer-a’},
{‘label’: ‘Customer-b’, ‘value’: ‘Customer-b’},
{‘label’: ‘Customer-c’, ‘value’: ‘Customer-c’}, …]

Question - User has to select a company name from the dropdown in index.py and based on that selection, respective customers for that company will be listed in the dropdown in sales.py page. though function defined after callback in sales.py returns a dictionary, python throws above error msg.

dash.version - 2.13.0
dcc.version - 2.12.0
html.version - 2.0.14
dash_table.version - 5.2.7
plotly.version- 5.16.1

Windows 10 Pro

Pls assist.

2

Hi @nadun.jayathunga welcome to the forums.

Try removing the square brackets here:

In general: If you wrap your Outputs() in square brackets, aka a list, you have to do the same with the returned values.

So this should work also (without changing the above):

3

@IAMPED

Good Morning.

This worked. Thanks a million.

1 Like