Persistent and Dynamic Input Boxes

Dash Python
1

I am probably in over my head here being new to python and newer to dash.
But I want to create a number of input boxes based on the value the user has input into the initial input box - this I have accomplished.
But ideally I would like the user to be able to change their mind and change the initial input box and have that value either
append additional input boxes to my list
or
remove input boxes from my list
without over writing what they may have already filled in…
currently i set my list of input boxes to blank at the start of each change so that is the issue - but I am not sure what i need to do to check if the list already exists and checks if i need to start adding additional items to the end or removing items from the end…

this is what i currently have:

app=dash.Dash()
app.layout=html.Div(children = [
     dcc.Input(id='add-more', value=1, min=1, type='number'),
     html.Div(id='space', style={'height' : '12px'}),
     html.Div(id='main-div', children=[]),
])

@app.callback(
     Ouput(component_id='main-div', component_property='children'),
     [Input(component_id='add-more', component_property='value')],
     [State('main-div','children')]
)
def add_child(input_value, current_children):
     current_children=[]
     for i in list(range(input_value)):
          new_child=html.Div(style={
               'border-width' : '1px',
               'border-color' : 'red',
               'border-style' : 'solid',
               'width' : '750px',
          },
          children=[
               html.Div(style={
                    'display' : 'inline-block',
                    'width' : '24%'
               },
               children=[
               html.H3(
               children='Bins' + str(i+1),
                   style={
                              'textAlign' : 'center',
                              'color' : 'red'
                         }
                    )],
               ),
               html.Div(dcc.Input(id='bin1' + str(i+1), type='number', value=1),
                    style={
                              'display' : 'inline-block',
                              'width : '24%'
                    }),
               html.Div(dcc.Input(id='bin2' + str(i+1), type='number', value=2),
                    style={
                              'display' : 'inline-block',
                              'width : '24%'
                    }),
               html.Div(dcc.Input(id='bin3' + str(i+1), type='number', value=3),
                    style={
                              'display' : 'inline-block',
                              'width : '24%'
                    }),
               ])
          current_children.append(new_child)
     return current_children
2

Hi @amy

Everytime you add new rows you are creating new inputs with id=binn+str(i+1), you need to evaluate those ids to see if they had change.

You need to see this link to understand how to deal with that:

https://dash.plotly.com/pattern-matching-callbacks

Also you are rebilding the rows of inputs each time the first input change, using current_children=[] but at the same time you are using current_children as callback input, I think you need to evaluate first the way the first input change (up or down) and add or delete rows from the current_children received as input.

Hope it helps. :smiley: