Flow Layout Field

Flow Layout Field

The Flow Layout field acts as a responsive container that allows you to group fields into side-by-side columns or grids. It is the primary tool for optimizing screen real estate, moving away from a single-column “stack” to a more professional, dashboard-style interface.

Use Cases

Flow Layout is best utilized when data inputs are short (e.g., numbers, toggles, or dates) and don’t require the full width of the screen.

  • Inspection Forms: Display metrics like Oil Level, Pressure, and Temp side-by-side for quick entry.
  • Equipment Details: Group Serial Number, Model, and Status in a single row.
  • Media Galleries: Organize multiple photo or file upload fields into a clean grid.
  • Status Dashboards: Align “Pass/Fail” indicators or “Good/Fair/Poor” metrics for rapid assessment.

Configuration Settings

The layout behavior is dictated by the Responsive Breakpoint, which determines when the app switches from “Mobile” rules to “Tablet” rules.

PropertyDescriptionConstraint
Responsive BreakpointThe pixel width that defines where a “Mobile” screen ends and a “Tablet” screen begins.User-defined (px)
Mobile ColumnsThe number of columns displayed on screens below the breakpoint.Fixed at 2
Tablet ColumnsThe number of columns displayed on screens above the breakpoint.2 to 4

Best Practices for Design

To ensure your forms remain accessible and easy to navigate, follow these design principles:

 Do

  • Logical Grouping: Only place related fields (e.g., Address Line 1 and Address Line 2) in the same container.
  • Visual Balance: Use fields of similar height. Pair a Text Input with a Dropdown, rather than a Checkbox with a Signature field.
  • Test on Devices: Always preview the form on a physical mobile device to ensure the 2-column mobile layout isn’t too cramped for the specific field labels.

 Avoid

  • Mixing Control Sizes: Placing a large Multi-line Text Area next to a small Toggle creates awkward whitespace and alignment issues.
  • Overcrowding: Just because you can use 4 columns on a tablet doesn’t mean you should. If your labels are long, stick to 2 or 3 columns.
  • Ignoring Labels: Remember that long field labels will wrap, potentially pushing fields out of alignment horizontally.

    • Related Articles

    • Process Field (2-Step Workflow)

      Workflows are the cornerstone of most business operations. It’s how employees can collaborate, review, and escalate processes in delivering your business’s services promptly. Ensuring not only internal data capture requirements are met, but most ...

    • Choices Field

      In our system, the Choices field is like a Swiss Army Knife – it is a multi-purpose field that enables displaying sets of choices in various ways. As such, Choices fields have a few configurable properties, which can be overwhelming if you try to ...

    • Action Field

      The Action field is an advanced dynamic field that allows customizing up to 5 buttons with user interactions. In addition, set the field’s value based on which button is pressed to drive other field conditional properties like visibility, read-only, ...

    • Page Field

      The Page field is a basic but primary field type needed for any form you create; without it, you cannot add fields to display or capture data in the app. Essentially, it allows you to group fields to break up data capture across numerous pages, ...

    • Contactless Signature Field

      Our Signature field allows the capturing of signatures in the following ways: Shared Device Signature Capture: Users can share a device, which can be handed to the person required to capture the signature. Contactless Signature Capture: Using the ...