> ## 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.
# Configuration: Data Source
**Data Source** binding lets a flow component pull values from a record stored in MileApp's [Data Source](/pages/data-source/how-to-create-and-use-data-source) menu. When a worker picks an entry on the mobile app — for example a store, customer, or SKU — the form's other fields auto-fill from that record, so the worker does not have to re-type information that already exists in master data.
Only three component types can bind to a Data Source: **Input**, **List**, and **Bill**. Each one uses the same workflow but with slightly different reserved keys.
## When to Use Data Source Binding
* **Master data lookups** — Customer details, store info, product catalogs, staff records
* **Auto-fill on selection** — Pick a customer once and have phone, address, and coordinate populate automatically
* **Consistent data entry** — Field workers select from a validated list instead of typing free text
A Data Source must exist in the **Data Source** menu before it can be bound to a component. See [Data Sources](/pages/data-source/how-to-create-and-use-data-source) for how to define one.
## Binding an Input Component
Data Source binding for an **Input** component is configured inside the component's own settings panel, not in the Configuration tab. The settings appear after you turn the **Use data source** toggle on.
Data Source settings on an Input component
**Input Data Source settings:**
1. **Use data source** — Toggle on to enable Data Source binding. The Data Source section appears underneath the Required/Visible/Use data source row.
2. **Data Type** — Dropdown listing every Data Source defined in your organization. Pick the one to bind to (e.g., `Data_Toko`, `staff_data`).
3. **Search From Column** — Column on the Data Source that the worker searches by. This is the column the mobile app shows in the lookup dropdown — for example "Order ID" lets the worker type or scan an order number to find the row.
4. **Field Mappings** — Each row maps one **Data Field** (column on the Data Source) to a **Component** in the current flow. When the worker selects a record, every mapped field's value is written into the corresponding component on the form. Click **Add Mapping** to add another row.
### How to Configure an Input Data Source
1. Open the Input component in the Flow Builder.
2. Turn on **Use data source**.
3. In **Data Type**, select the Data Source to bind to.
4. In **Search From Column**, pick the column the worker will use to find a record. The component the worker is currently editing is the lookup trigger — typing or scanning here opens the Data Source picker.
5. Under **Field Mappings**, click **Add Mapping** for each value you want auto-filled, then choose a **Data Field** and the **Component** to receive its value.
6. Click **Save**.
When a task is created, the worker types or scans into the Input field, picks a record from the suggestion list, and every mapped component is populated from that record automatically.
## Binding a List Component
The **List** component binds to a Data Source so the worker can pick items from a master product list (instead of typing each item by hand). The mapping uses two reserved keys.
Data Source settings on a List component
**List Data Source settings:**
1. **Data Type** — Pick the Data Source to bind to. It must have at least one Text field and one Number field.
2. **Search From Column** — Column on the Data Source that the worker searches by when adding a new list row.
3. **Field Mappings** — Two reserved keys must be mapped before the binding works:
| Reserved Key | Maps To | Required Data Source Field Type |
| -------------- | ------------------------------------ | ------------------------------- |
| **Item Title** | The name displayed for each list row | Text |
| **Item Qty** | The quantity entered for that row | Number |
### How to Configure a List Data Source
1. Open the List component in the Flow Builder and turn on **Use data source**.
2. In **Data Type**, select the Data Source to bind to.
3. In **Search From Column**, pick the column the worker will use to find a record.
4. Under **Field Mappings**, map **Item Title** to a Text field on the Data Source and **Item Qty** to a Number field.
5. Click **Save**.
On the mobile app, the worker picks a row from the Data Source and the list row's title and quantity prefill from that record.
### Real-World Example: Warehouse Stock Picking
A warehouse operator runs a daily picking task to fulfill outbound orders. Typing every SKU by hand is slow and error-prone, so the flow uses a List component bound to the **`data_barang`** (product master) Data Source.
**Data Source — `data_barang`:**
| Column | Type | Example |
| ----------------- | ------ | ---------------- |
| `sku_code` | Text | `SKU-1042` |
| `product_name` | Text | `Mie Goreng 85g` |
| `stock_available` | Number | `250` |
**List component setup:**
* **Data Type** → `data_barang`
* **Search From Column** → `sku_code` (operator scans the SKU barcode)
* **Field Mappings**:
* **Item Title** → `product_name`
* **Item Qty** → `stock_available`
**Result on the mobile app:**
1. The operator scans the product barcode `SKU-1042`.
2. The list automatically adds a new row with the product name `Mie Goreng 85g` and a default quantity of `250` (the current available stock).
3. The operator changes the quantity to match the actual amount picked from the warehouse shelf.
4. The operator scans the next SKU and repeats the same steps until every item on the order is collected.
Because every product name comes directly from the master data, the list is always consistent — there is no risk of typos like "mi goreng" or "Mie Gorengg" that would make later reporting difficult.
### Other Common List Use Cases
* **Field sales canvassing** — Sales rep picks products from the company catalog into a daily call list, defaulting each row's qty to the recommended order size
* **Asset inventory** — Technician opens a checklist of equipment at a site and confirms the count on hand
* **Inspection survey** — Auditor uses a fixed list of inspection items pulled from a quality-control master Data Source
## Binding a Bill Component
The **Bill** component is similar to List, with one extra reserved key for pricing. Bill also has an **Add-on** section where you define discounts or surcharges separately from the Data Source.
Data Source settings on a Bill component
**Bill Data Source settings:**
1. **Data Type** — Pick the Data Source to bind to. It must have one Text field and two Number fields.
2. **Search From Column** — Column on the Data Source that the worker searches by when adding a new bill line.
3. **Field Mappings** — Three reserved keys must be mapped before the binding works:
| Reserved Key | Maps To | Required Data Source Field Type |
| -------------- | --------------------------------------------- | ------------------------------- |
| **Item Name** | The name displayed for each bill line | Text |
| **Item Qty** | The quantity entered for that line | Number |
| **Item Price** | The unit price used for the total calculation | Number |
4. **Add-on** — Optional discounts or surcharges that adjust the bill total. Add-ons are defined directly on the component (not pulled from the Data Source); pick the **Add-on Type**, name it, and set the price/surcharge.
### How to Configure a Bill Data Source
1. Open the Bill component in the Flow Builder and turn on **Use data source**.
2. In **Data Type**, select the Data Source to bind to.
3. In **Search From Column**, pick the column the worker will use to find a record.
4. Under **Field Mappings**, map **Item Name** to a Text field on the Data Source, and both **Item Qty** and **Item Price** to Number fields.
5. (Optional) Add any **Add-on** rows for discounts or surcharges that should apply to every bill created from this flow.
6. Click **Save**.
Each bill line then prefills the name, quantity, and unit price from the selected Data Source record, and the total recalculates automatically (including any configured add-ons).
### Real-World Example: Retail Sales Order
A field sales rep visits a retail store and writes a sales order on the mobile app. Prices and product names must come from the company's authoritative price list — not be typed by hand — so the flow uses a Bill component bound to the **`data_barang`** Data Source.
**Data Source — `data_barang`:**
| Column | Type | Example |
| -------------- | ------ | ---------------- |
| `sku_code` | Text | `SKU-1042` |
| `product_name` | Text | `Mie Goreng 85g` |
| `default_qty` | Number | `12` |
| `unit_price` | Number | `3500` |
**Bill component setup:**
* **Data Type** → `data_barang`
* **Search From Column** → `sku_code`
* **Field Mappings**:
* **Item Name** → `product_name`
* **Item Qty** → `default_qty`
* **Item Price** → `unit_price`
* **Add-on**:
* `Discount` — `Loyal Customer Discount` — `-5000`
* `Surcharge` — `Delivery Fee` — `15000`
**Result on the mobile app:**
1. The sales rep scans the product barcode `SKU-1042`.
2. The bill automatically adds a new line with the product name `Mie Goreng 85g`, quantity `12`, and unit price `3500`. The line subtotal becomes `42.000` (qty × price).
3. The rep can edit the quantity if the customer orders more or less than the default.
4. The bill total sums up every line, then applies the configured Add-ons: subtracts `5.000` for the Loyal Customer Discount and adds `15.000` for the Delivery Fee.
5. When the rep finishes the task, the final bill total and every line item are saved on the task and exported with the rest of the task data.
### Other Common Bill Use Cases
* **Service technician callouts** — Technician picks repair services from a price list; total is calculated for the customer to pay on the spot, with a fixed call-out fee added via an Add-on
* **Restaurant / food delivery** — Driver records the items delivered, with prices pulled from the menu master; a packaging surcharge can be applied as an Add-on
* **Field installation billing** — Installer selects parts used from a parts catalog; labor is added as an Add-on surcharge per visit
## Related
* [Data Sources](/pages/data-source/how-to-create-and-use-data-source) — Create and manage the Data Sources referenced by these bindings
* [Component: Input](/pages/flow/flow-builder/component-input-type/component-input) — Input component that can bind to a Data Source
* [Component: List](/pages/flow/flow-builder/component-list) — List component reserved keys
* [Component: Bill](/pages/flow/flow-builder/component-bill) — Bill component reserved keys
* [Flow Builder Overview](/pages/flow/flow-builder/introduction) — Reference for every part of the Flow Builder