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

This guide walks through how to create a Track Your Order experience in Adalo that works for both users and vendors. The setup allows users to see their order progress in real time, while vendors can

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.