Dynamic Controls and Dynamic Output Components

Dash Python
5

Hello. I thought I would post my example as it might help:

net-gifmaker%20(2)
Webp.net-gifmaker (2).gif768×432 239 KB

Here is the modified code of what chriddyp posted:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import json

app = dash.Dash()

app.config.supress_callback_exceptions = True

app.layout = html.Div([
    dcc.Input(
        id='datasource-1',
        value=0,
        type="number"
    ),
    html.Hr(),
    html.Div('Dynamic Controls'),
    html.Div(
        id='controls-container'
    ),
    html.Div(
        id='Show_ID_works'
    ),
])

def generate_control_id(value):
    return 'Control {}'.format(value)

@app.callback(
    Output('controls-container', 'children'),
    [Input('datasource-1', 'value')])
def display_controls(datasource_1_value):
    # generate 2 dynamic controls based off of the datasource selections
    DYNAMIC_CONTROLS = {}
    for each in range(datasource_1_value):
        DYNAMIC_CONTROLS[each+1]= dcc.Input(
            id=generate_control_id(each+1),
            value=generate_control_id(each+1)
        )
    List = []
    for i in range(datasource_1_value):
        List.append(DYNAMIC_CONTROLS[i+1])
    return html.Div(
        List
    )


@app.callback(
    Output('Show_ID_works', 'children'),
    [Input('Control 4', 'value')])
def display_controls(Stuff):
    return "Hello"


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

EDIT:

This one allows the ability to call back the value after it has been created. (However it uses a global variable so it’s not perfect)

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import json

app = dash.Dash()

app.config.supress_callback_exceptions = True

Var = 0

app.layout = html.Div([
    html.Div(
        id='Holder'
    ),
    dcc.Input(
        id='datasource-1',
        value=0,
        type="number"
    ),
    html.Hr(),
    html.Div('Dynamic Controls'),
    html.Div(
        id='controls-container'
    ),
    html.Div(
        id='Show_ID_works'
    ),
])

def generate_control_id(value):
    return 'Control {}'.format(value)



@app.callback(
    Output('controls-container', 'children'),
    [Input('datasource-1', 'value')])
def display_controls(datasource_1_value):
    # generate 2 dynamic controls based off of the datasource selections
    DYNAMIC_CONTROLS = {}
    for each in range(datasource_1_value):
        DYNAMIC_CONTROLS[each+1]= dcc.Input(
            id=generate_control_id(each+1),
            value=generate_control_id(each+1)
        )
    List = []
    for i in range(datasource_1_value):
        List.append(DYNAMIC_CONTROLS[i+1])
    return html.Div(
        List
    )


@app.callback(
    Output('Holder', 'children'),
    [Input('datasource-1', 'value')])
def Update_Var(Stuff):
    global Var
    Var = Stuff
    return Var

@app.callback(
    Output('Show_ID_works', 'children'),
    [Input(generate_control_id(Var+1), 'value')])
def Show_Current_ID(Stuff):
    return generate_control_id(Var)

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