Corfix Form Builder: Using the Panel Component.

1. Display Tab

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

• Title:

  • This is the prominent title displayed at the top of the panel on the actual form. This is a key element for organizing your form.

  • Example: "Applicant Details", "Project Scope", "Safety Checklist".

• Colour:

  • Allows you to select a predefined color scheme for the panel, which can help differentiate sections visually.

  • Default: Default.

• Tooltip:

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

• Custom CSS Class:

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

• Collapsible:

  • If checked, the panel can be expanded or collapsed by the user, allowing them to hide or show its contents. This is useful for long forms or optional sections.

• Hide Label:

  • This option is usually less relevant for panels as their primary identifier is the "Title." If checked, it would hide a generic "Panel" label, but not the "Title."

• 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 Panel 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 a "Emergency Contact Information" panel only displays when a "Do you have an emergency contact?" checkbox is checked.

Preview Window

The Preview area on the right side of the dialog box shows you how the "Panel" will visually appear on your form. It displays a rectangular box with a "Title" at the top, representing the area where other form components would be placed. This helps you visualize how content will be organized within the panel.

Actions at the bottom of the dialog:

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

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

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

Best Practices for Panel Component:

• Use a Clear Title: Always give your panel a descriptive "Title" (e.g., "Personal Information," "Work Details") to logically group fields.

• Enhance Readability: Use panels to break up long forms into manageable, visually distinct sections.

• Make it Collapsible for Optional/Long Sections: If a section contains many fields or is not always relevant, making the panel "Collapsible" improves form brevity.

• Apply Conditional Logic: Show or hide entire panels based on user input, creating dynamic forms that adapt to specific situations.

• Consider Color for Differentiation: Use "Colour" to visually distinguish between different types of panels or highlight critical sections, but use it sparingly to maintain a clean design.