# 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.