The Evolution of Webix from 6.0 to 6.3

Webix JavaScript UI library
6 min readMay 11, 2019

Webix has made big steps to perfection within the time period of about 6 months. It has acquired brand-new advanced features and functionality. So let’s trace the evolution of Webix from 6.0 to 6.3 and note the main changes and improvements that have seen the world.

Webix 6.0 upgrades

The most important feature that has come into the world with Webix 6.0 is the new default material skin and its mini version.

The most prominent characteristics of the new material skin are the following:

  • Light state-of-the-art theme;
  • Material design icons which are optional to use;

Webix 6.1 accomplishments

New Comments widget

Now you can bring your users together with the help of the new Comments widget. It enables employees to discuss their work tasks right in the comments section of the application.

Kanban updates

Now it’s possible to use Kanban as a ready-made feature-rich task-management application. The new Kanban has the following peculiarities:

  • Modern design;
  • The possibility to add comments;
  • The existence of a pop-up card editor that helps control all the tasks (attach files, change tags and text, delegate tasks, etc.);
  • The ability to give tasks quickly with a dropdown list;
  • Card action menu for typical actions.

Skins support for complex widgets

In Webix 6.1 you can enjoy the new ability of complex widgets to support all design skins.

The 6.0 and 6.1 Webix releases have brought to life many advancements and long-expected features, but still the main changes and upgrades have come with Webix 6.2 and 6.3 releases.

Webix 6.2 updates

Webix tooltips for different parts of a web app

With Webix 6.2 one of the most eagerly anticipated and prominent features has appeared. It’s the possibility to add Webix tooltips to DataTable headers and footers, templates, controls, and different HTML elements.

Major updates of export to PDF include:

  • The ability to export widgets as images;
  • The ability to export several views simultaneously.

Drag-n-drop updates

There are two main updates of drag-n-drop: the new move mode for dragging with nice user experience and improved order mode.

Modal boxes

Modal boxes have also changed in a positive direction. When you create a confirm box, it becomes a promise that resolves or rejects when users click a button. Moreover, now modal boxes can be properly initialized for an HTML container.

Proxy mechanism

With Webix 6.2 release, proxies have become more straightforward and simple. Users can customize loading and saving pattern using conventional Promise API.

Filemanager and Spreadsheet samples to NodeJs

All the package samples have migrated to NodeJs. From now on, you have ready-to-use backend solutions. You can change and use them as you like.

Webix Jet 2.0

The size of the microframework Webix Jet has been reduced by 5 KB.

Webix Jet has also improved thanks to a number of changes:

  • The ability to show views in new windows;
  • The ability to show windows like other views by including them in the app URL;
  • Subviews in apps with their own app URLs;
  • Zero-friction app in app usage;
  • The ability to use all the settings of HashRouter to configure UrlRouter, since they share all settings now.

Webix 6.3 changes

Full-screen mode

Now you can open all widgets and HTML elements in the full-screen mode with the help of the new fullscreen helper.

Close button

One of the nicest new features is the ability to add a button that closes a window with one setting.

View code >>

Improved button settings

Button settings have improved. You can define button type and styling separately and combine them in different ways.

Now the buttons can be customized with the following settings:

  • types: default, “icon”, “iconTop”, “image”, “imageTop”
  • CSS: “webix_secondary” (default), “webix_primary”, “webix_danger”, “webix_transparent”

View code >>

The number of button types has been reduced, particularly, the outdated arrow buttons have been removed. To learn more, get familiar with the migration guide.

The ability to mention users in Comments widget

Now you can address comments to definite people and mention them in your discussions.

Save operations

Now you can easily adjust saving to your needs:

  • tune pessimistic data saving: first wait for the server response, then update the client;
  • wait for several saving operations;
  • initialize a separate DataProcessor that can be used as server API for multiple widgets including non-data views like forms.

Live demo >>

Data grouping API updates

API for grouping data has improved. Now it is more flexible. You can define the behaviour of records that do not fall into any group. They can be shown as non-grouped. You can also hide them, or create a special group for such records.

View code >>

Grouping by multiple criteria has become more straightforward. It has become possible to provide extra grouping criteria for the root or any other branch.

View code >>

API for DataTable column options

Now you can use a new unified way of setting options for DataTable columns, editors and filters. You can define them as:

  • JS array or object;
  • Data Collection;
  • path to server script;
  • loading function or proxy.

All the options will be stored in a Data Collection. So it’s possible to access it and modify options data.

Live demo >>

Drag-n-drop for Dashboard

Now the Dashboard widget has Drag-n-Drop mode. You can customize DnD within the component.

View code >>

Bottom line

There is no limit to perfection. As you see, Webix has changed a lot in a positive direction starting from its 6.0 version and ending with 6.3 version. It has acquired a lot of cutting edge features and enhancements. And even bigger improvements lie ahead with the oncoming release of Webix 7.0. One of the changes will bring on the removal of deprecated API and modules.

--

--

Webix JavaScript UI library

#JavaScript UI library for #cross-platform #web app development with 100+ #UI widgets and fully-featured #CSS / #HTML5 JavaScript controls. www.webix.com