SweetAlert in WebSharper

Success type box

Popup boxes can be useful in many situations, but to be honest the default alerts of JavaScript are pretty ugly, and too annoying for most people’s taste. Fortunately there is a really nice JS library called SweetAlert which solves all of your alert problems. Today I’m going to show you how does the new WebSharper extension for this library work.

Configuring a box

Let’s start it with the options. What can we configure? More stuff than you can imagine. Here I will only cover the most important options. For the full list visit the JavaScript library docs.

  • TitleText: This is the title of your box, as text (so HTML won’t work). If you want to use HTML inside just use Title instead.
  • 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 = 
Box(
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 Promise from JavaScript will sound familiar, basically 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
Warning type box

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 Box:

let InputBox =
Box (
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 ignore it.

Question type box

Other features

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.