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:

• A variant property to control the visual style and behavior of tabs
• An array of tab definitions for scenario workflows
• Optional external links that open in new browser tabs

Each tab represents a distinct scenario workflow with its own configuration and content.

Tab Configuration

Properties Overview

Property	Type	Required	Description
variant	TabsVariant	No	Visual style of tabs: Primary (underlined) or Secondary (button-style with overflow). Defaults to Secondary
tabs	Array<TabConfig>	Yes	Array of tab configurations
externalLinks	Array<ExternalLinkConfig>	No	Array of external resource links (shown in dropdown menu in Secondary variant)

Tab Properties

Property	Type	Required	Description
id	string	Yes	Unique identifier for the tab
label	string	Yes	Display text shown in the tab header
icon	string	No	FontAwesome icon name to display before the label
autoEnabled	boolean	No	Automatically activate this tab on initial load (only one tab should have this set)
content	ScenarioContent	Yes	Scenario configuration for the tab content

External Link Properties

Property	Type	Required	Description
id	string	Yes	Unique identifier for the link
label	string	Yes	Display text shown in the dropdown menu
icon	string	No	FontAwesome icon name to display before the label
url	string	Yes	URL to open in a new browser tab when clicked

Variants

The Scenario Wizard supports two visual variants:

Primary Variant

Classic underlined tabs with a horizontal border indicating the active tab. All tabs are displayed in a row without overflow handling.

variant: TabsVariant.Primary

Secondary Variant (Default)

Button-style tabs with rounded backgrounds. Includes advanced features:

• Overflow handling: When tabs don't fit in available space, excess tabs move into a "More" dropdown
• External links dropdown: Access external resources via a dedicated browser icon button
• Dynamic width calculation: Automatically adjusts visible tabs based on container size

variant: TabsVariant.Secondary

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.

Overflow Handling (Secondary Variant Only)

In the Secondary variant, when there are more tabs than can fit in the available horizontal space:

• Visible tabs are displayed normally
• Overflow tabs are moved to a "More" dropdown menu
• The "More" button shows a count badge indicating the number of hidden tabs
• The "More" button is highlighted when a hidden tab is selected

External Links

External links provide quick access to external resources or tools without leaving the current workflow. These links:

• Appear in a separate dropdown menu (browser icon) in the Secondary variant
• Open URLs in new browser tabs when clicked
• Do not affect the active tab selection
• Can include icons for visual identification

Configuration Example

Advanced Configuration (Secondary Variant with Icons and External Links)

const scenarioWizardConfig: ScenarioWizardConfig = {
    variant: TabsVariant.Secondary,
    tabs: [
        {
            id: "pre-anesthesia",
            label: "Pre-Anesthesia",
            autoEnabled: true,
            icon: "user"
            content: {
                // Pre-anesthesia scenario configuration
            }
        },
        {
            id: "pre-surgery",
            label: "Pre-Surgery",
            icon: "flask"
            content: {
                // Pre-surgery scenario configuration
            }
        },
        {
            id: "post-surgery",
            label: "Post-Surgery",
            content: {
                // Post-surgery scenario configuration
            }
        }
    ]
    externalLinks: [
        {
            id: "radiology-pacs",
            label: "Radiology PACS Viewer",
            icon: "file",
            url: "https://example.com/radiology"
        },
        {
            id: "lab-system",
            label: "Laboratory Information System",
            url: "https://example.com/lab"
        },
        {
            id: "guidelines",
            label: "Clinical Guidelines Database",
            icon: "clipboard-list",
            url: "https://example.com/guidelines"
        }
    ]
};

In this example:

• The Secondary variant is used for button-style tabs with overflow support
• Three tabs are configured with icons for different assessment areas
• The "pre-anesthesia" tab has autoEnabled: true, making it the default active tab
• Three external links provide quick access to related systems
• If tabs overflow the available space, they will automatically move to the "More" dropdown

warning

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