Webix 7.0: UI Designer, Webix Tutorials, and Timeline Widget

Meet Webix 7.0 and brand new tools for learning and prototyping. The library now includes a new widget for creating timelines, disabled options for controls and lists and a new autocomplete functionality for text inputs.

We have also released handy tools for our users: UI Designer for low-code UI prototyping and new Webix Tutorials for beginners. Dive in for details.

Webix 7.0: UI Designer, Webix Tutorials, and Timeline Widget

Webix UI Designer

Webix UI Designer is a tool for creating UI prototypes. You can arrange and configure widgets by visual means and get the source code. You can collaborate with your colleagues while working on the same interface.

How to use Webix UI Designer: adding widgets

For more details, go to the UI Designer user guide.

Webix Tutorials

New Webix users can start coding with our new tutorials. We have included all the up-to-date information regarding the most widely-used features on three subjects: Quick Start, Datatable, and Controls.

Webix Tutorials

Timeline Widget

Timeline is a new visual widget for minimalist roadmaps, logs, and highlights. You can define colors, configure the content and position of timeline points and work with the widget as with any other Webix data component.

View code >>

Disabled Options for Controls and Lists

Now you can disable options of Tabbar, Segmented and Radio as well as items of List and Menu. All you have to do is provide a field in the data for the option or a list item.

View code >>

Autocomplete with Suggest Lists for Text Inputs

Due to feedback from many of our users, text inputs received the autocomplete functionality. It works like in the Comments widget: the user needs to type a special character and everything typed after it opens a list of suggestions. Moreover, you can also create several dropdowns that will open after the user types a certain symbol.

View code >>

Spreadsheet Formula Highlighting

Spreadsheet got an Excel-like feature for more convenient editing of formulas in cells. Try it:

View code >>

Datatable Column Sizing Settings

Datatable column settings for sizing have been improved. We have completed their set by adding maxColumnWidth, maxWidth, and maxRowHeight. All of the settings now work for both static and dynamic sizing.

Live demo >>

Code Cleaning

As promised, we removed all deprecated and rarely used API from the library and moved most of it to GitHub. You can use these modules with Webix 7.0 or older and change them in any way.

…and 99 Little Bugs as well

There is also a list of bugs that have been fixed. You can see the whole list of updates and bug fixes on the What’s New page.

Check out UI Designer and Webix Tutorials and write to us what you think. You can get the new Webix version by upgrading the library via Client Area, npm or by clicking the big button.

Download Webix 7.0