SweetAlert in WebSharper
Configuring a box
- TitleText: This is the title of your box, as text (so HTML won’t work). If you want to use HTML inside just use
- Text: The description of the box. If you want to use HTML inside of the description use Html instead of Text.
- Type: The type of the box. It specifies the icon of the box. It can be warning, success, info, question and error.
- Input: The first interesting bit. The box can contain input fields form the following types: text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url.
- InputValidator: You can add an input validator. It should return with a
SweetAlertProm. (a little bit more on that later)
- ImageUrl: If you don’t like any of the default icons, or you need something different you can use a custom icon instead. In this case it is possible to specify the size of the icon with ImageWidth and ImageHeight.
You can set the needed configurations by instantiating a
Box object, and setting its values.
Let’s say you want to warn your users when they are trying to close a window, to make them less likely close a window by accident without saving:
let WarningBox =
Title = "Warning!",
Text = "You are about to close this window!",
Type = "warning",
AllowOutsideClick = false,
ShowCancelButton = true
Okay, we have
Box with the needed attributes. Now what? Well, we have to show it to the user. Exactly that is what the
SweetAlert.ShowBox function does.
That’s it? Not exactly.
ShowBox shows the passed box, but after that it returns a
SweetAlertProm object. For some of you
SweetAlertProm is a
Promise. For those who don’t know what Promises are, I recommend to check out the MDN docs.
In case you just wanted to show a simple info or warning box, you won’t use the returned
SweetAlertProm often, so you can just do this:
SweetAlert.ShowBox WarningBox |> ignore
In the next section we will use them.
Boxes with input fields
Yeah, you can do that. The input field types can be the following: text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url.
First let’s configure a new
let InputBox =
TitleText= "Hey there",
Text = "How can I call you?",
Type = "question",
Input = "text"
After that we will have to use
ShowBox to make it visible. As I’ve said before the function will return with a
SweetAlertProm, which we will use to get the user input.
let rName = Var.Create ""
SweetAlert.ShowBox(InputBox).Then(fun (result: string) -> rName.Value <- x)|> ignore
If you have
open WebSharper.UI.Next.Notation at the start of you code, you can use
rName := x instead of
rName.Value <- x.
Okay, what happened? First I have created a new reactive variable. That will contain the user input once it is set. Then I have made the
InputBox visible to the user. Once the user clicks the confirm button the
Then function gets called. We have to pass a function to
Then. That function will do stuff with the user input, in our case it will put it inside of
rName reactive variable, so I will be able to use it later.
Then returns with a
SweetAlertProm so in the end if we don’t want to do anything else with it we can
SweetAlert has many more methods and options, which I didn’t cover in today’s post, if you are interested they are in the library’s documentation. The extension features all of them with the same name (except they start with a capital letter).
Snippet on Try WebSharper
As a summary I have made a snippet on Try WebSharper. It goes over everything that I was talking about in this post, so if something wasn’t entirely clear I hope that it helps, and you can see SweetAlert in action and can try yourself to create something interesting with it. The examples vary a bit from the ones in the blog, but the main features are the same.