Intermediate

Creating Message Boxes

Webix UI library helps the app communicate with users with the help of messages that can warn about error, log events, display variable values, etc.

Info Message Box

An info message is non-modal. It is displayed in the top right corner of the window and doesn't prevent the work of the parent app as modal message boxes do.

Initialization

A basic message is created with the help of the webix.message() function that takes a message text as a parameter (in the short form).

webix.message("All is correct");

You can also use an extended form to initialize a message. It contains an object with the parameters listed below:

  • text - (string) mandatory, the text to show
  • type - (string) optional, the type of a message box: "info", "success", "debug", or "error"
  • expire - (number) optional, the expire interval for a message in milliseconds, 4000 by default, -1 for not hiding the message
  • id - (id) optional, the id of a message box
// extended initialization
webix.message({
    text:"Form Data is Invalid",
    type:"error", 
    expire: 10000,
    id:"message1"
});

Message types

Message boxes can be of the following types:

  • info (default, white background);
  • success (green background);
  • error (red background);
  • debug (yellow background) - messages of this type are shown in the Webix debug version when typical code errors occur.

The "info" type is set by default, while the "error" and "debug" types are defined through the extended form of initialization:

webix.message({type:"error", text:"Form Data is Invalid"});


Table 1 Message boxes
Message Image
Default (type:"info")
Error (type:"error")
Debug (type:"debug")
Success (type:"success")

Related sample:  Validation with a Complex Rule

Expire interval

By default, Webix Message disappears either on mouse clicking somewhere outside it, or in 4000 milliseconds after appearing.

To change the expire interval or cancel it, use the expire parameter:

webix.message({
    type:"error", 
    text:"Form Data is Invalid",
    expire:10000
    // expire:-1   for canceling the expire period
})

If you cancel the expire period, such a message will disappear only on a mouse click.

Hiding messages

Message boxes can as well be hidden using API:

var message = webix.message("Hi!");
webix.message.hide(message);
 
// or via the message id
webix.message("Hi!","info",-1,"hi");
webix.message.hide("hi");

Modal Message Boxes

Modal message boxes resemble UI-related modal Window, yet they are initialized in a completely different way.

They prevent the workflow on the parent app, until you perform actions required by them (button clicking, as a rule). Message boxes close on a button click and callback function, if any is executed.

Message boxes contain some text and the "OK" button. There exist three types of modal message boxes:

The boxes share some common properties, namely:

  • container - the container of the box (optional);
  • title - text of the header;
  • ok - text of the "ok" button;
  • cancel - text of the "cancel" button (only for a confirmation box);
  • text - text of the window body;
  • callback - function that is executed on a button click. The callback function may include another message box the contents of which depend on your choice in the previous step;
  • type - the type of a modal message box to show a warning or an error ("alert-warning" or "alert-error" for a modalbox and an alert box, "confirm-warning" or "confirm-error" for a confirm box);
  • width - the width of a message box;
  • height - the height of a message box.

The callback function takes the result of user communication with a message box as a parameter. It can be:

  • boolean true - each time you press its "OK", true is passed to the box callback. It's the only possible value for the alert box, as it features the "OK" button only;
  • boolean false - each time you press "Cancel", false is passed to the callback. Works for the confirm box;
  • button index - true for the modal box. Stores the index of the clicked button (zero-based numbering).

The result is used in the callback function that defines further actions according to its value (true or false).

At the same time, a callback can be set independent of the result, as a function will be executed on a button click.

Initialization

webix.alert

The text of the only button of an alert box is defined as the value of the ok parameter.

Short form

// the shortest form
webix.alert("Text");
 
// a short form with callback
webix.alert("Test alert", function(result){....});

Extended form

webix.alert({
    title:"Custom title",
    ok:"Custom text",
    text:"Warning",
    callback:function(result){...}
});

Related sample:  Alert Message

webix.confirm

Confirm message boxes contain two buttons: "ok" and "cancel", the text of which is defined in the same-name properties.

