> ## Documentation Index > Fetch the complete documentation index at: https://docs.mileapp.dev/llms.txt > Use this file to discover all available pages before exploring further. # Creating A Flow A **Flow** is the form your field worker fills in to complete one type of task. It defines: * The **pages** your team will step through on the mobile app (Initial Page + one or more Mobile App Pages). * The **components** on each page (input, select, photo, signature, list, bill, and so on) that capture the data you need. You design the Flow once in the web admin, save it, and from then on every task created from that Flow uses the same structure. Required permission: * View Flow * Create Flow Common Flow examples you can start with: * **Delivery** — recipient details, photo of package, signature on delivery. * **Pickup** — sender details, package count, pickup photo. * **Inspection** — checklist, condition photos, technician notes. * **Canvassing / Field Sales** — store visit, order capture, follow-up notes. MileApp also ships several **ready-to-use Flows** that are pre-created when you sign up (Pickup, Delivery, Field Sales, etc.) so you can try the platform before designing your own. See [Building Flow](/pages/flow/building-flow) for the full reference. ## Opening the Flow Builder Open the **Flow** section from the sidebar. The Flow Builder is the single page you use to pick an existing Flow or start a new one.
Flow Builder entry page

The Flow Builder when no Flow is selected yet

1. **Flow tab** — the top sub-navigation shows three tabs (Flow / Automation / Workflow). Stay on the **Flow** tab to design and edit Flows. 2. **Select Flow** — open this dropdown to pick an existing Flow in your organization. Once you pick one, its pages and configuration load into the builder. 3. **New** — create a new Flow from scratch. A small modal asks for the Flow title, then drops you back here with the new Flow ready to edit. (Use the chevron next to **New** to access additional creation modes such as templates.) 4. **Pages / Configuration** — once a Flow is loaded, these two tabs switch between the builder's two halves: **Pages** (design the forms) and **Configuration** (set Title/Content/Label, Time, Route, etc.). 5. **Mobile App Preview** — the right-side panel renders the Flow the way your field worker will see it on the mobile app. It updates live as you edit. ## Designing the Pages When you pick or create a Flow, the **Pages** tab is where you actually build the form.
Flow Builder Pages tab

Pages tab with a Flow loaded — Initial Page plus a Mobile App Page

1. **Pages tab (active)** — keep this tab open while you're adding pages and components to the Flow. 2. **Page list** — every Flow has one **Initial Page** at the top and zero or more **Mobile App Pages** underneath. Click **Add Page** to append more, or the trash icon to remove a non-initial page. 3. **Component canvas** — the centre area shows the components on the page you have selected. Click any component to edit its settings; the prompt "Select a component to configure its properties and settings" appears when nothing is selected. 4. **Mobile App Preview** — the same Flow rendered as it will appear on the mobile app, so you can sanity-check the field worker experience as you build. 5. **Save** — commits all changes to the Flow. **Cancel** discards unsaved changes; **Save as Template** stores the current Flow as a reusable template. ### Why the Initial Page matters A task usually moves through three states: 1. **Task Created** — the admin (or another field user) creates the task on the web or mobile app. 2. **Task Assigned** — the admin picks the field user who will do it. 3. **Task Done** — the field user finishes the work on the mobile app. The Initial Page is the **only** page that is shown when the task is being created. Everything you put there has to be filled in upfront — it is information the *creator* knows (such as customer name, delivery address). The remaining Mobile App Pages are shown to the field user when they actually do the task, and that is where you capture on-site data (photos, signatures, condition notes). If you let the field user create their own tasks on the mobile app, the Initial Page and the Mobile App Pages look the same to them — but the distinction still matters for tasks created from the web admin or via API. For the full Flow Builder reference (component types, validations, mobile preview), see [Flow Builder → Introduction](/pages/flow/flow-builder/introduction). ## Configuring the Flow The **Configuration** tab holds the Flow-level settings that decide how each task looks in the Task list, on the mobile app, and inside Route Optimization. ### Task List (Title, Content, Label) These three fields pick which **Initial Page component** is shown as the headline information on the task list (web + mobile).
Configuration → Task List section

Configuration → Task List with Title, Content, and Label assigned to Initial Page components

1. **Title** — usually the customer name or order ID. Shown as the **first, bold line** of every task row. 2. **Content** — usually the address or a short description. Shown as the **secondary line** under the title. 3. **Label** — usually a phone number, label code, or other small piece of identifying info. Shown as a small **pill** below the content. 4. **Mobile App Preview** — the preview on the right immediately reflects the chosen Title/Content/Label so you can confirm they read well. Each dropdown lists the components on the Flow's Initial Page (only `input` and `select` components are eligible). Pick the components whose values best identify the task at a glance.
Mobile app task list showing Title, Content, and Label

How the Title, Content, and Label appear on the mobile app task list

The same three values are also shown on the **web Task list** so dispatchers can scan and assign quickly without opening every task.
Web Task list showing Title, Content, and Label columns

How the Title, Content, and Label render as columns in the web Task list

1. **Title column** — shows the value of the component mapped to **Title** (here, the customer name on each task row, e.g., *Alberto Castro*, *Karen Jackson*). 2. **Content column** — shows the value of the component mapped to **Content** (here, the pickup address, e.g., *Apartment 213*, *Building 24, room 123*). 3. **Label column** — shows the value of the component mapped to **Label** (here, a numeric package label, e.g., *80*, *71*, *24*). ### Time (Start Time & End Time) Time settings control **when a task is visible to the assigned field user** by default — both values are measured in hours from a reference point.
Configuration → Time section

Configuration → Time with default Start Time and End Time

1. **Start Time** — hours *from when the task is created*. With **0**, the task is visible to the assignee right after creation. Set a positive number to delay visibility (e.g., **8** to only show the task at the start of the workday). 2. **End Time** — hours *from the start time*. With **24**, the task expires one day after it starts. Lower the number to set a tighter deadline. The values you set here are **defaults applied when each task is created**. The user creating a task can still override the start and end time for that specific task before submitting. ## What's Next * [Building Flow](/pages/flow/building-flow) — full walkthrough of creating a Flow from scratch or from a template. * [Flow Builder → Introduction](/pages/flow/flow-builder/introduction) — reference for every part of the Flow Builder UI. * [Page: Initial Page](/pages/flow/flow-builder/page-initial-page) and [Page: Mobile App Page](/pages/flow/flow-builder/page-mobile-app-page) — how each page type behaves. * [Creating a Task](/pages/task/creating-task/manual-task-input/manual-task-input) — use your saved Flow to create the first task.