02 - Customizing your alert

So now you've got this code to show the text "Hello World".

$alert("Hello World");

Now what if you wanted to set another icon, or change the title, or make it unclosable. This is where objects come in.

What are Objects

An object is basically just a structure of properties and values. It looks like this and can be used as a parameter for a function (instead of the simple text we have right now)

{
    property: value,
    property: value,
    property: value
}

Instead of property, you'd write the name of the setting you want to change (like title or icon), and instead of value you'd write what you want it to be set to.

For example, if you want to make the message "Hello!", the title "Test Dialog", and have the window not closable, you'd write this:

{
    msg: "Hello!",
    title: "Test Dialog",
    closable: false
}

The property names used here are:

msg: The text to show.

title: The title of the window.

closable: Whether the window can be closed

Adding an Object to the Alert

To set these options for our $alert function, we can simply add in the object instead of the current text. It should look like this:

$alert({
    msg: "Hello!",
    title: "Test Dialog",
    closable: false
});

Tip: If you want to make an alert look like a error or an information box, you can simply use $alert.error("Hello!") or $alert.info("Hello!"). You can't use an object in $alert.error or $alert.info though, as they have their options set already.

Now, if you run this in the developer console we set up earlier (you can always get back to it by pressing Ctrl+Shift+I), it should show this.

As you can see, the alert is no longer closable, the message is now "Hello!" and the title has been changed to "Test Dialog".

What names should I use?

You might be wondering how you're supposed to know what the property names are. This is what the documentation itself is for.

If you look at the page for $alert, it says that you can use a WinObject. The documentation for WinObject (located in $window) has a list of every property name you can use (and a description of what they do). Just add these to your object and you can change even more things, like the icon or size.

In the next chapter, we'll try to use callbacks to create a prompt dialog. Thank you for making it this far.

--> [Next Chapter]