Initialization from HTML Markup

See also general rules of markup initialization that are described in separate article.

Initialization from HTML is a nice feature for those who work in HTML mainly. By the way, a similar technology is used within JQuery Mobile framework.

Basic principles

1. DIV blocks as components

The page is divided into div blocks that house Webix components defined by their data-view attribute:

  • data-view="component_name" to initialize most of Webix components;
  • data-view="cols" or data-view="rows" to initialize Webix layout;
<div data-view="rows"> <!--layout-->
    <div data-view="template" data-height="35"> My header</div> <!--template-->
</div>

2. "Data" attributes as component properties

DIV "data" attributes set other properties of the component:

<div data-view="text" data-name="email" data-label="Email"></div>

In other words, you use the same properties as in JSON configuration, but prefix them with "data-".

Pay attention that while parsing from HTML, camelCase attributes must be replaced with dashed ones: "minWidth" => "data-min-width":

<div data-view="list" data-width="320" data-max-width="500" data-min-width="100">
    #id#: #value#
    <ul data-view="data">
        <li id="9998">Item 1</li>
        <li id="9999" class='myitem'>Item 2</li>
    </ul>
</div>

3. Inner HTML matters

Inner HTML of a DIV block defines visible text:

  • text of a button, template, text, textarea, etc.:
<div data-view="button" data-width="150">Button</div>
<div data-view="text" data-label="Phone">123456789</div>
<div data-view="template" data-height="35"> My header</div>
  • text of a window head:
<div data-view="window" data-id="win1">
    <div data-view="head">Test header</div>
    ...
</div>

Related sample:  HTML initialization : Window

  • data template for data management components:
<div data-view="list" data-url="data/data.json" data-select="true">
    Package: #Package# (#Version#)
</div>

Related sample:  HTML initialization

4. Specific tags and attributes

<div data-view="layout" data-stack="cols">
    <div data-view="template">Cell 1.1</div>
    <div data-view="template">Cell 1.2</div>
</div>

Related sample:  HTML initialization : Nested layouts

<div data-view="headerlayout" data-stack="cols">
    <div data-view="body" data-header="Section A">
        <div data-view="list" data-url="data/data.json"> #id#: #Package# </div>
    </div>
    <div data-view="body" data-header="Section B">
        <div data-view="list" data-url="data/data.json"> #id#: #Package# </div>
    </div>
</div>

Related sample:  HTML initialization : Accordion

By default, the sub items will be treated as rows for layouts and form and cols for toolbar.

<div data-view="toolbar"> <!--data-stack="cols"-->
    <div data-view="button" data-width="150">Button</div>
    <div data-view="label" data-label="Press the button to run App"></div>
</div>

Related sample:  HTML initialization

  • config - defines configuration for a complex property that contains several settings in itself:
<div data-view="list">
  <config name="type" height="50" width="200"></config>
    #id#: #value#
  <ul data-view="data">
    <li id="9998">Item 1</li>
    <li id="9999" class='myitem'>Item 2</li>
  </ul>
</div>

5. Standard HTML

Standard HTML is used for:

  • form and its elements:
<form>
    <input type="text" name="title" value="" placeholder="Book title" /><br/>
    <textarea name="annotation" id="annotation" rows="4">some book annotation is here</textarea><br/>
</form>

Such code can be easily turned into Webix HTMLForm component:

<form data-view="htmlform" data-id="formView">..

Related sample:  HTML initialization : HTML form

  • inline data within data presenting components:
<div data-view="list" data-width="320">
    #id#: #value#
    <ul data-view="data">
        <li id="9998">Item 1</li>
        <li id="9999" class='myitem'>Item 2</li>
    </ul>
</div>

Note that inline data source is marked by data-view attribute with data value.

Related sample:  HTML initialization

Datatable

Datatable and treetable columns are built from child DIVs of the main component container:

<div data-view="datatable" data-autoheight="true" data-width="400">
    <div data-view="column" data-width="150" data-id="firstname">
        First Name
    </div>
    <div data-view="column" data-width="150" data-id="lastname">
        Last Name
    </div>
    ...
