Adding and Deleting MultiView Cells Dynamically

Here two approaches are possible:

1 . If you are using multiview with a switching control (tabbar or segmented), you should treat multiview and a switching control separately. In other words, you should add and remove options for tabbar (segmented button) and at the same time add and remove views for the multiview.

2 . If you are using tabview (integral component that consists of a built-in multiview and tabbar), note that it features dedicated methods to add and remove views together with the corresponding tabs.

Using Tabbar and MultiView

Both Tabbar and Segmented Button feature separate parts - tabs or segments - that are defined by the options property.
Each of its options can be connected with a separate view or a separate click handler.

**Table 1** Switch controls
`view:"segmented"`
`view:"tabbar"`

Tabs/segments can be added and deleted on the go with the help of the following methods:

addOption() - adds a new tab/segment according to the provided configuration;
removeOption() - removes the tab/segment according to the provided ID.

MultiView cells can be added and deleted dynamically by using:

addView() - adds view to the layout (multiview is a layout) according to the provided configuration;
removeView() - removes a layout cell. Takes the child view object or its id as an argument.

Adding

rows:[
    {view:"tabbar", id:"tabs", multiview:true, options:[], ..}, //empty tabbar
    {view:"multiview", id:"views", cells:[
        {template:"..."} //multiview should have at least one cell
    ]}
]    
...
 
function open_new_tab(id){  
    var item = $$('list1').getItem(id);
 
    //adding a new cell to multiview
    $$("views").addView({ view:"template", id:item.id, template:item.title});
    //adding option to the tabbar
    $$('tabs').addOption(item.id, item.title, true);
};

Deletion

function del_tab(){
    //getting the ID of the active tab
    var id = $$("tabs").getValue(); 
 
    //removing tabbar option
    $$("tabs").removeOption(id);
 
    //removing corresponding view
    $$("views").removeView(id);
}

The logic of view adding and removing can be studied in detail in the article Dynamic UI Modifications.

Using TabView

TabView is a hybrid of a multiview and tabbar.
It features two methods that allow adding and removing cells together with corresponding tabs.

Each combination of a tab and a cell is configured as:

{ header:"header_title", body:{ ..view config ..}}

The same configuration is passed into the addView() method:

$$("tabview1").addView({
    header:"New Tab",
    body:{ //webix.uid() generates a random number
        template:"New content "+webix.uid()
    }
});

The TabView cell can be removed by the removeView() method that requires the ID of this cell:

var id = $$("tabview1").getValue(); //id of active cell
$$("tabview1").removeView(id);

Built-in 'Close' Button for Tab

Webix Tabbar can be equipped with a 'Close' button:

//all tabs
{view:"tabbar", close:true, options:[]}
 
//some tabs
{view:"tabbar", options:[
    {id:1, value:"Tab 1", close:true},
    {id:2, value:"Tab 2"}
]}

If a closable tab is used in a separate tabbar, you should provide logic to remove the corresponding view.

tabbar.attachEvent("onOptionRemove", function(id, value){
    $$("multiview").removeView(id);
});

Normally, the ID of the tab coincides with the ID of the view.

If a closable tab is used within a tabview, the corresponding tab will be removed from the app automatically.