Beginner

Building App Layout

Basic Principles

Before using library components you need to decide upon their arrangement and define the way they will be positioned towards each other. You can use 10 layout components to nest the others.

To present components side by side, all visible at a time:

To present components within limited space with an ability to show them in turn:

To present components side by side and allows users drag-n-drop them:

All layout views can be nested into each other.

Layout

Layout allows dividing a page into rows and columns to organize sections for placing other components. All of them will be visible at the same time.

View name is optional, you define rows or columns (cols) for your components:

webix.ui({
    rows:[
     { type:"header", template:"Header" }, //any component
     { cols:[
        { view: "list", ... },
        { view: "chart", ... }
        ]
     }
    ]
});

Related sample:  Layout and Resizer

More about Layout.

Form

Form can arrange controls (typically input fields, combo boxes, buttons) into rows and cols. Unlike Layout, it has specific API to manage controls together as well an extra padding to separate controls from the rest of the app.

The component must have a view name - "form" - in its configuration.

webix.ui({
    view:"form",
    elements:[ // alias for rows
     { view:"text"}, //any control
     { cols:[
        { view:"button", value:"Ok"},
        { view:"button", value:"Cancel"}
        ]
     }
    ]
});

Related sample:  Form: Basic

  • If form controls are placed into the elements array, they will be arranged in rows;
  • If form elements are given the name property, you can use Form API to get and set their values altogether.

See Controls Guide to learn the variety of controls offered by this library.

More about Form.

Toolbar

Form can arrange controls (typically labels, buttons, icons) into rows and cols. Unlike Layout, it has specific styling to separate controls from the rest of the app.

The component must have a view name - "toolbar" - in its configuration.

webix.ui({
    view:"toolbar",
    elements:[ // alias for cols
     { view:"label", label:"My App"}, //any control
     { }, //spacer
     { view:"label", label:"User"},
     { view:"button", value:"Settings"}
    ]
});

Related sample:  Toolbar: Dark

  • If toolbar controls are placed into the elements array, they will be arranged in cols;
  • If toolbar elements are given the name property, you can use Toolbar API to get and set their values altogether.

See Controls Guide to learn the variety of controls offered by this library.

More about Toolbar.

Accordion

Accordion components feature panels that can be expanded and collapsed initially as well as on clicking their headers.

In code, Accordion consists of items each of which takes a separate row or column with a header:

webix.ui({
    view:"accordion", rows:[
        { view:"accordionitem", header:"Item1", body:{
           view:"list" //any component
        }},
        { view:"accordionitem", header:"Item2", body:{...}}
    ]
});

Related sample:  Accordion: Layout with headers

You can omit view name for both accordion and its items. If you define rows or cols, each of which featuring body and header settings, you'll automatically get an accordion with accordion items:

webix.ui({
    rows:[
        { header:"Item1", body:{...}},
        { header:"Item2", body:{...}}
    ]  
});

More about Accordion.

ScrollView

ScrollView allows scrolling through the whole content it houses, whether it is layout or a single component in its body:

webix.ui({
    view:"scrollview",
    body:{
        rows:[
          { view:"chart"}, //any component
          { ...}
        ]
    },
    scroll:"y" // scrolling direction
});

Related sample:  Scrollview: Templates with HTML content

More about Scrollview.

Carousel

Carousel panels change in turn by clicking on the related controls or swiping the panels (on touch devices).

The component can arrange its child views in rows or columns thus forming a swiping direction:

webix.ui({
    view:"carousel",
    cols:[
        { view:"chart"}, //any component
        {...}
    ]
});

Related sample:  Carousel: Basic

More about Carousel.

Multiview

Multiview is a layout with multiple hidden views that can be shown in turn using an extra control.

You can omit view name and just place the child components into cells:

webix.ui({
    view:"multiview", //optional
    cells:[
        { view:"datatable"}, //any component
        {...}
    ]
});

Related sample:  Multiview with Tabbar

After that, you need to provide the logic for switching between views. It can be done with Tabbar or Segmented control for a horizontal menu, or a List for a vertical one.

Tabview

This is a blend of Multiview and Tabbar. You can use this component to create a Multiview with a ready-made view switcher:

webix.ui({
    view:"tabview",
    cells:[
        { header:"Tab1", body: {
            view:"dataview" //any component
        }},
        { header:"Tab2", body:{...}}
    ]
});

Related sample:  Tabview: Basic

More about Multiview and Tabview.

Portlets

Portlets are draggable views that can be put into Layout rows and columns:

webix.ui({
    rows:[
        { view:"portlet", body:{
            template:"row 1" //any component
        }},
        { view:"portlet", body:{...}}
    ]
});

Related sample:  Portlet: Reordering

More about Portlets.

Dashboard

Dashboard allows placing components over an abstract grid defining their initial position and sizes within it.

End users can resize and rearrange the components using drag-n-drop.

webix.ui({
    view:"dashboard", 
    cells:[
        { view:"panel", x:0, y:0, body:{
            view:"chart" //any component
        }},
        { view:"panel", x:1, y:0, body:{...}}
    ]
});

Related sample:  Dashboard:Basic

More about Dashboard.

Isolating IDs inside Layouts

Basic rules of ID assignment are described here.

This feature is true for all the layout types described above. It allows using the same IDs for components in different layout sections, while preserving the ability to access the needed component without ambiguity.

Layout section should be equipped with the isolate property:

webix.ui({
   cols:[
     { id:"col1", isolate:true, rows:[ 
        { view:"list", id:"mylist" },
     ]},
     { id:"col2", isolate:true, rows:[
        {view:"list", id:"mylist" },
     ]}
   ]
});

The list view is used twice in the "app" in different columns of the layout with the isolate functionality switched on.

To address such lists separately, use the ID of its parent layout section:

var list1 = $$("col1").$$("mylist");
var list2 = $$("col2").$$("mylist");
 
// Otherwise, you'll get the last view 
var list2 = $$("mylist");

We do not recommend using this technique during development of complex business apps. Consider Webix Jet instead.

What's Next

Back to top