Webix 4.2 comes out: new features overview

Release 4.2 is available for downloading from our website. Moreover, for the first time both Standard and PRO versions of Webix can be installed via npm package manager. Let’s look at the library’s new features.

Webix and Vue.js integration

Installing via npm

As I’ve mentioned before, in addition to CDN, Bower and NuGet, you can install and update Webix with npm package manager for JavaScript. You need to run the following command for Standard Webix version:

npm install webix

For the first time ever “distance” installation is available for owners of commercial licenses. To get access to Webix npm repository you need to register a developer in your Client Area. After this, you will receive username and password for accessing Webix and its complex widgets according to your license. Updates will be available during the whole licensing period.

image01

Additional functionality for widgets and controls

  • You can export data from any data widget to a CSV file.
  • You can upload the whole folder full of files with Webix Uploader control. It’s a useful feature for uploading for than 2 files at once.
  • Gage widget that was released in Webix 4.1 receives the possibility of customizing color scheme. Now you can use Gage widget at your dashboard with automatic change of custom colours within a provided range or with one and the same configurable colour for all values.

image02

Web Worker for Pivot

Web Worker is a simple tool for running scripts in background threads.

The technology is supported by the most recent desktop and mobile browsers: IE (10+), Firefox, Chrome, Safari, Opera, iOS Safari, Android Browser (4.4+), Chrome for Android.

In 4.2 release you can use Web Worker for Pivot complex widget. Web Worker resolves the issue with blocking app’s interface during bulky operations and increases UX for the end client. We are interested in your feedback on Web Workers for possible implementation in other widgets.

Updated Spreadsheet

After a big update of Spreadsheet complex widget in September 2016, it’s time to add some new features to it.

1. Specific functions for processing text data in formulas;

You can use string functions to work with text data in cells

image00

For example:

  • UPPER — converts text to uppercase
  • TRIM — removes spaces from text
  • LEFT (text, count) — returns the first character or characters (leftmost) in a text string, based on the number of characters you specify
  • and many more

The whole number of functions has been increased to 39.

2. Creation of custom functions for use in formulas;

One of the major aspects of Webix UI library is that you can modify all widget’s options without loosing in functionality. So if you require some specific function beyond the set of built-in ones, you will get the opportunity to create it by yourself.

3. Using ‘&’ operator in formulas to connect text data;

The new version introduces the “&” operator in addition to the existing “+”, “-”, “*”, “/” ones. It allows concatenating cell data, text and numbers into a string. For instance, the “=1&5” formula results into “15”.

image04

4. Using cell data from different sheets in formulas;

When you load versatile data into Spreadsheet, you are likely to display it in several sheets. But in such cases you face an issue with accessing data from different sheets. From version 4.2 we add a possibility of referencing data from other sheets in formulas.

image06

5. Selecting cell range using keyboard navigation;

Keyboard navigation becomes more functional: you can select the necessary cell range using the Shift button and navigation arrows. In addition, the headers of selected cells are highlighted.

image05

6. Removing unused styles.

Starting from 4.2, you can use specific API to remove unused CSS styles from the Spreadsheet to minimize data and сut off unnecessary code.

Vue.js integration

The brightest star of 4.2 release is an integration with Vue.js framework. Vue.js is a lightweight (17 kb min+gzip) and easy-to-use alternative to Angular.js, React.js, Polymer и KnockoutJS. The integration works in both directions: you can either add Webix widgets (such as DataTable, Spreadsheet, etc) to Vue.js-based apps or use Vue templates within Webix UI.

You can find more information at the 4.2 What’s new page.

Download Webix 4.2 and feel free to share your feedback below the article.

image07