> ## Documentation Index
> Fetch the complete documentation index at: https://docsv4.mile.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow Builder

> Every part of the screen you use to build a flow.

The **flow builder** is where you design the screens field workers see and fill in on the field app. You add pages, place components, set their properties and check the result on a simulated phone, all on one screen.

> [!NOTE]
>
> Required permission:
>
> * View flow
> * Edit flow

Open **Workflow › Flow** and pick a flow. Without **Edit flow** you can open and view a flow, but the app refuses to save changes.

## Builder layout

![Flow builder](https://mintcdn.com/mileappv4/T0wCST91hRTDusjf/images/v4/workflow/flow-builder.png?fit=max\&auto=format\&n=T0wCST91hRTDusjf\&q=85\&s=67150523668191079464952dd723d22b)

1. **Flow picker**: the flow that is open. Pick another one to switch. The pencil next to it opens the [Flow manager](https://docsv4.mile.app/pages/workflow/flow/managing-flows.md#flow-manager).
2. **Pages / Configuration tabs**: **Pages** is where you build the screens. **Configuration** connects the flow to the task list, routing, task times and the API. See [Configuration](https://docsv4.mile.app/pages/workflow/flow/configuration.md).
3. **History**: every saved version of the flow, with what changed. See [Version History](https://docsv4.mile.app/pages/workflow/flow/version-history.md).
4. **Page list**: the Initial page at the top, then the field app pages. Each page lists its components; click one to edit it. See [Pages](https://docsv4.mile.app/pages/workflow/flow/pages.md).
5. **Add page**: add a field app page at the end of the list.
6. **Component properties**: the settings of the page or component you clicked. When nothing is selected it says **Select a component to edit it.**
7. **Mobile app preview**: the open page as it looks on the field app. It updates as you edit. The phone button at the top right hides or shows it. See [Mobile App Preview](https://docsv4.mile.app/pages/workflow/flow/mobile-preview.md).
8. **Discard changes / Save**: **Save** stores every change; **Discard changes** goes back to the last saved version. Both are disabled until you change something. The text on the left says **Unsaved changes** or **All changes saved**.

> [!TIP]
>
> If you leave the page or pick another flow with unsaved changes, the app asks whether to discard them.

## Pages

A flow is made of **pages**, and each page is one screen on the field app.

* **Initial page**: always at the top and cannot be deleted, renamed or moved. It is shown when a task is created, on the web app and on the field app, and holds what the person creating the task already knows, such as the customer's name and address.
* **Field app pages** (*Page 1*, *Page 2*, …): the screens the field worker goes through while doing the task. Add as many as you need with **Add page**, rename them, and drag them into order.

See [Pages](https://docsv4.mile.app/pages/workflow/flow/pages.md) for the full reference.

## Components

Components are the building blocks of a page. Click **Add component** at the bottom of a page, pick the type, then set it up in the properties panel.

![Add component](https://mintcdn.com/mileappv4/-MCTwHCeWrNJwJq6/images/v4/workflow/flow-add-component.png?fit=max\&auto=format\&n=-MCTwHCeWrNJwJq6\&q=85\&s=a1ebcdde7192bfddc43d569453f7beac)

The list only offers the components that the page can hold. On the Initial page that is **Input**, **Select**, **View**, **List**, **Photo**, **Signature**, **Bill** and **Subpage**. Field app pages also offer **Timer**, **Voice**, **Capture**, **Subflow** and **Video**. When the flow reaches its plan's component limit, **Add component** says so instead.

Click a component in the page list to open its properties:

![Component properties](https://mintcdn.com/mileappv4/T0wCST91hRTDusjf/images/v4/workflow/flow-component.png?fit=max\&auto=format\&n=T0wCST91hRTDusjf\&q=85\&s=6065d4a3c15b3e6ad41815cb756d647e)

1. **Selected component**: highlighted in the page list. Drag its handle, or use the arrow keys on it, to move it within the page.
2. **Basic settings**: **Component Type**, its type (here **Type of Input**), **Title**, **Default Value**, and the **Visible** and **Required** switches. Every component type has its own set; see [Components](https://docsv4.mile.app/pages/workflow/flow/components/introduction.md).
3. **Type-specific settings**: settings that only this type has, such as filling a coordinate from an address.
4. **Configuration**: **Show As** puts the component's value on the task list, and **Route As** sends it to routing. You can set the same from the [Configuration](https://docsv4.mile.app/pages/workflow/flow/configuration.md) tab.

Each component's **Title** also gives it an ID, which is used in imports, exports, automations and the API. Changing the title of a saved component changes its ID; the app tells you the old and the new ID.

The **⋯** button on a component row opens its actions:

![Component actions](https://mintcdn.com/mileappv4/T0wCST91hRTDusjf/images/v4/workflow/flow-component-menu.png?fit=max\&auto=format\&n=T0wCST91hRTDusjf\&q=85\&s=eceaa2684556888fd384150866f6969c)

* **Move to Page …**: move the component to another page. A component that only field app pages can hold, such as a Timer, cannot be moved to the Initial page; the app tells you if a move is not allowed.
* **Delete component**: remove it when you save.

The table below lists every component:

| Component | What it does | Initial page | Field app pages |
| - | - | :-: | :-: |
| [Input](https://docsv4.mile.app/pages/workflow/flow/components/input/introduction.md) | Captures typed data: text, number, date, time, phone number, link, currency, address or coordinate. | Yes | Yes |
| [Select](https://docsv4.mile.app/pages/workflow/flow/components/select.md) | A dropdown, checkboxes or a group of buttons. | Yes | Yes |
| [View](https://docsv4.mile.app/pages/workflow/flow/components/view.md) | Shows information, often a value from the Initial page. | Yes | Yes |
| [List](https://docsv4.mile.app/pages/workflow/flow/components/list/introduction.md) | Items with a quantity. | Yes | Yes |
| [Photo](https://docsv4.mile.app/pages/workflow/flow/components/photo.md) | Takes photos. | Yes | Yes |
| [Signature](https://docsv4.mile.app/pages/workflow/flow/components/signature.md) | A hand-drawn signature. | Yes | Yes |
| [Bill](https://docsv4.mile.app/pages/workflow/flow/components/bill/introduction.md) | Billable items with quantity, price, costs, discounts and a total. | Yes | Yes |
| [Subpage](https://docsv4.mile.app/pages/workflow/flow/components/subpage.md) | A group of fields filled in more than once. | Yes | Yes |
| [Timer](https://docsv4.mile.app/pages/workflow/flow/components/timer.md) | Measures how long a step takes. | No | Yes |
| [Voice Note](https://docsv4.mile.app/pages/workflow/flow/components/voice-note.md) | Records audio. | No | Yes |
| [Capture](https://docsv4.mile.app/pages/workflow/flow/components/capture.md) | Stamps the date and time of a step. | No | Yes |
| [Subflow](https://docsv4.mile.app/pages/workflow/flow/components/subflow.md) | Creates a linked task of another flow. | No | Yes |
| [Video](https://docsv4.mile.app/pages/workflow/flow/components/video.md) | Records a short video. | No | Yes |

## Before you save

When you click **Save**, the app checks the flow. A page with a problem shows a warning icon (**Please re-check the components on this page before saving the flow**), and the component that needs fixing is marked.

Two settings get a reminder if they are empty, because tasks still work without them but look incomplete:

* **Task Title Mapping Not Configured**: no component is set as the task list **Title**, so task titles may be blank.
* **Routing Address Mapping Not Configured**: no component is set as the route **Address**, so routing visits will have no address.

Each reminder links to the part of the Configuration tab to fix, or lets you save anyway.

## Related

* [Pages](https://docsv4.mile.app/pages/workflow/flow/pages.md)
* [Mobile App Preview](https://docsv4.mile.app/pages/workflow/flow/mobile-preview.md)
* [Configuration](https://docsv4.mile.app/pages/workflow/flow/configuration.md)
* [Version History](https://docsv4.mile.app/pages/workflow/flow/version-history.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.