Skip to main content
The Subpage component is a container component that allows you to create repeatable data entry forms within a task. It enables structured collection of repeating information by grouping related fields that can be duplicated multiple times.

​
What is Subpage?

Subpage acts as a form array where users can add multiple entries of the same structure. Each entry contains multiple sub-components (input fields, selects, photos, etc.) that you configure in the Flow Builder. Use Cases:
  • Multi-recipient deliveries: Capture name, phone, signature for each recipient
  • Item inspection: Record condition, photos, notes for each item
  • Proof of delivery: Collect signature + photo + feedback from multiple parties
  • Service checkpoints: Document multiple inspection points with photos and readings

​
Allowed Sub-Components

Subpage can contain only these five component types:
  1. View - Display-only fields (labels, instructions, calculated values)
  2. Input - All input types (String, Numeric, Date, Datetime, Time, Address, Geolocation, PhoneNumber, URL, Currency)
  3. Select - Dropdown, checkbox, or button selection (single or multi-select)
  4. Photo - Image capture with watermark and gallery options
  5. Signature - Digital signature capture
Nested subpages are not allowed. You cannot add a Subpage component inside another Subpage.

​
How to Configure Subpage

Subpage Configuration

Subpage component configuration in Flow Builder showing Customer Subpage with three sub-components

​
Step 1: Add Subpage Component

In the Flow Builder, drag the Subpage component from the component list to your page.

​
Step 2: Configure Subpage Properties

Configure the basic properties of the Subpage:
  1. Title: Name of the subpage (e.g., “Delivery Recipients”)
  2. Required: Toggle whether at least one entry must be added
  3. Visible: Toggle visibility on the mobile app

​
Step 3: Add Sub-Components

Click ”+ Add Component” inside the Subpage to add fields. Each sub-component has:
  1. Title: Field label displayed to users
  2. Component Type: Choose from view, input, select, photo, or signature
  3. Type (for specific components): Additional type selection (e.g., String, Numeric for Input)
  4. Required: Whether the field must be filled
  5. Visible: Whether the field is displayed
  6. Default Value: Pre-filled value (optional)

​
Step 4: Configure Component-Specific Settings

Subpage Expanded Configuration

Expanded view of a sub-component showing detailed configuration options including Type, Default Value, Required, and Visible settings

For Input Components:
  • String: Set default text value
  • Numeric: Add min/max values and units (e.g., KG, M3)
  • Date: Set default date value
  • Datetime: Set default datetime value
  • Time: Set default time value
  • Address: Multi-line text area with default value
  • Geolocation: Enable map picker for coordinates, geolock with radius settings
  • PhoneNumber: Set default phone number value
  • URL: Set default URL value with validation
  • Currency: Set default currency value with formatting
For Select Components:
  • Options: List of selectable options
  • Min/Max: Selection constraints for multi-select
  • Type: Dropdown, Checkbox, or Button display
For Photo Components:
  • Min/Max: Number of required/allowed photos (0-10+)
  • Watermark: Enable watermark on photos
  • Select Gallery: Allow selection from device gallery
For Signature Components:
  • Required: Whether signature must be captured

​
Step 5: Reorder Sub-Components

Drag the grip handle on the left of each sub-component to reorder fields within the Subpage.

​
Validation Rules

​
Component Level

  • Title: Required for each sub-component
  • ID: Auto-generated from title, must be unique
  • Required Field: Must be marked as required or optional

​
Subpage Level

  • Unique IDs: Sub-component IDs must be unique within the subpage
  • Reserved Keys: Cannot use reserved field names (name, flow, hubId, startTime)
  • Max ID Length: Generated IDs are limited to 47 characters

​
Restrictions

  • No nested subpages: Cannot add Subpage inside Subpage
  • Component types: Only 5 allowed types (view, input, select, photo, signature)
  • No advanced components: Cannot add bill, list, subflow, timer, capture, voice, or barcode

​
How Subpage Works in Tasks

When field workers use the mobile app or web interface to create/complete tasks:
  1. List View: Shows all entries with completion status (e.g., “3/5 fields completed”)
  2. Add Entry: Tap ”+ Add” button to create new entry
  3. Edit Entry: Tap on an entry to open the form
  4. Complete Fields: Fill in all required fields per entry
  5. Delete Entry: Remove entries that are no longer needed
Each entry in a Subpage is independent. Users can add as many entries as needed during task execution.

​
Data Storage and Export

​
Data Format

Subpage data is stored as an array of objects: 
[
  { recipientName: "John Doe", recipientPhone: "+62812345678", signature_url: "s3://..." },
  { recipientName: "Jane Smith", recipientPhone: "+62898765432", signature_url: "s3://..." }
]

​
Export Format

When exporting tasks, Subpage data generates a separate sheet with a “title” column prefix identifying each entry.

​
Best Practices

  1. Clear Titles: Use descriptive titles for sub-components so users understand what to fill
  2. Logical Grouping: Group related fields together (e.g., all recipient info in one subpage)
  3. Required Fields: Mark essential fields as required to ensure data completeness
  4. Reasonable Limits: For photos, set reasonable min/max to avoid excessive uploads
  5. Default Values: Provide default values when appropriate to speed up data entry

​
Common Scenarios

​
Scenario 1: Multi-Stop Delivery Proof

Sub-components:
  • Input (String): Recipient Name
  • Input (PhoneNumber): Recipient Phone
  • Photo (min: 1, max: 3): Delivery Photos
  • Signature: Recipient Signature

​
Scenario 2: Equipment Inspection Checklist

Sub-components:
  • Input (String): Equipment ID
  • Select: Condition (Good, Fair, Poor, Damaged)
  • Input (Numeric): Reading/Measurement
  • Photo (min: 1, max: 5): Inspection Photos
  • Input (String): Notes

​
Scenario 3: Service Quality Check

Sub-components:
  • View: Checkpoint Name (display only)
  • Select: Pass/Fail
  • Input (Numeric): Measurement
  • Photo (min: 0, max: 2): Evidence Photos
  • Input (String): Remarks