Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Does Dash support a input form popup?

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

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.

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

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",
        ),

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

1 Like

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.

@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)

Thank you so much!!!