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

      Corfix Form Builder: Using the Currency Component.

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

      This component is specifically designed for collecting monetary values and can be configured for different currencies.

      Where to Find It

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

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

      The Display tab controls how the Currency Component appears to the user.

      • Label:

        • This is the visible name of your currency field that users will see. It is a required field.

        • Example: "Amount", "Cost", "Total Value".

      • Label Position:

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

        • Default: Top.

      • Placeholder:

        • Text that appears inside the input field before the user types anything. It's a hint to the user about what to enter.

        • Example: "Enter amount in USD".

      • Description:

        • Provides additional explanatory text for the field, typically displayed below the input box.

        • Example: "Enter the total cost of materials in US Dollars."

      • Tooltip:

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

      • Prefix:

        • Text or symbol that appears before the input field, often used for currency symbols (e.g., "$", "€").

      • Suffix:

        • Text that appears after the input field (less common for currency, but could be for units like "per unit").

      • Custom CSS Class:

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

      • Autocomplete:

        • Controls browser autocomplete behavior (e.g., 'on' or 'off').

        • Default: 'on'.

      • Hide Label:

        • If checked, the label for the currency field will not be displayed.

      • Allow Spellcheck:

        • If checked, enables spell-checking for the currency field (browser-dependent). (Note: This is often less relevant for numeric inputs).

      • 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 will be included in reports.

      2. Data Tab

      The Data tab manages the underlying data properties of the currency field.

      • Multiple Values:

        • If checked, allows the user to enter multiple currency amounts for this field (e.g., a list of expenses).

      • Default Value:

        • The pre-filled monetary value that appears in the input field when the form loads. Users can override this value.

      • Currency:

        • Allows you to select the specific currency type (e.g., "US Dollar (USD)", "Canadian Dollar (CAD)", "Euro (EUR)"). This influences the symbol displayed and how the value is stored/validated.

      3. Validation Tab

      The Validation tab defines rules to ensure the monetary value entered by the user meets specific requirements.

      • Required:

        • If checked, the user must enter a value in this field before submitting the form.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this Currency 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 "Discount Amount" field only displays when an "Apply Discount?" checkbox is checked.

      Preview Panel

      The Preview panel on the right side of the dialog box shows you how the "Currency" input field will visually appear on your form. It displays a text input box, and depending on your settings, it might also show a currency symbol (though not explicitly visible in this screenshot, it's a common feature for this component type).

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Currency Component from the form.

      Best Practices for Currency Component:

      • Clear Label: Use a precise label like "Total Cost," "Invoice Amount," or "Payment Due."

      • Set Correct Currency: Always select the accurate "Currency" (e.g., "US Dollar (USD)") to ensure proper formatting and data interpretation.

      • Make it Required if Essential: If a monetary value is critical for the record (e.g., total expense), check the "Required" box.

      • Use Placeholder for Format: A placeholder can hint at expected number of decimal places or format (e.g., "0.00").

      • Conditional Display: Hide currency fields when they are not immediately relevant, making the form cleaner (e.g., show "Refund Amount" only if "Issue Refund" is selected).