Controls to Switch Between View Cells

There are two buttons to switch between multiview cells at your disposal - tabbar and segmented.

**Table 1** Switch controls
`view:"segmented"`
`view:"tabbar"`
`view:"tabbar", multiview:true`

Both of them are integral buttons that can contain as many options as you need. It is the option values that are connected to the IDs of multiview cells, which enables switching.

The difference between the buttons lies in their design. See Controls Guide to learn more about them.

In case of three views you should make three switching possibilities, i.e put three elements into the options array of either of the stated controls. Make sure that option IDs correspond to the IDs of the view cells. It ensures that every time you click on the necessary tab/button segment, the view changes to the corresponding one.

Note that you don't need to attach "switching" functions to the tabs. Everything is done automatically as soon as you set the multiview parameter to a true value.

webix.ui({ 
    rows:[
        { cells:[ {id:"listView", ... }, 
             {id:"formView", ... }, 
             {id:"emptyView", ... }]
        },
        { view:"tabbar", value: 'listView', multiview:true, 
            options: [
                {value: 'List', id: 'listView'},
                {value: 'Form', id: 'formView'},
                {value: 'Empty', id: 'emptyView'}
             ]
        }
    ]
});

Related sample: Tabbar

The initially visible tab is set by the tabbar/segmented value property that contains the ID of the necessary tab.

Controls to Switch Between View Cells

Related Articles