Dropdown menu updated with different values

Dash Python
1

Hello,

I’m currently making updating my app so it gives a dropmenu that has inputs from the database.
My question is what is the best way for me to display the Type menu to be updated according wich database I pick
And I’m stuck at it for the moment,currently here is how my menu looks:

image

What would I like is that when you choose the Database from the menu above to get the different results in the Type menu.
For an example,let’s say we choose ked33 then in the Type menu I should get the items from the ked33 database in this example it should be something from this:
image
And when I pick a differnt database then some other values.
Here is my code for the menu:
In my app I’m using this part of the code that calls the part_type_selection in my constants.py

        dbc.Row(
            [dbc.Col([html.Div(["Type"])]), dbc.Col([constants.part_type_selection])],
            style={"marginBottom": "1em"},
        ),

And this is how I call my database in the app also:

        dbc.Row(
            [dbc.Col([html.Div(["Database"])]), dbc.Col([constants.database])],
            style={"marginBottom": "1em"},
        ),

This is the type menu in the constants.py and it’s outdated as we don’t use these values anymore as they don’t exist

part_type_selection = dcc.Dropdown(
    id="part_type",
    options=[
        {"label": "all", "value": "all"},
        {"label": "0", "value": "0"},
        {"label": "1", "value": "1"},
        {"label": "2", "value": "2"},
        {"label": "3", "value": "3"},
        {"label": "5", "value": "5"},
        {"label": "6", "value": "6"},
        {"label": "8", "value": "8"},
        {"label": "9", "value": "9"},
        {"label": "10", "value": "10"},
        {"label": "11", "value": "11"},
    ],
    value="all",
    style={
        "width": "80%",
        "height": "40px",
        "margin-top": "-5px",
    },  # style=dict(display='flex')
    # style={"width": "80%", "height":"40px", "margin-top":"5px"}, #style=dict(display='flex')
)

And this is my database in the constants.py

database = dcc.Dropdown(
    id="database",
    options=[
        {"label": "ked33", "value": "ked33"},
        {"label": "ked34", "value": "ked34"},
        {"label": "ked35", "value": "ked35"},
        {"label": "ked36", "value": "ked36"},
        {"label": "ked37", "value": "ked37"},
    ],
    value="ked33",
    style={
        "width": "80%",
        "height": "40px",
        "margin-top": "-5px",
    },  # style=dict(display='flex')
    # style={"width": "80%", "height":"40px", "margin-top":"5px"}, #style=dict(display='flex')
)
2

Hello @Traxdata,

You’ll need to setup a callback that takes the input from the database drop-down and then gives an output of the desired options to the part_type drop-down.

What you can do is create a dictionary of your databases as the keys and then the list of options as the results to make it really smooth.

@app.callback(Output(‘part_type’,’options’),Input(‘database’,’value’))
def updateDropdown(v):
    if v in dbDropdowns:
        return dbDropdowns[v]
    return defaultDrop

Where dbDropdowns is the dictionary to the drop-down lists and defaultDrop is the normal options.

3

Hi,
thank you for your reply,but can you help me a bit step by step as I’m somehow confused by this.

Currently what I did is that I made in constants.py dictionaries of my database for example ked33,ked34 and ked35
These are now only as separate variables.

ked33_part_type= [
    {'ID': 0, 'TypeDescription': 0, 'ItemNo': ''},
    {'ID': 1, 'TypeDescription': 1, 'ItemNo': ''},
    {'ID': 2, 'TypeDescription': 2, 'ItemNo': ''},
    {'ID': 3, 'TypeDescription': 3, 'ItemNo': ''},
    {'ID': 4, 'TypeDescription': 4, 'ItemNo': ''},
    {'ID': 5, 'TypeDescription': "15,8° + 10 mm", 'ItemNo': ''},
    {'ID': 6, 'TypeDescription': "12,8°", 'ItemNo': ''},
    {'ID': 7, 'TypeDescription': 7, 'ItemNo': ''},
    {'ID': 8, 'TypeDescription': 8, 'ItemNo': ''},
    {'ID': 9, 'TypeDescription': "21,1° li./re.", 'ItemNo': ''},
    {'ID': 10, 'TypeDescription': "12,8° + 20 mm", 'ItemNo': ''},
    {'ID': 11, 'TypeDescription': "20,6°", 'ItemNo': ''},
    {'ID': 12, 'TypeDescription': 12, 'ItemNo': ''},
]