Short form

// the shortest form
webix.confirm("Text");
 
// a short form with callback
webix.confirm("Test confirm", function(result){....});

Extended form

webix.confirm({
    title:"Custom title",
    ok:"Yes", 
    cancel:"No",
    text:"Test confirm",
    callback:function(result){ //setting callback
        webix.alert({
            title:"Your Choice",
            text:"Result" +result //using callback
        });
   }
});

Related sample:  Confirm Message

Webix modalbox resembles alert and confirm boxes in its modality, yet features several peculiarities:

  • its text can include any HTML content;
  • it may contain as many buttons as you wish, defined in the buttons array. This array contains text values for all buttons;
  • the callback takes the index of the chosen button as a parameter.

Short form

// the shortest form
webix.modalbox("Text");
 
// a short form with callback
webix.modalbox("Test modalbox", function(result){....});

Extended form

webix.modalbox({
    title:"Custom title",
    buttons:["Yes", "No", "Maybe"],
    text:"Any html content here",
    width:500,
    callback: function(result){
        switch(result){
        case "0": 
            //statement
            break;
        case "1":
            //statement
            break;
        ...
        }
    }
});

Related sample:  Modal Box

Subtypes of Modal Boxes

There are subtypes of default modal boxes that allow you to show a warning or an error. The type is set as a second parameter of the corresponding method for creating a particular message box or defined in the box configuration via the type property. In both cases its value is set as a string.

Alert modal box

  • "alert-warning"

webix.alert({
    title: "Close",
    text: "You can't close this window!",
    type:"alert-warning"
});
  • "alert-error"

webix.alert({
    title: "Close",
    text: "You can't close this window!",
    type:"alert-error"
});

Confirm modal box

  • "confirm-warning"

webix.confirm({
    title: "Close",
    text: "You can't close this window!",
    type:"confirm-warning"
});
  • "confirm-error"

webix.confirm({
    title: "Close",
    text: "You can't close this window!",
    type:"confirm-error"
});

Modalbox

The modal message box may use the same types that are applied to alert message boxes. For example:

webix.modalbox({
    title: "Close",
    text: "You can't close this window!",
    buttons:["Yes","No","Maybe"],
    width:500,
    type:"alert-warning"
});

Hiding Modal Boxes

A modal box closes when you click any button on it. In case, you have a modalbox without buttons, you can use the direct API call:

// showing a modal box
var box = webix.modalbox({...});
// hiding a modal box
webix.modalbox.hide(box);

The modalbox API works for confirm and alert boxes as well:

// showing a confirm box
var box = webix.confirm({...});
// hiding a confirm box
webix.modalbox.hide(box);

Styling Message Boxes

You can redefine the style of any message box through CSS. The name of a CSS class corresponding to a particular type of a message box is kept as webix_[type]. You can specify your own styling for a message box itself, as well as for its inner and outer borders as follows:

/* message box + inner border */ 
.webix_mystyle div{
  background-color:#cdb4e4;   
  border: 1px solid #676d71;
  color:#484444
}
/* outer border */
.webix_mystyle {
   background-color: #7e59bd;
   border: 1px solid #7e59bd;
   box-shadow: 0 0 10px #000
}

To apply the redefined style to the message box, specify its name in the box configuration using the type property:

webix.message({
    type:"mystyle", 
    text:"Some message"
});

Keyboard Interaction

Keyboard functionality for modal boxes is controlled by the webix.message.keyboard property that is initially set to true.

By default, modal boxes block keyboard events of the page. Users can use only the following keys that set a modal box value and close it:

  • "space" and "enter" for setting true value as a modal box result;
  • "escape" for setting false value as a modal box result.

To disable the above mentioned keys and enable standard keyboard events, you should set the keyboard property to false:

webix.message.keyboard = false; 
webix.modalbox({...})

From now on, the user gets a possibility to use full keyboard, for instance, for typing values into inputs inside modal boxes.

Back to top