Dynamically add Dash sections

Dash Python
1

Hello,

My goal: I want to select different modes in a dropdown menu.

Only then, based on the selection, the Dash components should be displayed.

For example, in the first mode a graph and a button, but in the second mode an input field instead.

So, what is the common way to reach something like that with Python and Plotly Dash?
I’ve read some things about Pattern-Matching Callbacks but it seems like this would be a way for dynamically created components, mine would be pre-defined modes which should be defined and added groupwise.

I tried to create an empty Container inside the main layout and add children to that container afterwards but I didnt get it work, is there a better way?

Some ideas?

2

Hi @mahack welcome to the forums. This is actually one way to do it:

An example:

import dash
from dash import Input, Output, html, dcc


app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Div(
            [
                dcc.Dropdown(id='drop', options=[1, 2])
            ],
        ),
        html.Div(id='container')
    ]
)


@app.callback(
    Output('container', 'children'),
    Input('drop', 'value'),
    prevent_initial_call=True
)
def update(value):
    if value == 1:
        return html.Div('your layout for selection 1')
    elif value == 2:
        return html.Div('your layout for selection 2')
    else:
        html.Div('this should actually never show up')


if __name__ == '__main__':
    app.run(debug=True, port=8051)
3 Likes
3

Hey AIMPED, thanks for your great answer.

Seems like I would have some problems concerning the creation of ‘layout for selection 1’, which reads a graph from a .db file. The minimal code is running, but not the original one.

If it takes too long to create e.g. a graph for a layout in this way, could it be that i get a “server did not respond” error?

4

Yes, that could be. For long callbacks, please took a look at this in order to prevent timeouts.

2 Likes