NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Webix 6.3: Full-Screen Mode, Improved Button Styling, Promises for Save Operations

Meet new Webix 6.3. With the new version, you will get the full-screen mode for UI widgets, new rules of button styling and typing, promises for data saving, and mentioning functionality in the Comments widget.

Check the complete list of new features and updates on the What’s new page and read on to find out more.

Webix 6.3: Full-Screen Mode, Mentions in Comments, and Improved Data Grouping

All Widgets to Full-Screen Mode

Any widget or HTML element can be opened in the full screen mode thanks to the new fullscreen helper.

// open in the fullscreen mode
webix.fullscreeen.set("chart1");
// exit the fullscreen mode
webix.fullscreen.exit();

Live demo >>

Close Windows Easily

It is much easier to add a button that hides a window. Just add one setting:

{ view:"window", head:"My window", close:true }

View code >>

Improved Settings for Buttons

Button settings have become more consistent: now you can define button type and styling separately and combine them in any way.

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”

For instance:

{ view:"button", type:"icon", css:"webix_primary" /* a blue button with an icon */ }

View code >>

The whole range of button types was reduced, in particular we have removed the outdated arrow buttons. Please pay attention to the migration guide.

Mentioning Users in Comments Widget

The Comments widget and mentioning functionality are together at last. Now comments can be addressed to people if you @mention them from the current discussion.

View code >>

Promise for Save Operations

Now you can wait not only for data loading, but also for saving operations.

view.waitSave(() =>
  view.add({ name:"New User", email:"", roles:"" })
).then(
  obj => view.select(obj.id)
);

It means that 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 standalone DataProcessor that can be used as server API for multiple widgets including non-data views like forms

Live demo >>

Improved Data Grouping API

API for grouping data has become more flexible. Now you can define the behaviour of records that do not fall into any group: either show them as non-grouped, or hide, or create a separate group for them.

View code >>

Grouping by multiple criteria is more straightforward now. You can also provide additional grouping criteria for the root or any other branch.

view.group({
  by:"year"
}, "0$1957");

View code >>

Unified API for Datatable Column Options

We have unified the way of setting options for datatable columns, editors and filters. Now you can define them as:

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

Whichever way you choose, the options will be stored in a Data Collection and you can easily access it to read and modify options data.

Live demo >>

Drag-n-drop Events for Dashboard

The Dashboard widget DnD events. You can catch the necessary moment and conveniently customize DnD within the component.

View code >>

Scheduler Backend Samples to NodeJS

Scheduler package samples have migrated to NodeJS, so now it is easier to run them locally. Just execute npm install and npm run server commands, and you will get working examples with the database.

Scheduler server samples

Scheduler also has an oncoming major update, the beta version of which will be available as a technical preview in mid May. You will be able to evaluate Scheduler as a Webix Jet app packed as a Webix widget. Already interested?

What is Next

Other updates and bug fixes can be found on the What’s new page. Also do not forget to check the the list of all the API that will be removed from Webix 7.0.

You can get Webix 6.3 via npm and Client Area if you are a PRO user, or by downloading the Trial version to give it a try.

Download Webix 6.3