Here we discuss the state of an application created with multiview layout.
With multiview application design you can create as many cells as you wish and switch between them with the help of dedicated buttons, namely tabbar and segmented, or resort to tabview functionality.
Tab values concide with IDs of the views you place into multiview cells.
Initilially, either the first tab is visible, or the one you've set to be "selected" during intialization. Normally, when you refresh the page, the application is redrawn according to this initialization pattern.
webix.ui({
rows:[
{view:"segmented", id:'tabbar', selected:"listView", multiview:true, options:[
{ value: 'List', id:'listView'},
{ value: 'Form', id:'formView'},
{ value: 'About', id:'aboutView'}]
},
{cells:[
{id:"listView", view:"list"},
{id:"formView", view:"form"},
{id:"aboutView", view:"template"}]
}
]
});
Nevertheless, the library offers history API to store the current application state, or simply put, to memorize the latest opened tab.
History track method allows remembering the currently opened tab and showing it after page loading. It takes two parameters:
webix.history.track('tabbar');
Each time you click the tab to switch for another cell, a hashbang URL is generated on the base of cell ID (under http://current_url.html#!/cellID pattern) and memorized. You'll see it in the url bar of your browser.
If for the track() function you define the url parameter as cell ID, this cell will always be shown after refresh. If you don't specify this parameter, the last opened cell will be displayed.
Compare ID-s from the snippet above and hashbang URL-s for each of the tabs on the picture.
Related sample: History API with Multiview
Now, each time, you refresh the page, the url wil be form according to the info stored in the state object and th altest opened tab wil be shown.
In addition, there exists a possiblity to programmatically add a new state to history with the dedicated push() method. Its argumnts are:
The method is applied to history object:
webix.history.push("tabbar", "detailView" "details");
..where details are
var details = {
view:"template",
template:"Some very long text"
};
However, this will cause the URL bar to display http://current_url.html#!/detailView, but won't cause the browser to look for detailView anchor or even check whether it exists. It just adds this info to window history object.
Back to top