WebSharper's Enhance.WithResetAction

Question

I built a WebSharper formlet using the combinators, but my goal is to embed it in a jQueryUI pop-up. As a consequence I need to be able to close the dialog when the user clicks no, the following doesn't work:

let confirmationForm order =
    let title = DialogConfiguration(Title = "Are you sure you want to place the order?")
    let form = Formlet.Return ()
                |> Enhance.WithCustomSubmitAndResetButtons
                    { Enhance.FormButtonConfiguration.Default with Label = Some "Yes" }
                    { Enhance.FormButtonConfiguration.Default with Label = Some "No" }
                |> Enhance.WithFormContainer
    let rec dialog = Dialog.New(Div [ result ], title)
    and result =
        Formlet.Do {
            let! _ = form |> Enhance.WithResetAction (fun _ -> dialog.Close(); true)
            dialog.Close()
            return Server.SubmitOrder order
        } |> Enhance.WithFormContainer

    (dialog :> IPagelet).Render()

Formlet.Do {
    let! order = orderForm
    return confirmationForm order
}
|> Enhance.WithFormContainer

The dialog closes fine on clicking yes. Also I don't understand the signature requiring me to provide a function that returns true, that is kind of confusing as I do not need to supply any other callback.

Also, note that I am positively surprised that it supports mutually recursive function to allow to provide the workflow to the Dialog's Div. I'm assuming there would be a better way to do this though?

Thanks!

score 1 · Answer 1 · edited Sep 23 '11 at 15:17

Here is a generalized function for displaying any formlet inside a jQueryUI Dialog:

[<JavaScript>]
let InDialog (title: string) (formlet: Formlet<'T>) =
    Formlet.BuildFormlet <| fun _ ->
        let state = new Event<_>()
        let conf =
            JQueryUI.DialogConfiguration (
                Modal = true,
                DialogClass = "dialog",
                Title = title
            )
        let dialogOpt : ref<option<JQueryUI.Dialog>> = 
            ref None
        let el =
            Div [
                formlet
                |> Formlet.Run (fun confirmed ->
                    match dialogOpt.Value with
                    | Some dialog ->
                        state.Trigger (Result.Success confirmed)
                        dialog.Close()
                    | None ->
                        ()
                )
            ]
        let dialog = 
            JQueryUI.Dialog.New(el, conf)
        dialogOpt := Some dialog
        Div [dialog] , ignore , state.Publish

And an example of using it:

[<JavaScript>]
let Main () =
    Formlet.Do {
        let! _ =  Controls.Button "Display Form"
        let! name = 
            Controls.Input ""
            |> Enhance.WithSubmitAndResetButtons "Submit" "Reset"
            |> InDialog "Enter your name" 
        return ()
    }

Regarding your question about the Boolean return value. I assume you are referring to Enhance.WithResetAction. The value determines whether the formlet is reset or not, after performing the action.

Thanks, your version is better encapsulated, but your reset button doesn't close the dialog - just like mine. — David Grenier, Sep 23 '11 at 13:53

WebSharper's Enhance.WithResetAction

1 Answers1