Dynamic UI Modifications of Guides, Configuring Components Webix Docs

Webix library offers several ways to alter the already initialized layout:

you can add any view to the existing layout, including complex views that have a number of child components;
you can remove any view from existing layout;
you can reconfigure layout-like component by passing an array of new children views to it;
you can replace any view in layout by another view.

Let's consider these possibilities in detail:

Adding/Removing Views Dynamically

You can add and remove components dynamically after you've already initialized layout and set some components. It works for:

layout rows and cols;
multiview cells;
accordion and carousel panels;
toolbar controls;
form controls.

Adding and removing views is implemented with the help of the addView() and removeView() methods.

Adding View

To add a new view (layout row and column, multiview cell, accordion panel, as well as any toolbar or form control), specify the view object and position to insert.

Adding a button to the toolbar

var id = $$("toolbar").addView({
    view:"button", value:"new button", 
}, index);

Index defines position where a new component or control should be inserted among the children of the parent component. It can be:

first (index 0);
last (index -1);
any. Index of any view can be derived with the help of index method that can be called for layout-like Webix components (layout, multiview, accordion, carousel, form, toolbar).

Adding View

webix.ui({
    id:"layout1",
    rows:[
        {view:"text", id:"text1"},
        {view:"button", value:"Add View", click:addView}
    ]
});
 
var pos = $$("layout1").index($$("text1"));
$$("layout1").addView({view:"text", id:"text2"}, pos);

Related sample: Adding Views

The newly added view can be sized during adding according to common rules as well as later on via the (re)defining property.

Removing View

The removeView() method removes components from layouts and is called from the parent component to remove any of its children. The method takes a child view object or its id as an argument.

Removing a button from the toolbar

$$("toolbar").removeView(id);

Related sample: Adding Views

Rebuilding Application Layout

Here the advanced possibilities of the webix.ui() method are described.

Besides its main purpose, instantiation of a Webix component, this method can also be used for changing layout, provided that additional parameters are passed to it.

All in all, its parameters include:

configuration object - (object, array) a JSON object with the application configuration of any level of complexity;
parent element - (id or object) Webix component that acts as a parent to the object you are going to initialize (the one you pass as the first parameter);
replacement object - (id, index or object) the object/id of the Webix component in the parent object that will be replaced by the object you are going to initialize (passed as the first parameter), or the index at which a new component will be inserted among the parent's children.

Note that the third parameter passed as index is applied only to the layout and layout-like views. It defines the position where a new component or control will be inserted among the children of the parent component. It works the same as the index parameter of the addView() method of the layout-like widgets described above.

Thus webix.ui() constructor can be used to:

redraw layouts (layout, multiview, form, accordion) that feature arrays in their structure:

webix.ui({
    view:"form", id:"myform", elements:[...]
});
 
//redraw form with new elements
webix.ui([..new elements..], $$("myform"));

replace any existing object:

webix.ui({
    id:"mylayout",
    rows:[
        {view:"toolbar", ...},
        {view:"datatable", id:"mydatatable" ...},
    ]
});
 
//replace datatable
webix.ui({..new config..}, $$("mylayout"), $$("mydatatable"));

In the above example we redefine the "mydatatable" view with some new config. The "mylayout" view is the parent of the new configuration. When a new view will be rendered, the new config will take the container of the "mydatatable" view.

We can also pass two arguments by omitting the parent container. The result will be the same.

Reloading Layout from the Server

To load a new configuration from the server, you can use the following technique:

webix.ajax("config.json", function(text){
    webix.ui(webix.DataDriver.json.toObject(text), $$("mylayout"), $$("mydatatable"));
});

where the config.json contains the new configuration.