Nested Form Component

The Nested Form Component allows you to embed one form within another. The configuration is divided into several tabs to control how the nested form displays, behaves, and interacts with data.1. Display Tab This tab controls the visual appearance and basic accessibility of the component. Label: The primary text that identifies the component on the screen. Custom CSS Class: Allows you to add custom CSS classes for advanced styling of the component. Tab Index: Sets the tabbing order of the component for keyboard navigation. Hidden: A checkbox to completely hide the component from the user interface. Hide Label: A checkbox to hide the component's label while keeping the form itself visible. Disabled: A checkbox that renders the form visible but prevents user interaction or data entry. Table View: A checkbox to determine if the component should be displayed in a table view. Modal Edit: A checkbox that allows the nested form to be edited within a modal (pop-up) window rather than inline. 2. Form Tab This tab manages the specific form being nested and how its revisions and references are handled. Form: A dropdown menu used to select which specific form to nest within the component. Use Original Revision while Submissions Viewing: A checkbox to ensure that when viewing a submission, the original revision of the nested form is used, rather than the most current version. Save as reference: A checkbox that saves the submitted data as a reference to the nested form, rather than embedding the raw data directly within the parent form's submission. 3. Data Tab This tab handles default values, calculated values, and data clearing behaviors. Custom Default Value: An expandable section to configure a custom default value for the nested form. Calculated Value: An expandable section to set up a value that calculates dynamically based on other inputs. Clear Value When Hidden: A checkbox that ensures when a field is hidden, its value is cleared. 4. API Tab This tab defines how the component's data interacts with backend APIs. Property Name: The specific key or property name (e.g., "form") used to identify this component's data in the API payload. Field Tags: An input to assign searchable tags to the field for use in custom logic or API filtering. Custom Properties: A section to add generic custom Key/Value pairs for the component using the "+ Add Another" button. 5. Conditional Tab This tab is used to show or hide the nested form component based on specific conditions. Advanced Conditions: An expandable section for writing complex, code-based conditions. Simple Conditions: Provides a straightforward logic builder using three main dropdown/input fields: This component should Display: Determines if the action is to show or hide. When the form component: Selects the target component to evaluate. Has the value: Sets the specific value the target component must match to trigger the display rule. 6. Logic Tab This tab is utilized for creating advanced, multi-step logical actions based on triggers. Advanced Logic: A section where complex behaviors can be defined. It displays a count of configured logic items (e.g., "0 Advanced Logic Configured") and includes an "+ Add Logic" button to create new rules. 7. Layout Tab This tab configures layout overrides and specific HTML attributes. PDF Overlay: An expandable section for configuring how the component overlays on a generated PDF. HTML Attributes: A section to inject custom HTML attributes directly into the component's DOM element. Includes a table for defining the Attribute Name and Attribute Value. Includes an "+ Add Attribute" button to append more pairs.