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.
...
- 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.
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) |
|---|---|---|
| Save all tabs in one operation through the configured data source. | Submit each tab separately with ad-hoc calls. | createEntityDataSourceId, createEntityHttpRequestParametersMap, action “Save connected forms using datasource connected to tabs form” |
| 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 |
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. - Stable automation and test handles are available via
idanddataTestId. - Validate before saving with the action “Form is invalid” to prevent futile submissions.
- Write
displayConditionsto avoid rapid show/hide flicker (mutually exclusive, stable predicates).
