Tabs Form

Overview

• The Dynamic Tabs Form component provides a vertical tab-based interface for organizing forms.
• It allows users to navigate between different forms using vertical tabs.
• Each tab contains its own form or content, with validation and saving support.
• The component can save data through a configured data source and handle submission events.
• It is useful for complex forms that are divided into logical sections for better user experience.

Specs

Tokens

Token	Description
elements	Components rendered in the tabs form (tabs, footer).
createEntityDataSourceId	Data source ID for saving form data.
createEntityHttpRequestParametersMap	HTTP parameter mapping for submission.
events	Configurable component events.
ON_INIT (Events)	Triggered when the component initializes.
ON_DESTROY (Events)	Triggered when the component is destroyed.
displayName	Display name shown in the structure panel.
visibilityPolicySetId	Policy set controlling component visibility.
displayConditions	Conditions to show or hide the component.
id	Unique identifier for programmatic access.
dataTestId	Testing hook ID for automation.
enableAsHotspot	Enables guided tour hotspot.
guidedTourHotSpotTitle	Localized hotspot title.
guidedTourHotSpotDescription	Localized hotspot description.
valid	Tab state indicating valid data.
invalid	Tab state indicating invalid data.
pending	Tab state indicating validation/processing.

Structure

(Configured in General Properties)

• displayName - Sets the display name of the component shown in the structure panel. For example, "Customer Registration Form" allows for easy identification of the tabs form's purpose in the component structure.

(Configured in Visual Properties)

• elements - Contains all the components to be rendered within this tabs form, including vertical tabs and footer elements. For example, you can add multiple DynamicVerticalTabComponent elements to create different form sections, each with its own content and validation state.

(Configured in Datasource Properties)

• createEntityDataSourceId - Specifies the data source ID for saving the collected form data. For example, setting this to "api/customers/create" would connect the form submission to the customer creation API endpoint, allowing all form data to be submitted at once.
  • createEntityHttpRequestParametersMap - Configures HTTP parameters for form submission requests. This object maps form data to the expected format for the API endpoint, with options to specify body, path, and query parameters for the request.

(Configured in Visibility)

• displayConditions - Defines conditions for displaying the component based on context values. This allows the tabs form to be shown or hidden dynamically depending on the state of other components or application data.

Actions & Variants

Variants

Each tab in the tabs form can display its validation state visually:

• valid - The tab contains a form with valid data (shown with a checkmark).
• invalid - The tab contains a form with invalid data (shown with an error indicator).
• pending - The tab contains a form that is being validated or processed.

Actions

(Configured in Event Actions Properties)

• events - Configures the events that the component can trigger and respond to.
  • ON_INIT - Triggered when the component is initialized. Can be used to perform setup operations like loading default data or setting initial form states.
  • ON_DESTROY - Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.

(Configured in Component Actions)

• The DynamicTabsFormComponent exposes several actions that can be used in action configurations:
  • Save active tab as default - Saves the currently active tab as the default tab to display when the component loads. This is useful for preserving user navigation state between sessions.
  • Save connected forms using datasource connected to tabs form - Validates and submits all form data from all tabs to the configured data source. This action handles form validation across all tabs and manages the submission process.
  • Form is invalid - Checks if any form within the tabs is invalid. This action can be used to prevent navigation or submission when form data is incomplete or invalid.
  • Get element data - Retrieves the current data from all forms in the tabs. This is useful for getting a snapshot of form values without submitting them to the server.

Tests

(Configured in Testing Hooks Properties)

• id - Specifies a unique identifier for the component used for programmatic access. For example, "customerRegistrationForm" enables targeted manipulation of this specific form in scripts or for automated testing.
• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "customer-tabs-form" allows test scripts to reliably locate this component during test execution.
• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this component can be highlighted in guided tours to help users understand its functionality.
• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot with support for multiple languages. For example, {"en-US": "Customer Information Form", "fr-FR": "Formulaire d'information client"} ensures proper localization of the hotspot title.
• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot with language support. For example, {"en-US": "Fill in customer details across different tabs", "fr-FR": "Remplissez les détails du client à travers différents onglets"} provides localized guidance for users.

Authorization

(Configured in Authorization Properties)

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the form to users with admin privileges, preventing unauthorized access to sensitive form sections.

Links

• Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/vertical-tab-panel

Guidelines

Usage

• Use Tabs Form to split a complex form into logical sections navigated by vertical tabs, assembling sections and optional footer.
• Provide stable hooks for automation and scripts with id and dataTestId.
• Persist the last active tab as the default landing tab using the action “Save active tab as default”.

Sizing & Layout

• Add only the necessary parts to elements and order them intentionally.
• Use displayName to make the component easy to find during configuration.

States & Feedback

• Communicate section status using the built-in states: valid (e.g., checkmark), invalid (error indicator), pending (validation/processing).
• Prevent saves when any section is invalid by checking with the action “Form is invalid”.

Visibility & Authorization

• Show or hide the Tabs Form based on context using displayConditions.
• Restrict visibility using visibilityPolicySetId.

Content & Localization

• When hotspots are enabled, localize the guided-tour text via guidedTourHotSpotTitle and guidedTourHotSpotDescription.

Dos & Don’ts

Do	Don’t	Article setting(s)
Block submit when any tab is invalid; guide the user back to the failing tab.	Allow a global save to proceed with invalid sections.	action “Form is invalid”, states invalid, valid
Indicate processing with the built-in pending state during validation.	Leave users guessing while work is in progress.	state pending
Remember the user’s last active tab and restore it.	Always reset to the first tab on load.	action “Save active tab as default”
Only show the form when its prerequisites hold true.	Keep the form visible when it cannot be completed.	displayConditions
Restrict who can see the form using a policy set.	Show the form to everyone and rely on error messages later.	visibilityPolicySetId
Localize guided-tour hotspot text if you enable a tour.	Ship English-only hotspot copy.	enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription

Accessibility

• Avoid color-only meaning by relying on the built-in state indicators (valid, invalid, pending).
• Conditional presence is supported through displayConditions.
• Guided-tour text can be localized via guidedTourHotSpotTitle and guidedTourHotSpotDescription.
• Validate before saving with the action “Form is invalid” to prevent futile submissions.
• Write displayConditions to avoid rapid show/hide flicker (mutually exclusive, stable predicates).