Dynamcially create layout elements and callbacks and then, add new ones

Hey everyone,

I’m currently trying to do an app where some Tab (from Tabs component) and some callbacks are created at page load base on stored data with something like

the layout is something like:

FILE_NUMBER = 3

app.layout(
    ...
    dcc.Tabs(id='my_tabs', 
    children=[generate_tab(index) for index in range(0, FILE_NUMBER])
    ...
)

and here is the the loop I was used to use to create my needed callbacks:

for index in range(0, FILE_NUMBER)
    @app.callback(Output('tabs_sub_item{}_id'.format(index), 'children')
        [Input('some_other_tabs_sub_item{}_id'.format(index), 'value')
    def some_func(value)
        return value

    @app.callback(...)
        ...

Now I want my user to be able to create new tab(s). So I have put my FILE_NUMBER in a dcc.Store component, added a button to be able to manipulate it, turned the tab generation into a callback trigered by the dcc.Store element.

But my problem is that I can’t figure out how to generate my callbacks.

I have tried something like

@app.callback(Output("doesn't_matter_component', 'doesn't_matter_property'),
    [Input('store_component', 'data)]
def generate_callbacks(data):
    for index in range(0, data['FILE_NUMBER'])

        @app.callback(Output('tabs_sub_item{}_id'.format(index), 'children')
            [Input('some_other_tabs_sub_item{}_id'.format(index), 'value')
        def some_func(value)
            return value
        
        @app.callback(...)
              ...

But they are not fired when their input should trig them.

Anyone having faced the same problem or having an idea ?

See Dynamic Controls and Dynamic Output Components

1 Like