Skip to main content

Scenario Wizard Applet

The Scenario Wizard Applet provides a tab-based interface for managing multiple scenario configurations within a single applet. Each tab contains its own scenario content, allowing users to organize different workflows or use cases in a structured, easily navigable format.

Only one tab can be active at a time, ensuring a focused user experience while maintaining quick access to alternative scenarios.

Configuration Overview​

The Scenario Wizard is configured using the ScenarioWizardConfig interface, which consists of an array of tab definitions. Each tab represents a distinct scenario workflow with its own configuration and content.

Tab Configuration​

Properties Overview​

PropertyTypeRequiredDescription
idstringYesUnique identifier for the tab
labelstringYesDisplay text shown in the tab header
autoEnabledbooleanNoAutomatically activate this tab on initial load (only one tab should have this set)
contentScenarioContentYesScenario configuration for the tab content

Property Details​

Each tab in the tabs array requires the following properties:

id​

Type: string (required)

Unique identifier for the tab. This ID is used internally to track the active tab and manage tab state.

id: "pre-surgery-assessment"

label​

Type: string (required)

Display text shown in the tab header. This should be concise and clearly describe the scenario content.

label: "Pre-Surgery Assessment"

autoEnabled​

Type: boolean (optional)

Determines whether this tab should be automatically activated on initial load. When set to true, this tab will be the active tab when the applet first opens.

autoEnabled: true
warning

Only one tab should have autoEnabled: true. If multiple tabs are configured with this setting, the behavior is undefined and cannot be guaranteed.

content​

Type: ScenarioContent (required)

The scenario configuration that defines the content and behavior of the tab. This follows the standard Scenario Content structure used throughout the application.

content: {
    // Standard ScenarioContent configuration
    // (refer to Scenario Content documentation for details)
}

Tab Behavior​

Single Active Tab​

The Scenario Wizard enforces a single active tab at any given time. When a user selects a tab, the previously active tab is deactivated, and the new tab's scenario content is displayed.

Tab Switching​

Users can switch between tabs by clicking on the tab headers. The applet maintains the state of each tab's scenario, allowing users to return to a tab without losing their progress or input.

Auto-Enabling on Load​

When a tab has autoEnabled: true, it will be automatically selected and displayed when the applet first loads. This is useful for setting a default tab that users see immediately upon opening the applet.

Configuration Example​

const scenarioWizardConfig: ScenarioWizardConfig = {
    tabs: [
        {
            id: "pre-anesthesia",
            label: "Pre-Anesthesia",
            autoEnabled: true,
            content: {
                // Pre-anesthesia scenario configuration
            }
        },
        {
            id: "pre-surgery",
            label: "Pre-Surgery",
            content: {
                // Pre-surgery scenario configuration
            }
        },
        {
            id: "post-surgery",
            label: "Post-Surgery",
            content: {
                // Post-surgery scenario configuration
            }
        }
    ]
};

In this example:

  • Three tabs are configured for different assessment phases
  • The "Pre-Anesthesia" tab has autoEnabled: true, making it the default active tab
  • Each tab contains its own scenario content with phase-specific workflows