Webix 3.4 released

Hey guys!

We are so glad to present our new Webix 3.4 update today! Hope you are still fresh and rested after the weekend and ready to test something new, because definitely we have a bunch of features to show. Here we go!

Webix 3.4 release

Webix Remote for PHP and NodeJS

Establishing communication between a client and a server can be rather a difficult task. While working with a single component it may cause little problem, but any reasonably big app becomes a mess of AJAX calls on the client side and pretty tangled code on the server side.

To make your life easier, Webix 3.4 provides a solution to call server-side code directly from JavaScript.

//on the server side
api.setMethod("add", (a, b) => a+b );
//on the client side
var sum = webix.remote.add(2,2);

There are ready to use toolkits for NodeJs and PHP. You can use them with a Webix component (by linking both data loading and data saving of any component to a server side method) or with any other code. Now to get some info from the server side you don’t need to make AJAX calls, just call the necessary code directly.

Behind the scenes, WebixRemote will make all necessary calls, handle errors and protect from XSS and CSRF attacks. So, you can spend more time on interesting tasks, instead of reimplementing the REST backend again and again.

Frozen rows in a DataTable

For now Webix DataTable has the ability to freeze leftmost and rightmost columns. It allows ensuring that some columns will always be visible to the end user.

Starting from Webix 3.4, you will be able to freeze not only DataTable columns, but rows as well. Updated DataTable widget allows you to define some rows as “frozen” so they will stay at the top and will always remain visible. Frozen rows will ignore sorting and filtering commands.

frozen raws

All other features of DataTable (navigation, selection, editing, paging, etc.) will work correctly with frozen rows. There are no limitations. Check the related documentation and samples for more details.

Formatting patterns for Form inputs

Next feature included into the version 3.4 is a smart upgrade of Webix Text control which turns it into a powerful tool of data formatting. From now on, a simple pattern setting allows you to define an input mask that will be applied on the fly.

formatted

What does the pattern include:

  • the mask itself that is introduced via a string like ###-##-######;
  • a set of allowed characters for the mask defined by a regular expression;
  • a simple auto-generated rule for validation (can be changed).
webix.ui({
     view:"form", elements:[
           { view:"text", name:"phone", pattern:webix.patterns.phone },
           { view:"text", name:"custom", pattern:{ mask:"###-##-########", allow:/\w/g }}
    ]
});

Webix offers three built-in patterns in the webix.patterns class for masking a phone number, card number and date. You can easily extend this list with a custom pattern to match your needs.

Month and year pickers

We like our Calendar. We think it is cool and easy-to-use. But at the same time we won’t miss the opportunity to update it or add some new features.

That’s why today Webix provides new modes for Calendar and Datepicker: “month” and “year” that allow selecting a month or a year, correspondingly.

month picker

API to hide/show options in Tabbar and Form controls

You won’t see lots of text in this paragraph. But the significance of this new addition shouldn’t be minimized.

With version 3.4 Tabbar and Segmented button acquire methods that allow them to hide / show options.

Tabbar

Four new sparkline types for DataTable and TreeTable

With our last release of Webix 3.3 we have presented a predefined cell template – sparklines. Since then we have implemented a whole set of new sparklines types. Now Sparklines support four absolutely new types: “bar”,  “area”,  “pie” and “splice”.

Sparklines “bar”

sparklines bar

Sparklines “area”

sparklines area

Sparklines “pie”

sparklines pie

Sparklines “splice”

sparklines splice

And of course we never forget about bug fixes and other useful improvements. Just download our free Trial version to check this out (if you are new to Webix) or leave in comments your fresh thoughts (for those who are in love with Webix as we are).

Share this post with your friends and get +3.4 to your karma! 😉

Stay tuned and develop with Webix!