Nested Frontstages

A NestedFrontstage is accessed from a primary Frontstage. It may use all zones and panels, but instead of the App button, the Tool Widget contains a Back button to return to the primary Frontstage.

Definition of Nested Frontstage

The definition of a nested frontstage is no different from a primary frontstage with one exception: the appButton prop of the ToolWidget component specifies {NestedFrontstage.backToPreviousFrontstageCommand}, which will return to the previous frontstage when clicked/pressed.

<ToolWidget
  appButton={NestedFrontstage.backToPreviousFrontstageCommand}
  horizontalToolbar={this._horizontalToolbar}
  verticalToolbar={this._verticalToolbar}
/>

Code to Open Nested Frontstage

The following code that instantiates a nested frontstage, initializes the FrontstageDef, and calls FrontstageManager.openNestedFrontstage to open the nested frontstage.

const frontstageProvider = new NestedFrontstage();
const frontstageDef = await FrontstageDef.create(frontstageProvider);
await FrontstageManager.openNestedFrontstage(frontstageDef);

Last Updated: 20 June, 2023