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
Add a Text component
Set the value using Magic Text:
Current Order → ID
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:
Text
Example: Order Placed
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
Add a new state
Set the icon to check
Add a visibility condition using Magic Text:
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
Add a Text component
Set the value to:
Order Details
Order Items List
Add a Custom List
Set the collection to Order Items
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
Create a new screen (for vendors)
Add a List of Orders
Display:
Order name
Order ID as a subtitle (Magic Text)
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:
Add a Click Action
Choose Update
Update Current Order
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.
