Dynamic UI Modifications

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:

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:  Adding Views

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:  Adding Views

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 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 an object you are going to initialize (first parameter);
  • replacement object -(id, index or object)- Webix component in a parent object that will be replaced by an object you are going to initialize (first parameter).

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'));

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.

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