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

      Corfix Form Builder: Using the Drop Down Component

      This article will summarize how to use the Drop Down in Template Builder.

      This article Summarizes the various settings available for a "Drop Down Component" in Corfix. A Drop Down component (also known as a "Select" or "Dropdown list") allows users to select a single option from a predefined list.

      Where to Find It

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

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

      The Display tab controls how the Drop Down component appears to the user.

      • Label:

        • This is the main title for your dropdown list that users will see. It is a required field.

        • Example: "Select Your Role", "Choose a Department", "Preferred Color".

      • Label Position:

        • Determines where the main label is displayed relative to the dropdown menu (e.g., Top, Left, Right, Bottom).

        • Default: Top.

      • Widget Type:

        • Specifies the underlying HTML element or rendering method for the dropdown. "HTML 5" is a standard web element.

      • Placeholder:

        • Text that appears inside the dropdown field before the user makes a selection. It often serves as an instruction.

        • Example: "Select an option..." or "Choose from the list".

      • Description:

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

        • Example: "Please select the most relevant category for your inquiry."

      • Tooltip:

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

      • Custom CSS Class:

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

      • Hide Label:

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

      • Modal Edit:

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

      • Reportable:

        • If checked, the data from this field (the selected option's value) will be included in reports.

      2. Data Tab

      The Data tab is where you define the list of choices available to the user for this dropdown.

      • Data Source Type:

        • Determines where the list of options comes from. "Values" means you will manually enter them. Other options might include fetching from an API or another component.

      • Default Value:

        • The option that is pre-selected when the form loads. Users can change this selection.

      • Data Source Values:

        • This is a table where you define each individual option in the dropdown list.

          • Flag: (Functionality not immediately clear from screenshot, likely for internal use or advanced features like icons).

          • Label: The visible text that appears in the dropdown list for each option (e.g., "Option A", "Red", "Option B").

          • Value: The actual data value that will be saved when this specific option is selected. This is a required field. It's often good practice to make the Value a simplified, machine-readable version of the Label (e.g., Label "Option A" -> Value "optionA").

          • Add Another: Click this button to add more options to your list.

      • Enable Static Search:

        • If checked, allows users to type into the dropdown field to quickly search and filter the available options, especially useful for long lists.

      3. Validation Tab

      The Validation tab defines rules to ensure the user's selection meets specific requirements.

      • Required:

        • If checked, the user must select an option from the list before submitting the form.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this entire Drop Down Component 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 "Preferred Software" dropdown only displays when the "Are you a Developer?" checkbox is checked.

      Preview Panel

      The Preview panel on the right side of the dialog box shows you how the "Drop Down" will visually appear on your form. As you define options in the Data tab or adjust display settings like the Label, you'll see these changes reflected immediately.

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Drop Down Component from the form.

      Best Practices for Drop Down Component:

      • Clear Main Label: Use a concise label that tells users what they are selecting (e.g., "Select Role," "Priority Level").

      • Meaningful Options: Ensure each dropdown option has a clear "Label" for the user and a useful "Value" for data storage.

      • Use for Single Choice: This component is best when users can only pick one option from a list. For multiple choices, use "Select Boxes."

      • Make Essential Selections Required: If a choice from the dropdown is mandatory, check the "Required" box in the Validation tab.

      • Enable Search for Long Lists: If your dropdown has many options (e.g., more than 10-15), enable "Static Search" to help users find their choice faster.