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.
Basic message is created with the help of webix.message() function that has message text as parameter (short form).
webix.message("All is correct");
Such message is displayed in the top right corner of the window and doesn't prevent the work of the parent app while modal message boxes (described later) do.
Message | Image |
---|---|
Default | ![]() |
Error (type:'error') | ![]() |
Related sample: Validation with a Complex Rule
Message Types
As seen above, message boxes can be of two types:
The latter has type argument in addition to message text and features an extended form of initialization:
webix.message({type:"error", text:"Form Data is Invalid"});
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 cancelling expire period
})
If you cancel expire period, such message will disappear only on mouse click.
Message boxes can as well be hidden programmatically:
var message = webix.message("Hi!");
webix.message.hide(message);
Message boxes resemble ui-related modal Window yet they are initialized in a completely another 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 an "OK" button. There exist three types of modal message boxes:
The boxes share some common properties, namely:
The callback function takes result of user communication with a message box as parameter. It can be:
Result is used in callback function that defines further actions according to its value (true or false).
At the same time, callback can be set not depending on the result, as a fucntion to be executed on button click.
The text of its only button is defined as value of ok parameter. Passing result into callback is optional.
Short form
//the shortest form
webix.alert("Text");
//short form with callback
webix.alert("Test alert", function(result){....});
Long Form
webix.alert({
title:"Custom title",
ok:"Custom text",
type:"alert-warning",
text:"Warning",
callback:function(){...}
});
Confirm message boxes contain two buttons - "ok" and "cancel", which text is defined in the same-name properties.
webix.confirm({
title:"Custom title",
ok:"Yes",
cancel:"No",
type:"confirm-error",
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 in its modality, yet features several peculiarities:
webix.modalbox({
title:"Custom title",
buttons:["Yes", "No", "Maybe"],
text:"Any html content here",
width: "500px",
callback: function(result){
switch(result){
case 0:
//statement
break;
case 1:
//statement
break;
...
}
}
});
Keyboard functionality for modax boxes is controlled by webix.message.keyboard property that is initially true.
By default modal boxes block keyboard events of the page. Users can use obly the following keys that set modal box value and close it:
To enable keyboard events (and disable above mentioned keys) you should set keyboard property to false:
webix.keyboard.message = false;
webix.modalbox({...})
From now on, user gets a possibility to use full keyboard, for instance, for typing values into inputs inside modal boxes.
Back to top