ked34_part_type= [
    {'ID': 0, 'TypeDescription': 'A', 'ItemNo': 'HiMi'},
    {'ID': 1, 'TypeDescription': 'B', 'ItemNo': "HiAu BR206"},
    {'ID': 2, 'TypeDescription': 'C', 'ItemNo': "HiAu V297"},
    {'ID': 3, 'TypeDescription': 'D', 'ItemNo': "HiAu C254"},
    {'ID': 4, 'TypeDescription': 'E', 'ItemNo': "HiAu C236"},
]
ked35_part_type= [
    {'ID': 1, 'TypeDescription': 'F4x VoLi', 'ItemNo': 1520010100},
    {'ID': 2, 'TypeDescription': 'F4x VoRe', 'ItemNo': 1520010200},
    {'ID': 3, 'TypeDescription': 'F4x HiAuLi', 'ItemNo': 1520010300},
    {'ID': 4, 'TypeDescription': 'F4x HiAuRe', 'ItemNo': 1520010400},
    {'ID': 5, 'TypeDescription': "F4x HiMiLi", 'ItemNo': 1520010500},
    {'ID': 6, 'TypeDescription': "F4x HiMiRe", 'ItemNo': 1520010600},
    {'ID': 7, 'TypeDescription': 'i20 HiMiLi', 'ItemNo': 1520010700},
    {'ID': 8, 'TypeDescription': 'i20 HiMiLi cast', 'ItemNo': 1520010702},
    {'ID': 9, 'TypeDescription': "i20 HiMiLi gray", 'ItemNo': 1520010701},
    {'ID': 10, 'TypeDescription': "i20 HiMiRe", 'ItemNo': 1520010800},
    {'ID': 11, 'TypeDescription': "i20 HiMiRe cast", 'ItemNo': 1520010802},
    {'ID': 12, 'TypeDescription': 'i20 HiMiRe gray', 'ItemNo': 1520010801},
    {'ID': 13, 'TypeDescription': 'FAAR WE VoLi', 'ItemNo': 1520010900},
    {'ID': 14, 'TypeDescription': 'FAAR WE VoRe', 'ItemNo': 1520011000},
    {'ID': 15, 'TypeDescription': 'FAAR WE HiLi', 'ItemNo': 1520011100},
    {'ID': 16, 'TypeDescription': 'FAAR WE HiRe', 'ItemNo': 1520011200},
]

Should I marge them all into one whole thing or something else?

What I understand so far is that:

@app.callback(Output(‘part_type’,’options’),Input(‘database’,’value’))

‘part_type’ is

part_type_selection = dcc.Dropdown(
    id="part_type",
    options=[
        {"label": "all", "value": "all"},
        {"label": "0", "value": "0"},
        {"label": "1", "value": "1"},
        {"label": "2", "value": "2"},
        {"label": "3", "value": "3"},
        {"label": "5", "value": "5"},
        {"label": "6", "value": "6"},
        {"label": "8", "value": "8"},
        {"label": "9", "value": "9"},
        {"label": "10", "value": "10"},
        {"label": "11", "value": "11"},
    ],
    value="all",
    style={
        "width": "80%",
        "height": "40px",
        "margin-top": "-5px",
    },  # style=dict(display='flex')
    # style={"width": "80%", "height":"40px", "margin-top":"5px"}, #style=dict(display='flex')
)

So here somehow I need to put all of my database tables?Or should my next step be something else?

I also made a dictionary that contain three dictionaries

