Webix 3.0 - New, Purple

Apparently, the developers of this framework are extremely sensitive to changing seasons. I previously wrote about new versions of Webix. And they came out either at the beginning of spring, or at the beginning of summer. At this time, apparently, in the fight against autumn depression, the developers rolled out a major release. In the new Webix 3.0 , in addition to the familiar to us new features and bugfixes, two innovations have emerged that can be considered entirely separate products: Webix Jet and Visual Designer . Let's see what it is, why it is needed and how it looks.

Visual Designer. All Hail Drag and Drop!

What is this thing, I think, is already clear from the title. A visual user interface designer will appeal to visuals or those who simply don’t want to bother with the code.


')
You can quickly create the necessary layout, add the necessary widgets, change properties and get working code.



The application is currently in a beta state and at the time of writing this article there were some vital features missing from it, for example, autocompletion in the code editor. But the developers assure that the work is rather active and the Visual Designer will be overgrown with new useful functions, so it’s worth a closer look at it. You can look at this link .

Webix jet

According to the developers, Webix Jet is a micro-framework whose main goal is to simplify development when it comes to an application with a rather complex structure and the question arises of code reuse, navigation, data handling, etc.

Using Webix Jet, you can easily break an application into modules according to their purpose (interface elements, work with data). In a nutshell, to describe the principles of this framework is not so simple, because the topic is extensive and deserves a separate article. It is better to devote some time to this rather detailed manual (with pictures) and appreciate the concept.

Other Utility

Actually Webix also did not remain without updates. Let's look at the most interesting ones.

New DataTable component properties: subrow and subview

These new features allow you to extend the functionality of the DataTable component).

In order to add some important (or not very) information to the elements of the list, you can use the `subrow` property. You can use it like this:

{ /*   */ view:"datatable", /*  sub-row */ subrow:"Rating: #rating#, Category: #category#", } 

This code will create for each item a substring matching the pattern:



You can create your own subrow for each individual item, change their contents, etc. A documentation page and a demo page are attached.

The `subview` property works in a similar way, but in this case, other components can be added to the list items. For example, in order to add a form, you can use the following code:

  view:"datatable", /*  subview */ subview:{ /*   */ view:"form", elements:[ { /*    */ }, { /*    */} ] }, /*  subview */ on:{ onSubViewCreate:function(view, item){ view.setValues(item); } }, 

As a result, you can get something like this:



The documentation page is here .

Import and export

The new version has additional import and export capabilities.

Now you can add to the application the ability to view PDF and Excel . To do this, use the components pdfviewer and excelviewer . How this looks in practice can be understood from these demos: PDF Viewer , Excel Viewer .

Also, there is the ability to export to Excel , available for all data components. You can try on this demo page . The saved file can later be used as a data source for other components.

The ability to export to PNG can be useful if you need to save the schedule for future use. The demo is here .

Instead of conclusion

At this time, in addition to innovations relating to the actual performance of the framework, the developers proposed, in fact, two more possible ways of how this same framework can be used.

In addition to these innovations, other innovations are available. The full list can be viewed on this page . By tradition, a rather large list of updates and bug fixes is attached.

For those who are already using Webix, this migration guide can be useful.