DCC.Confirmdialog.confirmdialog

DCC.Confirmdialog.confirmdialog is used to display the browser’s native
“confirm” modal, with an optional message and two buttons (“OK” and “Cancel”).
This ConfirmDialog can be used in conjunction with buttons when the user is
performing an action that should require an extra step of verification.

See DCC.Confirmdialogprovider.confirmdialogprovider
for an easier way to display an alert when clicking on an item.

open Dash.NET.Suave
open Dash.NET.DCC
open Dash.NET
open System


let layout =
    Html.div [ Attr.children [ ConfirmDialog.confirmDialog
                                   "confirm-danger"
                                   [ ConfirmDialog.Attr.message "Danger danger! Are you sure you want to continue?" ]
                               Dropdown.dropdown
                                   "dropdown-danger"
                                   [ seq {
                                         "Safe"
                                         "Danger!!"
                                     }
                                     |> Seq.map (fun x -> DropdownOption.init (x, x))
                                     |> Dropdown.Attr.options ]

                               Html.div [ Attr.id "output-danger" ] ] ]


let displayConfirmCallback =
    Callback.singleOut (
        "dropdown-danger" @. Value,
        "confirm-danger" @. CustomProperty "displayed",
        (fun (value: string) ->
            let showDanger =
                match value with
                | "Danger!!" -> true
                | _ -> false

            "confirm-danger" @. CustomProperty "displayed"
            => showDanger)
    )


let confirmDangerCallback =
    Callback.singleOut (
        "confirm-danger" @. CustomProperty "submit_n_clicks",
        "output-danger" @. Children,
        (fun (nClick: int) ->
            let dangerousLabel = $"It wasnt easy but we did it {nClick}"

            let label =
                match nClick with
                | v when v > 0 -> dangerousLabel
                | v -> ""

            "output-danger" @. Children => label)
    )




[&lt;EntryPoint&gt;]
let main args =
    DashApp.initDefault()
    |> DashApp.withLayout layout
    |> DashApp.addCallback displayConfirmCallback
    |> DashApp.addCallback confirmDangerCallback
    |> DashApp.run args

ConfirmDialog Properties

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

id (string; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

message (string; optional):
Message to show in the popup.

submit_n_clicks (number; default 0):
Number of times the submit button was clicked.

submit_n_clicks_timestamp (number; default -1):
Last time the submit button was clicked.

cancel_n_clicks (number; default 0):
Number of times the popup was canceled.

cancel_n_clicks_timestamp (number; default -1):
Last time the cancel button was clicked.

displayed (bool; optional):
Set to true to send the ConfirmDialog.