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 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 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"}
]
}
]
});
See Controls Guide to learn the variety of controls offered by this library.
More about Form.
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"}
]
});
See Controls Guide to learn the variety of controls offered by this library.
More about Toolbar.
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:{...}}
]
});
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 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 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 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 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.
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.