Webix 2.4. Door to summer

Summer is gaining momentum, and Webix developers have made sure that you have something to do on vacation or on vacation. Not so long ago a post about a new, version 2.4, framework version appeared in their blog. New features, updates, a long list of bug fixes. Very exciting! Let's see in more detail what we have prepared for us.

By the way, if you hear this title for the first time and don’t understand what it is about, my little Webix-tutorial is available here .

Portlet widget

')


A portlet is a drag-and-drop container that can contain any other element. Thus, you can quickly change the location of elements on the page. Better understand how it looks, help the demo .

You can add a separate portlet like this:

{ view:"portlet", body:{ template:"My portlet" }} 

For those who have not read my introduction article and are not familiar with Webix: the `view` property is necessary for adding a new element, and its value determines the type of element being added. Thus, the code above will add one portlet to the page with the content defined by the `body` property.

More info and demos can be found on the documentation page.

Multicomb

Multicombo will be useful if, when working with forms, the user needs to select several items from the list. We click on the multicombo-field - a drop-down list with checkboxes appears. Choose the right. Done! Demo page .

You can use it like this:

 { view:"multicombo", label:"To", value:"2,3,4,13", suggest: "data/names.js"} 

where `value` contains the elements initially selected, and` suggest` (function or string) defines the data source for the drop-down list. Documentation is available here .

RangeSlider

Unlike the good old slider, this allows you to select a specific range of values. Demo .

We use, for example, like this:

 { view:"rangeslider", label:"Level B", value:[0,100], name:"slider1"} 

where the `value` contains the desired range of values; `name` is the name of the control needed to extract the selected value from it.

Validation of forms

Users always strive to enter incorrect data! A feature called Validation Message has been developed for the most unsteady of them. It paints a field with incorrectly entered data in a radically red color and displays the specified error message. The correctness of the entered data, by the way, can be checked with the help of predefined rules by the developers:

 var form = [ //some code here { view:"text", label:'E-mail address', name:"email", invalidMessage: "Incorrect e-mail address" }, //some more code here ]; webix.ui({ view:"form", elements: form, //form config rules:{ "email": webix.rules.isEmail, }, //some more form config }); 

For the displayed message, of course, the `invalidMessage` property is responsible. For information on how to force even the most insensible to enter valid data, read the documentation .

In addition to the innovations described, the developers, like last time, made many updates and corrected a large number of errors. Full list of changes is available here .