Page History
...
| 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
[NO DATA AVAILABLE]
Accessibility
...
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”.
Sizing & Layout
- Add only the necessary parts to
elementsand order them intentionally. - Use
displayNameto 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
guidedTourHotSpotTitleandguidedTourHotSpotDescription.
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
guidedTourHotSpotTitleandguidedTourHotSpotDescription. - Validate before saving with the action “Form is invalid” to prevent futile submissions.
- Write
displayConditionsto avoid rapid show/hide flicker (mutually exclusive, stable predicates).
