Lists and filtering

Almost every app needs a list

Open almost any app on your phone and you will find a list somewhere: a list of messages, a list of orders, a list of places to visit. In Adalo, a list is the component that takes a whole collection from your database and shows it on the screen, one row per record. Once you understand lists, most of your screens start to feel the same: pick what to show, decide the order, and hide what does not belong.

In this lesson you build on the Trips app from the last lesson. You already have a Trips collection with records in it. Now you will put those trips on a screen, choose how each trip looks, and filter the list so it shows only the trips you want.

Show a collection as a list

When you drag a list onto a screen, the first thing Adalo asks in the left panel is "What is this a list of?" You answer by choosing a collection from your database. Pick Trips, and the list fills with one row for every trip record you have saved. You did not type any of that content by hand; the list reads it straight from the collection, so when a trip is added or changed, the screen updates on its own.

Adalo gives you six ready-made list styles, plus a Custom List you build yourself, so you can match the look to the content:

• Simple List: plain rows of text, good for names or titles.
• Card List: a larger card per record, with room for an image and a few lines.
• Image List: built around a photo for each record.
• Avatar List: a small round image beside each row, common for people.
• Horizontal Card List: cards that scroll sideways instead of down.
• Horizontal Chip List: small pill-shaped tags that scroll sideways.
• Custom List: you build the row yourself from simple components (more on this below).

Start with whichever pre-made style is closest to what you want. You can always switch later.

Sort and filter what people see

A list shows the whole collection by default, but that is rarely what you want. Suppose your Trips collection has a True/False property called Public, and you only want to show trips that are open to everyone. You also want the cheapest trips at the top. Both jobs are done in the list's settings in the left panel.

1. Select the list on the screen so its settings open in the left panel.
2. Confirm the collection under "What is this a list of?" is Trips.
3. Click "Add another filter" to add a rule.
4. Choose the property the rule looks at, here Public.
5. Choose the condition, here Public is equal to True.
6. Under Sorting, choose the property and direction, here Cost, low to high.

Preview the screen. Only the public trips appear, and they run from cheapest to most expensive. You can add more than one filter, and each new rule narrows the list further. In your assignment you use this same flow for a subtler rule: show every trip except the ones the logged-in user created, by filtering where the creator's email is not equal to the logged-in user's email. Same three moves each time: pick a property, pick a condition, add it.

Custom lists and lists inside lists

There are two things the pre-made lists cannot do: match an unusual layout, and show a list within each row. Both are solved by the Custom List.

To make a list custom, you stop using a ready-made style and build the row yourself:

1. Drag a plain List from the simple components onto the screen.
2. Select the list, open Components, and choose Add Components.
3. Drag in the pieces you want in each row, a text label, an image, a button, and position them.
4. Set each element to dynamic, so it reads from the collection instead of showing fixed text. A text label, for example, becomes the trip's Title rather than the word "Title".

Because you control every element, a custom row can itself contain another list. This is a list of lists, and the Trips app is a natural fit: a trip has many days, and each day has many activities. The trick is to build from the inside out.

1. Add a Simple List and set it to be a list of Activities.
2. Add a Text component above it to act as the day's heading.
3. Add an "Add Activity" button below the activities.
4. Select all three together, the list, the heading, and the button, and click "Make List" in the left panel.
5. Set this outer list to be a list of Days, filtered to the current trip's days.
6. Set the heading text to the current day's name, and set the inner list's filter to the current day's activities.

The result is one screen that shows each day of a trip with that day's activities nested underneath. In the assignment you use the same nesting on the home screen: each trip shown with its members listed inside it.

Prefer to see it explained? Here is the recorded Code for Albania lecture on this topic.

Check yourself

• When you add a list to a screen, what is the first question Adalo asks you, and what are you actually choosing when you answer it?
• You want a screen that shows only public trips, cheapest first. Which part of that is a filter and which part is sorting?
• What can a Custom List do that the six ready-made list types cannot, and why does that make a list inside a list possible?