Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Tabs Form
Link to Figma: tba
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.
...
| 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. |
...
- 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
idanddataTestId. - Persist the last active tab as the default landing tab using the action “Save active tab as default”.
...
| Do | Don’t | Article setting(s) | Save all tabs in one operation through the configured data source. | Submit each tab separately with ad-hoc calls. | |
|---|---|---|---|---|---|
| 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” | Load defaults on initialization; clean up on destroy. | Defer initialization until first interaction and leak resources. | events.ON_INIT, events.ON_DESTROY |
| 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 | Provide stable test hooks and programmatic IDs. | Target the component by visible text in automation. | id, dataTestId |
| Localize guided-tour hotspot text if you enable a tour. | Ship English-only hotspot copy. | enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription |
...
- 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
guidedTourHotSpotTitleandguidedTourHotSpotDescription.Stable automation and test handles are available viaidanddataTestId. - Validate before saving with the action “Form is invalid” to prevent futile submissions.
- Write
displayConditionsto avoid rapid show/hide flicker (mutually exclusive, stable predicates).
