Documentation

Dynamic UI Modifications

Webix lib 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 reconfigurate layout-like comopnent 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 inited layout and set some components. It works for:

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

Adding View

To add the 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 the new component or control should be inserted among the children of the parent component. It can be

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:  Basic Initialization

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

Removing View

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:  Basic Initialization

Rebuilding Application Layout

Here we look at advanced possibilities of webix.ui() method.

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

All in all, its parameters include:

  • configuration object - (object, array) - a JSON object with the application config of any level of complexity;
  • parent element - (id or object) - Webix component that acts as a parent to an object you are going to init (first param);
  • replacement object -(id, index or object)- Webix component in a parent object that will be replaced by an object you are going to init (first param).

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

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

Related sample:  Dynamic Layout Rebuilding

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

Related sample:  Dynamic Layout Rebuilding

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.

Back to top