Defining windows via html tags

I have been creating windows from html tags rather than from JS (all the examples are using JS). Here is what I have come up with: http://webix.com/snippet/49e67079

Is this the correct way to define a window in HTML? In particular, where should the div for the window go? It also seems that the webix-ui attribute is required, which strikes me as strange.

It may also be useful to describe more fully how the <config> tags correspond to the json config that is generated (this is particularly necessary when you consider non-body config, which you can specify using the normal div tags). The only place I’ve seen configuration mentioned was in the http://docs.webix.com/datatable__external_configuration.html , and there, html configuration is not covered. The 08_complex AngularJS example helped a lot in seeing how the configuration is done.

If you are using init from angular - webix-ui need to be set on top level UI element ( all inside of this element with such attribute will be converted to Webix based UI ). As window is a top level element, it must not be included in other UI and has webix-ui on its top tag.

Also, you need not use config to define the window, check the next code snippet
http://webix.com/snippet/00f5cb27

The “config” property was later addition, and can be used to represent json configuration structures in HTML. It is necessary only for views with complex configuration ( such as chart for example, where many configuration properties accept js objects )

Each config tag will be converted to js object ( attributes of tag will be used as properties ) and will be added to the parent view configuration

It can be used to encode sub-views, as in your original code snippet, but it is a side effect not the original scenario of usage.

I see - the snippet is very helpful (as always) :slight_smile: It’s great that there is an alternative to using config, because as you say, writing that didn’t feel like the original intention of the toolkit.

So basically I use <div type="header" for header-styled elements in the normal layout, and <div view="head" in windows.

Also the snippet shows an error when you click the close button (demonstrating the click= syntax for event handling).

Yep, it is already fixed in dev. build - we will release it till the end of this week.

Fixed build ( v.1.5.1 ) is available at github - Releases · webix-hub/webix · GitHub