CODEWITHSUNDEEP
pythonplotly-dash
dnmh
dnmh

Reputation: 2135

Dash modal with multiple buttons that open it

Following this part of the docs: https://dash-bootstrap-components.opensource.faculty.ai/l/components/modal I've created a modal in my Dash app. The trigger for the modal will be dynamically rendered thumbnails. When any of them is clicked, the modal should open and display the image from the thumbnail as it's body.

Is is possible, inside Dash, to have multiple buttons (I don't know how many will there be, depending on how many thumbnails in the database) that will all open the same modal dialog and pass some of their data to the modal (such as img src in my case)?

The input in the example above is simple:

[
    Input("open", "n_clicks"), Input("close", "n_clicks")
],

but in reality I don't know how many will there be and can't hardcode an ID.

Any suggestions?

Upvotes: 0

Views: 3221

Answers (2)

smalgotrader
smalgotrader

Reputation: 1

Create a set of buttons dynamically using the below list comprehension:

[dcc.Button(x, id={'type': 'thumbnail_button', 'index': x}) for x in thumbnail_list]

Use the pattern-matching callback to open modal when any of these buttons are clicked:

@app.callback(
              Output('your-modal', 'is_open'),
              [Input({'type': 'thumbnail_button', 'index': ALL}, 'n_clicks')]
)
def handle_button_click(n_clicks):

    invoker = [p['prop id'] for p in dash.callback_context.triggered][0]
    invoker_type = json.loads(invoker.split('.')[0])['type']
    invoker_index = json.loads(invoker.split('.')[0])['index']
    if invoker_type == "thumbnail_button":
        return not is_open
    else:
        return is_open

Lastly the imports:

from dash.dependencies import Input, Output, ALL

Upvotes: 0

coralvanda
coralvanda

Reputation: 6596

Yes, you can have multiple buttons open a modal. Just as you showed, the callback would have an Input for each one. No, you cannot create them dynamically. Dash does not play well with any ID that is not in the layout at the start of running the app.

Upvotes: 1

Related Questions