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

Tabs Form

The Dynamic Tabs Form component provides a vertical tab-based interface for organizing and managing related forms. This component allows users to navigate between different forms using vertical tabs, with each tab containing its own form or content. The component also supports form validation, saving data through a configured data source, and handling form submission events. It's particularly useful for complex forms that need to be divided into logical sections for better user experience.

Properties

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.

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.

Event Actions Properties

• events - Configures the events that the component can trigger and respond to. Supports standard lifecycle events:
• 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.

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.

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.

Visibility Properties

• 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.

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.

Component Actions

The DynamicTabsFormComponent exposes several actions that can be used in action configurations:

1. 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.

2. 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.

3. 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.

4. 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.

Tab States

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

Technical Documentation for Backend Developers

Form Data Submission

The component collects data from all forms across all tabs and sends it to the configured data source endpoint. The data is structured based on the form definition and the createEntityHttpRequestParametersMap configuration.

Example request body:

{
  "personalInfo": {
    "firstName": "John",
    "lastName": "Doe",
    "email": "john.doe@example.com"
  },
  "addressInfo": {
    "street": "123 Main St",
    "city": "Boston",
    "zipCode": "02108"
  },
  "preferences": {
    "notifications": true,
    "newsletter": false
  }
}

The component expects a standard response indicating success or failure, and will handle error messages appropriately.