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

      Corfix Form Builder: Using the Photo Component

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

      This component allows users to upload images, potentially directly from a webcam onto a Form.

      Where to Find It

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

      • Display

      • File

      • Data

      • Validation

      • Conditional

      1. Display Tab

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

      • Label:

        • This is the visible title for your photo upload field that users will see. It is a required field.

        • Example: "Upload Photos", "Site Images", "Evidence Photos".

      • Label Position:

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

        • Default: Top.

      • Description:

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

        • Example: "Please upload photos of the damaged equipment."

      • 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 label for the component will not be displayed.

      • Modal Edit:

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

      2. File Tab

      The File tab offers specific settings for how photos are handled, including webcam integration.

      • Enable web camera:

        • If checked, allows users to capture photos directly using their device's webcam or camera, rather than just uploading existing files.

      • Webcam Width:

        • Sets the width (in pixels) for the live webcam feed displayed during capture.

      • Image Display Size:

        • Sets the maximum width or height (in pixels) for how the uploaded image is displayed on the form after upload. This is for display purposes, not the original file size.

      • Image Pixel Size:

        • Sets the target maximum dimension (in pixels) for the uploaded image's resolution. This helps control the file size of the stored image.

      3. Data Tab

      The Data tab manages how uploaded photo data is handled.

      • Multiple Values:

        • If checked, allows the user to upload more than one photo to this component. This is useful for capturing multiple angles or instances.

      4. Validation Tab

      The Validation tab defines rules for the photo upload field.

      • Required:

        • If checked, the user must upload at least one photo before submitting the form.

      5. Conditional Tab

      The Conditional tab allows you to set up rules for when this Photo 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 the "Upload Incident Photos" component only displays when an "Incident Occurred?" checkbox is checked.

      Preview Panel

      The Preview Panel on the right side of the dialog box shows you how the "Upload" field for photos will visually appear on your form. It displays the drag-and-drop area and the "Browse" link, giving you a real-time sense of the user's interaction.

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Photo Component from the form.

      Best Practices for Photo Component:

      • Clear Label & Description: Use a straightforward label (e.g., "Site Photos") and a description to guide users on what types of images to upload.

      • Enable Webcam for Field Use: If forms are often filled out on-site, enable the "Webcam" option for quick, direct photo capture.

      • Allow Multiple Photos: For most scenarios requiring visual documentation, check "Multiple Values" so users can upload all necessary images.

      • Set Image Pixel Size: Control "Image Pixel Size" to balance image quality with file size, optimizing for storage and load times, especially for mobile users.

      • Use Conditional Display: Only show the photo upload field when it's logically required (e.g., show "Upload Photos of Damage" only if "Damage Found" is checked).