Does Dash support a input form popup?

Dash Python
1

I’d like to add a form popup to dash application that accepts user input and store the variables in the script. Is this possible to do in dash?

Something like this:

Screenshot 2020-07-15 at 11.40.00 AM

2

Yes you can basically do that in Dash. You need to create the modal or popup with Dash controls for being able to create a callback that handles the input. I use Dash Bootstrap components for this. Then you can add a callback that handles your input and closes the popup.

3

Yes, I am familiar with modal. However, does the modal support input fields like text, dropdowns, radio etc?

4

Yes it does. Here is a small sample from a current app of mine:

        dbc.Modal(
            [
                dbc.ModalHeader("Label hinzufügen"),
                dbc.ModalBody(
                    [
                        dbc.Label("Zeitstempel:"),
                        dbc.Input(id="liveview_label_datetime", type="text", disabled=True),
                        dbc.Label("Name:"),
                        dbc.Input(id="liveview_label_name", type="text", debounce=True),
                    ]
                ),
                dbc.ModalFooter(
                    [
                        dbc.Button("OK", color="primary", id="liveview_modal_ok_button"),
                        dbc.Button("Abbrechen", id="liveview_modal_cancel_button"),
                    ]
                ),
            ],
            id="liveview_label_modal",
        ),
5

Great, thanks. Mind sharing a screenshot of what the modal popup?

6

grafik
grafik732×412 6.45 KB

1 Like
7

Thank you for this! It is very helpful. Could you please share your code for the callback that handles the input? I am trying to do something very similar but I can only get one of the modal buttons to function.

8 
@app.callback(
    [Output("liveview_label_modal", "is_open"), Output("liveview_label_datetime", "value")],
    [
        Input("liveview_add_label_button", "n_clicks"),
        Input("liveview_modal_ok_button", "n_clicks"),
        Input("liveview_modal_cancel_button", "n_clicks"),
        Input("liveview_label_name", "value"),
    ],
    [State("liveview_label_modal", "is_open"), State("liveview_label_datetime", "value")],
)
def show_modal(n_add: int, n_ok: int, n_cancel: int, name: str, is_open: bool, dt: str) -> Tuple[bool, str]:
    """Show modal for adding a label."""
    dt = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    if callback_triggered_by(["liveview_add_label_button"]):
        return True, dt

    if callback_triggered_by(["liveview_label_name", "liveview_modal_ok_button"]):
        dt_local = datetime.datetime.strptime(dt, "%Y-%m-%d %H:%M:%S").astimezone()
        dt_utc = dt_local.astimezone(tz.UTC)
        db_client.create_label(dt_utc, name, redis_client.get(REDIS_RECORDING.key))
        return False, dt

    return False, dt

The callback takes care of the following inputs:

  • liveview_add_label_button.n_clicks: show the modal
  • liveview_modal_ok_button.n_clicks: save data and close modal
  • liveview_modal_cancel_button.n_clicks: just close modal
  • liveview_label_name.value: if the value is changed andreturn is pressed save data and close modal (be sure to set debounce to True in the layout)
1 Like
9

Thank you so much!!!

10

First of all, Thanks alot for this helpfull insight. I am trying to adapt your solution to my problem, which is to modifiy data points values in a database by click on a plotly graph. I have succeded so far to pop up the Modal box upon clicking, with Input field and submit button. I would like to know what the functions callback_triggered_by and db_client.create_label does, and their explicit code if possible.
Thank you in advance.