Lists

Search…
Lists
Nearly every app has at least one screen with a list — whether it's a list of Trips, Users, Conversation, or really anything.
Skill Level: Intermediate
Before You Begin
Know how to copy and paste on your computer
Know how to set up Databases​
You do not need a paid Adalo plan to use this feature
 Walkthrough
Simple
In-Depth
Video
Sorting and Filtering Lists
1.) 
2.) Select the database collection you want listed
3.) Click 'Add another filter' to insert a custom filter
4.) Select which Property you want the filter to depend on (in this case, Public)
5.) Choose the condition of the Property that you want to filter for (True/False, Between, Includes, Excludes, etc)
6.) Under Sorting select how you want to sort your list (in this example, Cost- Low to High)
Creating Custom Lists
1.) 
Click on the list, then select 'Components' and 'Add Components'
2.) Drag in and position new components
3.) Change all of the elements of the list to dynamic (using Magic Text)
Lists of Lists
1.)  The In-Depth tab should be exactly the same as the simple tab except each step should be accompanied by a GIF or a still screenshot
2.)  When using GIFs, try to export using a high frame rate of 20+ and only use GIFs of the entire screen if absolutely necessary. You can also reduce your window size or zoom your browser window to help with this.
3.)  We like using Snagit for GIF creation, but other free GIF software exists as well such as Capture to a GIF for Chrome. 
4.)  Ideally, GIFs should never be over 20 seconds. If they are, consider breaking the step into two steps (insert Unk/T-Pain music here)
Example
This section should contain 3 things:
A statement of what the app's end users should experience
A GIF of the what the app's end users will see/experience (if applicable)
A link to a cloneable kit of the app used to make the walkthrough.
If you charge money for your components, please make sure your share link is not cloneable, otherwise makers will be able to steal your components!
In this case, you can reference some example docs using this template! Click Here​
Learn More
The Learn More section is typically a list of bullet points with advanced tips and tricks, other use cases, links to any other helpful resources, and other info. This section is most helpful for makers wanting to do advanced implementations. You can also use this section to list out optional features with bullet points. 
Help
This help section is only here for providing links to the forum. At the very least, it should always say, 
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
If you are a component developer and provide support for your customers, feel free to leave a support email or website link here as well.
List components show lists of a particular collection in your database.  If your app's database has a Vacation Places collection, then you can use a list to show some or all of the Vacation Places on a screen.
There are seven types of list components:
Simple List
Card List
Image List
Avatar List
Horizontal Card List
Horizontal Chip List
Custom List  
When you first add a list component to a screen, the first option in the left panel is to specify "What is this a list of?"  Here you can select a collection in your database that the component should connect to. From there, you can bind each one of your lists to your collections. 
​
​
​
Component Basics
Sorting and Filtering Lists
Last modified 1mo ago
Copy link
Contents