I’m sorry I don’t quite understand the image that you’re showing. But if I assume that this is a Restaurant menu ordering app (that the TS shows), maybe what we can build is something like this :
We need 3 Collections :
-
Menus
Menus Collection will hold all of the menu item database that the owner of the restaurant will input. This will hold all maybe the name of the menu, the price, the image, the description. -
Orders
Orders is every order that the customer create. An Order will consist several Order Items records.And at the end will consist the total price of all the item that the customer order. -
Order Items
Order items consists the quantity and the subtotal price of every menu that the customer orders.
We can add any additional field that we need. For example I add Order Number field and Order Item Field.
These are some of the screenshots of mine :
Next, let’s talk about the relationship.
- Menu with Order Item (many to many)
We want the customer can add and subtract the quantity of every menu that they’ll order right? So we need to link these 2 collections - Order Item with Order (many to many)
We want in every Order will consists all of the order item with the quantity and the subtotal price. So we can sum all of them at the end. - Order with Users (1 order belong to 1 user, 1 user can have multiple order)
This just to link who’s creating the order.
So the final result of our Collection will become like this :
Now let’s begin with the steps
-
First we need a button to create the order. Add the logged-in user to the user relationship, and add some count on the order number so we will have a different order number in every Order. Last, link this button to another screen that will shows all of the menu. Let’s call it Order Menu screen.
-
In the Order Menu screen, we need to add 1 list that contains Menu Collection (no filter, because we assume we always want to show all of the menu to the customer). Always use Custom List in Adalo, because most of the time we will need to add another custom list inside those custom list.
-
Now the hack is in here. At the moment, there is no Order Item record in every Menu record right? Because the customer is not yet order anything. So we need 1 groups of component that has only 2 objective : to shows 0 quantity & to create a new Order Item record. After this new order Item created, we will hide this group of components. That’s why we need to change the visibility of this components’s group to Sometimes Visible > Current Menu > order Items > Count > 0.
This group only shows when customer have 0 quantity on that particular menu. Hope this make sense. -
Now we need to add actions to that plus button. I found that at least I need to add 3 actions :
a. First, create a new Order Item
b. Update that particular new Order Item to add the Current Order, add the Current Menu, calculate the quantity.
c. Update again that particular new Order Item to calculate the Subtotal Price. (because I’ve found that if we calculate this subtotal price in point b., it always shows 0 subtotal because of the quantity still 0)
Note : If you found a simpler way to achieve this, that’s would be fine!
-
After the new Order Item created, it will hide that component’s group. So now what will we show to the customer? Of course a list of the new Order Item that’ve been made. But not the list itself we want to show, right? we want to show only the quantity.
Hence We can copy our previous component’s group and make it a Custom List. This will be a Current Menu > Order Item.
Hope, till this part still make sense to you. -
After point 5, everything will be much easier. Because we can now tap into all of the dynamic value of the Current Order Item. We can change the text with Magic Text that shows Current Order Item > Quantity. We can also add action to the Plus and Minus icon so it can add and subtract the Curren Order Item > Quantity.
-
The last hack I’ve made is with the subtract icon. I need to make 2 conditional Actions. That if the number of Current Order Item > Quantity is equal to 1 and the customer click on it (so the quantity will turn to 0), I will delete that Current Order Item. Why? Because if the quantity is 0, that means the customer is not ordering that menu right? So we don’t want to include this Order Item anymore.
And if the number of Current Order Item > Quantity is greater than 1 and the customer click on it (so the quantity let say from 5 turn to 4, from 4 to 3, from 3 to 2), this only the event that I will calculate the current quantity - 1.
I think that’s all for the “item quantity count” purpose.
For the final part, I want to show another tip to make the order summary page. Because here we need to again use the nested custom lists technique.
The main idea here is we want to show all of the Order Items of the Current Order. And inside each of the Order Item, we want to show what Menus that’s related to that particular Order Item.
That’s it. Hope all of this make sense for you, and make changes accordingly.
Here’s the test app that you can test it : Restaurant Order Menu Test App