(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dynamic Vertical Tab Panel Footer User Manual

The Dynamic Vertical Tab Panel Footer component is a flexible footer area for vertical tab panels. It supports dynamic content, custom layouts, and interactive elements, making it ideal for displaying actions, status messages, or additional controls at the bottom of a tab panel.

Properties

Visual Properties

• elements
  Defines the child dynamic elements rendered in the footer. You can add buttons, text, or any supported dynamic component.
  Example:

  [
    { "type": "DynamicButtonComponent", "props": { "label": "Save" } },
    { "type": "DynamicTextComponent", "props": { "text": "All changes saved." } }
  ]

• layout
  Sets the layout direction for footer elements. Use "vertical" to stack elements or "horizontal" to arrange them side by side.
  Example:
  layout: "vertical" will stack all footer elements.

• paddingClass
  Applies CSS padding classes to the footer for spacing.
  Example:
  paddingClass: "p-3" adds medium padding.

General Properties

• displayName
  Sets the display name of the footer, shown in the structure panel.
  Example:
  displayName: "Tab Footer"

• id
  Specifies a unique identifier for the footer component.
  Example:
  id: "tabFooter1"

• dataTestId
  Sets a testing hook ID for automated tests.
  Example:
  dataTestId: "upw-vertical-tab-footer"

Guided Tour / Hotspot Properties

• enableAsHotspot
  Enables the footer as a guided tour hotspot. Useful for onboarding or highlighting features.
  Example:
  enableAsHotspot: true

• guidedTourHotSpotTitle
  Sets the title for the guided tour hotspot, supporting translations.
  Example:
  guidedTourHotSpotTitle: { "en-US": "Footer Actions" }

• guidedTourHotSpotDescription
  Sets the description for the guided tour hotspot, supporting translations.
  Example:
  guidedTourHotSpotDescription: { "en-US": "Use these buttons to save or cancel changes." }

Data Example

The footer typically displays an array of elements, such as buttons and text.
Example data:

{
  "elements": [
    { "type": "DynamicButtonComponent", "props": { "label": "Save" } },
    { "type": "DynamicButtonComponent", "props": { "label": "Cancel" } },
    { "type": "DynamicTextComponent", "props": { "text": "All changes saved." } }
  ],
  "displayName": "Tab Footer",
  "layout": "horizontal",
  "dataTestId": "upw-vertical-tab-footer"
}

Property Sections

Visual

• elements
• layout
• paddingClass

General

• displayName
• id
• dataTestId

Guided Tour / Hotspot

• enableAsHotspot
• guidedTourHotSpotTitle
• guidedTourHotSpotDescription

This manual provides a structured overview of the Dynamic Vertical Tab Panel Footer component (v2), with each property explained, categorized, and accompanied by usage examples.