Template Builder Guides
      Back to home
      1. Corfix Guide
      2. Template Builder Tutorials
      3. Template Builder Guides

      Corfix Form Builder: Using the Data Grid Component.

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

      This powerful component allows you to create a dynamic, repeatable table-like structure where users can add multiple rows of sub-components (fields). It's ideal for collecting lists of items, multiple entries of the same type, or complex repeating data.

      Where to Find It

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

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

      The Display tab controls the layout and general appearance of the Data Grid Component.

      • Label:

        • This is the visible title for your data grid section that users will see. It is a required field.

        • Example: "Line Items", "Attendees", "Defects Found".

      • Label Position:

        • Determines where the label is displayed relative to the data grid (e.g., Top, Left, Right, Bottom).

        • Default: Top.

      • Description:

        • Provides additional explanatory text for the component, typically displayed below the label.

        • Example: "List all materials used, quantity, and unit price."

      • Tooltip:

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

      • Disable Adding / Removing Rows:

        • If checked, users will not be able to add new rows or remove existing ones within the data grid. This effectively makes it a fixed set of rows.

      • Add Another Text:

        • Customizes the text on the button that users click to add a new row.

        • Default: "Add Another".

      • Add Another Position:

        • Determines where the "Add Another" button appears relative to the rows (e.g., Bottom, Top, Both).

        • Default: Bottom.

      • Initialize Empty:

        • If checked, the data grid will start with no rows visible, and the user must click "Add Another" to start adding entries. If unchecked, it will usually start with one empty row.

      • Custom CSS Class:

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

      • Hide Label:

        • If checked, the main label for the component will not be displayed on the form.

      • Show Label in DataGrid:

        • This setting likely controls whether the individual field labels within each data grid row are shown (e.g., if a "Quantity" field is added to the grid, this controls if "Quantity" appears above or next to the input in each row).

      • Modal Edit:

        • If checked, editing individual rows or components within the data grid might open in a separate pop-up modal window, which can be useful for complex rows.

      2. Data Tab

      The Data tab manages the initial data and structure of the Data Grid.

      • Default Value:

        • Allows you to pre-populate the data grid with one or more default rows when the form loads. You would click "Add Another" here to define these default rows.

      3. Validation Tab

      The Validation tab defines rules for the Data Grid component.

      • Required:

        • If checked, the user must add at least one row to the data grid before submitting the form.

      • Minimum Length:

        • The minimum number of rows that must be present in the data grid.

      • Maximum Length:

        • The maximum number of rows that can be added to the data grid.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this entire Data Grid 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 "Additional Expenses" data grid only displays when a "Are there additional expenses?" checkbox is checked.

      Preview Window

      The Preview area on the right side of the dialog box visually represents the Data Grid component. It typically shows a placeholder for a row and an "Add Another" button, indicating that users can add multiple entries. It helps you visualize how the repeatable section will appear on your form.

      Actions at the bottom of the dialog:

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

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

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

      Best Practices for Data Grid Component:

      • Use for Repeating Data: Ideal for scenarios where users need to add multiple entries of the same type, like a list of inventory items, dependents, or daily readings.

      • Customize "Add Another Text": Change the "Add Another Text" to be more descriptive (e.g., "Add Another Item", "Add New Person") for better user guidance.

      • Set Min/Max Length: Use "Minimum Length" to ensure essential data is collected (e.g., at least one defect reported) and "Maximum Length" to prevent excessive entries if needed.

      • Consider "Initialize Empty": For grids that might not always be needed, check "Initialize Empty" to keep the form cleaner until the user explicitly needs to add rows.

      • Conditional Display: Hide the entire Data Grid until it's relevant to the user's input, making complex forms easier to navigate.