Corfix Form Builder: Using the Grouping Component.

This article will summarize how to use the Grouping Component in Template Builder.

This component is used to visually group related form fields together, often by drawing a border around them and giving them a common title (Legend).


Where to Find It

In your Corfix Form Builder, click on a Grouping Component to access the configuration panel. You’ll see four tabs:

  • Display 

  • Conditional


1. Display Tab

The Display tab controls the appearance and identification of the Grouping Component.

  • Label:

    • This is the title for the component within the form builder. While it's a required field, it might not always be prominently displayed to the user on the final form if you also use a "Legend."

    • Example: "Grouping Component", "Personal Information Group".

  • Legend:

    • This is the visible title that appears on the border of the grouped section on the actual form. This is crucial for guiding users.

    • Example: "Contact Details", "Incident Report Information", "Payment Method".

  • Tooltip:

    • Text that appears when the user hovers their mouse over the component. Useful for providing quick help or context for the entire group.

  • Custom CSS Class:

    • Allows advanced users to apply custom styling to the component using CSS classes.

  • Hide Label:

    • If checked, the primary label for the component will not be displayed on the form. This is often checked if "Legend" is used instead.

  • Modal Edit:

    • (Details not fully visible in screenshot, but typically relates to editing in a pop-up modal window).


2. Conditional Tab

The Conditional tab allows you to set up rules for when this entire Grouping Component (and all components within it) should be displayed or hidden based on the values of other components in the form.

  • Simple:

    • This is typically a toggle or a dropdown to select between simple and advanced conditional logic.

  • This component should Display:

    • Choose whether the component should "Show" or "Hide" (implied options) based on the condition.

  • When the form component:

    • Select another component in your form whose value will trigger the condition.

  • Has the value:

    • Specify the exact value that the selected form component must have for the condition to be met.

    Example: You could set up a rule so that an "Emergency Contact Information" group only displays when a "Do you have an emergency contact?" checkbox is checked.


Preview Panel

The Preview panel on the right side of the dialog box shows you how the "Grouping Component" will visually appear on your form. It typically displays a rectangular box with a title (the "Legend"), indicating where grouped fields would be placed. This helps you visualize the organization you're creating.


Actions at the bottom of the dialog:

  • Save: Saves all changes made to the Grouping Component's settings.

  • Cancel: Discards any unsaved changes and closes the dialog.

  • Remove: Deletes the Grouping Component and all components placed within it from the form.


Best Practices for Grouping Component:

  • Use a Clear Legend: Always provide a clear and concise "Legend" that explains what information is grouped inside (e.g., "Personal Details," "Location Information").

  • Group Related Fields: Use grouping to logically organize fields that belong together, improving form readability and user flow.

  • Hide the Main Label: If you're using a "Legend," it's usually best to check "Hide Label" under Display to avoid redundant titles.

  • Leverage Conditional Hiding: Use the "Conditional" tab to show or hide entire sections of the form based on user input, making complex forms dynamic and less overwhelming.