# How to Create a “Track Your Order” Screen in Adalo

{% embed url="<https://www.youtube.com/watch?v=-NBimPTZyYg>" %}

### What You’ll Build

* A **Track Order (User)** screen that visually shows order progress
* A **Track Order (Vendor)** screen where order status can be updated
* A shared order status system using a **Number** property
* An order details section showing items and totals

***

### Requirements

Before starting, make sure you have:

* An **Orders** collection
* An **Order Items** collection
* A checkout or order confirmation flow
* A way to navigate to a “Track Order” screen

***

### Step 1: Add an Order Status Property

Open your **Orders** collection and add a new property:

* **Property name:** `Order Status Number`
* **Type:** Number

This property will control which steps appear completed on the Track Order screen.

#### Recommended Status Values

| Number | Meaning          |
| ------ | ---------------- |
| 1      | Order Placed     |
| 2      | Order Received   |
| 3      | Making Order     |
| 4      | Ready for Pickup |

> 💡 Using a number instead of text allows you to rename steps later without changing any logic.

***

### Step 2: Create the Track Order (User) Screen

Create a new screen and name it:

**Track Order – User**

This screen should be linked from:

* Your order confirmation screen
* A previous orders list
* (Optional) A button on the home screen

***

### Step 3: Show the Order ID

1. Add a **Text** component
2. Set the value using **Magic Text**:
   * `Current Order → ID`
3. Increase the font size and center it on the screen

This helps both users and vendors reference the same order.

***

### Step 4: Build the Order Status Steps

Each order step will live inside a **Rectangle** component.

#### Why use rectangles?

* Keeps spacing consistent
* Makes it easy to duplicate steps
* Helps visually separate each status

***

#### Inside Each Rectangle

Add the following components:

1. **Text**
   * Example: `Order Placed`
2. **Button**
   * Remove the button text
   * Change the icon to `fisheye` (or another empty indicator)
   * Set the button type to **Text**
   * Increase the icon size slightly

This button is used only for visual status—not navigation.

***

### Step 5: Configure Button States (Magic Text Logic)

Each status button will use **Additional States**.

#### Default State

* Icon: `fisheye` (or empty circle)

#### Completed State

1. Add a new state
2. Set the icon to `check`
3. Add a visibility condition using **Magic Text**:

```
Current Order → Order Status Number
is greater than or equal to [step number]
```

***

#### Status Step Conditions

| Step Label       | Condition |
| ---------------- | --------- |
| Order Placed     | ≥ 1       |
| Order Received   | ≥ 2       |
| Making Order     | ≥ 3       |
| Ready for Pickup | ≥ 4       |

Because the condition uses **greater than or equal to**, all previous steps stay checked as the order progresses.

***

### Step 6: Add the Order Details Section

#### Section Header

1. Add a **Text** component
2. Set the value to:\
   **Order Details**

***

#### Order Items List

1. Add a **Custom List**
2. Set the collection to **Order Items**
3. Add a filter:
   * `Order Items → Order`
   * **is equal to**
   * `Current Order`

***

#### Inside the Custom List

Add the following components:

* **Image**
  * Size: \~30 × 30
  * Magic Text:
    * `Current Order Item → Image URL`
  * Remove shadow
* **Text**
  * `Current Order Item → Name`
* **Text**
  * `Current Order Item → Item Cost`
  * Format as **Currency**

Because the cost is stored on the order item, no calculations are needed.

***

#### Order Total

Below the list, add a **Text** component:

* Magic Text:
  * `Current Order → Total Amount`
* Format: Currency
* Align right (optional)

***

### Step 7: Create the Track Order (Vendor) Screen

Duplicate the **Track Order – User** screen and rename it:

**Track Order – Vendor**

The layout and logic remain the same, but this screen allows updates.

***

### Step 8: Create a Vendor Orders List

1. Create a new screen (for vendors)
2. Add a **List of Orders**
3. Display:
   * Order name
   * Order ID as a subtitle (Magic Text)
4. Add a click action:
   * Link to **Track Order – Vendor**

***

### Step 9: Allow Vendors to Update Order Status

On the **Vendor** version of the screen only:

For each rectangle:

1. Add a **Click Action**
2. Choose **Update**
3. Update **Current Order**
4. Set:
   * `Order Status Number = [step number]`

| Step             | Value |
| ---------------- | ----- |
| Order Placed     | 1     |
| Order Received   | 2     |
| Making Order     | 3     |
| Ready for Pickup | 4     |

Now vendors can move the order forward with one tap.

***

### How This Works in Real Time

Because both screens use the **same order record**:

* Vendor updates instantly reflect on the user screen
* Users always see the latest order status
* No additional workflows are required

***

### Optional Enhancements

#### Push Notifications

You can trigger notifications when:

* Order Status Number changes to `4`
* Example message:

  > “Your order is ready for pickup!”

***

#### Visual Customization Ideas

* Add connecting lines between steps
* Turn steps into a progress bar
* Change colors based on status
* Display steps horizontally instead of vertically

***

### Why This Approach Is Recommended

* Uses Magic Text only
* Avoids fragile text-based conditions
* Easy to rename steps later
* Works for pickup, delivery, or shipping
* Simple to extend with notifications

***

### Summary

By using a single **Number** property and Adalo’s **button states**, you can build a flexible, real-time **Track Your Order** experience for both users and vendors—without complex logic.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/how-to/how-to-create-a-track-your-order-screen-in-adalo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.