Available only in PRO Edition

Saving and Restoring Application State

Webix UIManager allows saving (and restoring) current visual scheme of the component, its 'state',with the following methods:

getState() - to capture current state of a Webix application
setState() - to set the saved state for the application.

The data for the state itself can be stored in the database, session or local storage via the webix.storage.local / webix.storage.session methods.

The state of any view included into the application state object contains the following information:

{
    id:"main", 
    width:500, 
    height:400, 
    gravity:1 
}

Some views featuring tabs, panels or cells in their configuration contain additional properties:

{
    collapsed:"tab1", // currently collapsed panel
    activeCell:"tab2" // currently active tab
}

Getting and Saving State

The getState() method is called from the UIManager and gets the app's general structure (namely ID, width, height, gravity). It takes two arguments:

id (string, number) - view ID (as a rule, the ID of the top-most component, layout)
children (boolean) - defines whether the state object should include configurations of the inner child views. false by default.

To save the data and make it usable later on, your should put it into the local storage, defining the key for it:

webix.attachEvent("unload", function(){
    webix.storage.local.put("stateApp", webix.UIManager.getState("main", true));
});

Restoring State

To use the method, you should firstly get the stored data from the local storage (using the key you defined for it at the previous step):

var stateApp = webix.storage.local.get("stateApp");

And then call setState() from UIManager to restore the state of the application.

if(stateApp)
   webix.UIManager.setState(stateApp);