• Change Panel Background
• Custom Swipe Event
• Dynamically Add Panels
• Manually Resize Panel
• Panel Render Position
• Preventing a Panel from Losing Focus
• Save Restore State

 

How to Save and Restore Panel State in a UX Component

Description

The active Panel can be saved and later restored in UX Components.

Discussion

UX Components can have complex layouts involving multiple Panel Cards, Panel Navigators, and Panel Layouts. The state of the Panel (i.e., which Panel Card in a particular Panel Navigator is active and/or which Panels in a Panel Navigator have been docked) can be saved and later restored. This is done using the getState() and setState() methods for the top-level Panel Object. For example, the code below gets the Panel Object from the UX Component and saves the Panel Object's state in the window when a button is clicked:

var panelObj = {dialog.object}.getPanelObject();
if (panelObj) {
    window._state = panelObj.getState();
    var msg = 'State was saved: \n\n' + $u.o.toJSON(window._state);
    alert(msg);
}

Another button can be added to the UX Component that restores the state stored in window._state to the top-level Panel Object:

var panelObj = {dialog.object}.getPanelObject();
panelObj.setState(window._state);

Watch the video below to learn how to save and restore Panel state in a UX Component.

• Saving and Restoring the State of Panels

Click here to download the component shown in the video above.