dbDropdowns = {
    "ked33_part_type" : {
        'ID': 0, 'TypeDescription': 0, 'ItemNo': '',
        'ID': 0, 'TypeDescription': 0, 'ItemNo': '',
        'ID': 1, 'TypeDescription': 1, 'ItemNo': '',
        'ID': 2, 'TypeDescription': 2, 'ItemNo': '',
        'ID': 3, 'TypeDescription': 3, 'ItemNo': '',
        'ID': 4, 'TypeDescription': 4, 'ItemNo': '',
        'ID': 5, 'TypeDescription': "15,8° + 10 mm", 'ItemNo': '',
        'ID': 6, 'TypeDescription': "12,8°", 'ItemNo': '',
        'ID': 7, 'TypeDescription': 7, 'ItemNo': '',
        'ID': 8, 'TypeDescription': 8, 'ItemNo': '',
        'ID': 9, 'TypeDescription': "21,1° li./re.", 'ItemNo': '',
        'ID': 10, 'TypeDescription': "12,8° + 20 mm", 'ItemNo': '',
        'ID': 11, 'TypeDescription': "20,6°", 'ItemNo': '',
        'ID': 12, 'TypeDescription': 12, 'ItemNo': '',
        },
    "ked34_part_type" : {
        'ID': 0, 'TypeDescription': 'A', 'ItemNo': 'HiMi',
        'ID': 1, 'TypeDescription': 'B', 'ItemNo': "HiAu BR206",
        'ID': 2, 'TypeDescription': 'C', 'ItemNo': "HiAu V297",
        'ID': 3, 'TypeDescription': 'D', 'ItemNo': "HiAu C254",
        'ID': 4, 'TypeDescription': 'E', 'ItemNo': "HiAu C236",
        },
    "ked35_part_type" : {
    'ID': 1, 'TypeDescription': 'F4x VoLi', 'ItemNo': 1520010100,
    'ID': 2, 'TypeDescription': 'F4x VoRe', 'ItemNo': 1520010200,
    'ID': 3, 'TypeDescription': 'F4x HiAuLi', 'ItemNo': 1520010300,
    'ID': 4, 'TypeDescription': 'F4x HiAuRe', 'ItemNo': 1520010400,
    'ID': 5, 'TypeDescription': "F4x HiMiLi", 'ItemNo': 1520010500,
    'ID': 6, 'TypeDescription': "F4x HiMiRe", 'ItemNo': 1520010600,
    'ID': 7, 'TypeDescription': 'i20 HiMiLi', 'ItemNo': 1520010700,
    'ID': 8, 'TypeDescription': 'i20 HiMiLi cast', 'ItemNo': 1520010702,
    'ID': 9, 'TypeDescription': "i20 HiMiLi gray", 'ItemNo': 1520010701,
    'ID': 10, 'TypeDescription': "i20 HiMiRe", 'ItemNo': 1520010800,
    'ID': 11, 'TypeDescription': "i20 HiMiRe cast", 'ItemNo': 1520010802,
    'ID': 12, 'TypeDescription': 'i20 HiMiRe gray', 'ItemNo': 1520010801,
    'ID': 13, 'TypeDescription': 'FAAR WE VoLi', 'ItemNo': 1520010900,
    'ID': 14, 'TypeDescription': 'FAAR WE VoRe', 'ItemNo': 1520011000,
    'ID': 15, 'TypeDescription': 'FAAR WE HiLi', 'ItemNo': 1520011100,
    'ID': 16, 'TypeDescription': 'FAAR WE HiRe', 'ItemNo': 1520011200,
    }
}
4

Hello @Traxdata,

That is very close, here is how I’d go about it with how you’ve built the contants.py (I believe you will have an issue with these lists of dictionaries as they’ll need to have label and value):

dbDropdowns = {
    "ked33": contants.ked33_part_type,
    "ked34": contants.ked34_part_type,
    "ked35": constants.ked35_part_type,
    "ked36": contants.ked36_part_type,
    "ked37": constants.ked37_part_type
}

defaultsDrop = [
        {"label": "all", "value": "all"},
        {"label": "0", "value": "0"},
        {"label": "1", "value": "1"},
        {"label": "2", "value": "2"},
        {"label": "3", "value": "3"},
        {"label": "5", "value": "5"},
        {"label": "6", "value": "6"},
        {"label": "8", "value": "8"},
        {"label": "9", "value": "9"},
        {"label": "10", "value": "10"},
        {"label": "11", "value": "11"},
    ]

@app.callback(Output('part_type','options'),Input('database','value'))
def updateDropdown(v):
    if v in dbDropdowns:
        return dbDropdowns[v]
    return defaultDrop
5

Hello,
thank you for your reply.
The part where you said I will have issues is maybe this error I’m getting?

Invalid argument options passed into Dropdown with ID “part_type”.

image
image556×919 15.8 KB

6

Hi, as @jinnyzor mentioned, the options have to be a list of dictionaries with certain keys like in this example:

7

Thank you!
You guys helped me

2 Likes