</div>
  • "data" attributes are used to set column properties;
  • inner HTML of column DIVs is turned into their headers.

Related sample:  HTML initialization : DataTable

Pager

When initialized from markup Webix pager should be placed into a separate DIV block while the master component should refer to it by its ID:

<div data-view="datatable" data-pager="mypager">
...
</div>
<div data-view="pager" data-id="mypager" group="10" size="3"></div>

Note that pager properties are not prefixed with "data-".

Related sample:  HTML initialization : DataTable with Pager

TabView and Accordion

Webix TabView and Accordion are made of separate blocks, each of which featuring header with title and body with content inside.

In markup you need to place each block into a separate DIV with the attributes:

  • data-view with "body" value;
  • data-header with header text.

TabView

<div data-view="tabview">
    <div data-view="body" data-header="List 1">
        <div data-view="list" data-url="data/data.json"> #id#: #Package# </div>
    </div>
    <div data-view="body" data-header="Text 2">
        <div data-view="template">Just some text here</div>
    </div>
</div>

Related sample:  HTML initialization : Tabbar

Accordion

<div data-view="accordion">
    <div data-view="body" data-header="Section A">
        <div data-view="list" data-width="320" data-url="data/data.json"> #id#: #Package# </div>
    </div>
    <div data-view="body" data-header="Section B">
        <div data-view="list" data-width="320" data-url="data/data.json"> #id#: #Package# </div>
    </div>
</div>

Related sample:  HTML initialization : Accordion

Chart

Chart axes are defined by config tags in HTML markup:

<div data-view="chart" data-type="stackedArea" data-color="#58dccd" data-value="#sales#" 
  data-alpha="0.7" data-url="data/chart.json">
    <config name="xAxis" template="#year#"></config>
    <config name="yAxis"></config>   
</div>

Axis names are defined by name attributes while other attributes are not prefixed by "data-" and are the same as in JSON configuration.

chart Series

If series are needed for the chart they are initialized via a separate config object:

<div data-view="chart" data-type="stackedArea" alpha="0.7" eventRadius="5" data-url="data/chart.json">
    <config name="xAxis" template="#year#"></config>
    <config name="yAxis"></config>
    <config stack='series'>
        <config  value="#sales#" color="#58dccd">
            <config name="tooltip" template="#bottom#"></config>
        </config>
        <config  value="#sales2#" color="#dc58cd">
            <config name="tooltip" template="#bottom#"></config>
        </config>
        ...
    </config>
</div>

The attributes of series are not prefixed by "data-" and are the same as in JSON configuration.

Related sample:  HTML initialization

Windows and Menus

Window peculiarities

When initializing Webix window from markup, you need to remember the following things:

  • window should be set on the same level as other layout components;
  • window is comprised of two parts - head and body that should be defined via separate DIV blocks.
<div data-view="rows">
    <!--layout config>-->
</div>
...
<div data-view="window" data-id="win1">
    <div data-view="head">Test header</div>
    <div data-view="body">
        <div data-view="template">Cell 1.2</div>
    </div>
</div>
  • in addition, window show method should be called as it won't appear by itself:
webix.markup.init();
$$("win1").show();

Related sample:  HTML initialization : Window

Menu and submenu peculiarities

If menu is initialized from markup it's vital to remember that its sub-menus should be as well initialized the same way as windows:

<div data-view="submenu" data-id="submenu1">
    <ul data-view="data">
       <li data-id="1.1" data-submenu="submenu3">Item 1.1</li>
       <li data-id="1.2">Item 1.2</li>
    </ul>
</div>

And then they should be included into the main menu (or other sub-menus) with the help of their submenu property (submenu ID should be specified):

<div data-view="menu" data-height="50">
    <ul data-view="data">
        <div data-view="menu">
            <ul data-view="data">
                <li data-id="1" data-submenu="submenu1">Item 1</li>
                <li data-id="2" data-submenu="submenu2">Item 2</li>
            </ul>
        </div>
        <li data-id="3">Item 3</li>
    </ul>
</div>

Any level of nesting is possible.

Related sample:  HTML initialization::Menu

Back to top