Each app in Adalo is made up of screens & components. A screen is similar to a web page and it shows all the visual elements of the app. Each screen will have a different design, which is made up of components. Components are the individual building blocks that make up each screen's design.

Screens & Components Overview

Components
Buttons
Every app needs buttons! In Adalo, adding buttons is easy. Just click the + icon in the sidebar andsearch for Button. Try adding a link Action to the button below and connect it to the "Collections"screen.
LEARN ABOUT COLLECTIONS
Sample Datum name
Sample Datum name
Sample Datum name
Every Adalo app is made up of components. To add a component, simply click the big + button. We've added a "SimpleList" for you below.
Components & Data
TRY THIS
Lists need to have connected data. Select the list above in the Builder and choose the"Tasks" Collection under Setup.

Adding Actions
TRY THIS
Set the "Right Section" toggle in the list to have an action that toggles the "Completed"value. This will make it work like a todo list. Easy!

You can add "Click Actions" to any component in Adalo. Click Actions can change screens or perform database actionslike creating, updating or deleting records in your database.
Task name

Task name

Task name


Home

Components

Collections

Forms

Layout
Collections
Database Collections
The Database tab is where your app's data is stored. Think of it like a spreadsheet where each Collection is itsown sheet. Each column is a property and each row is a record.  
TRY THIS
Create a new Collection called Recipes. Add properties for recipe name, description, and number ofminutes it takes to complete.

Relationships
When you need to connect two Collections, you use relationships. Relationships can be one-to-many ormany-to-many. For example, in a todo app, each user can have many todos, but each todo only belongs to asingle user. So you would create a one-to-many relationship between Users and Todos. However, for recipes, arecipe will have many ingredients, and ingredients appear in many recipes. So here you would create amany-to-many relationship between recipes and ingredients.
TRY THIS
Create an Ingredients Collection and add a Many-to-Many relationship to your Recipes Collection.


Home

Components

Collections

Forms

Layout
Home
Components, Actions, & Data
Collections
Forms
Responsive Layout
Welcome to Adalo!
Choose a lesson below to start learning.

Home

Components

Collections

Forms

Layout

Learn Adalo

Components
Buttons
Every app needs buttons! In Adalo, adding buttons is easy. Just click the + icon in the sidebar andsearch for Button. Try adding a link Action to the button below and connect it to the "Collections"screen.
LEARN ABOUT COLLECTIONS
Sample Datum name
Sample Datum name
Sample Datum name
Every Adalo app is made up of components. To add a component, simply click the big + button. We've added a "SimpleList" for you below.
Components & Data
TRY THIS
Lists need to have connected data. Select the list above in the Builder and choose the"Tasks" Collection under Setup.

Adding Actions
TRY THIS
Set the "Right Section" toggle in the list to have an action that toggles the "Completed"value. This will make it work like a todo list. Easy!

You can add "Click Actions" to any component in Adalo. Click Actions can change screens or perform database actionslike creating, updating or deleting records in your database.
Task name

Task name

Task name


Home

Components

Collections

Forms

Layout

What is this a list of?

Sample Data

Filter

All sample data
ADD CUSTOM FILTER

Sorting

Add sorting...

Maximum number of items

ADVANCED OPTIONS

Divider

Inset
Divider Color
#e0e0e0

Click Actions

No Actions
ADD ACTION

Components
Buttons
Every app needs buttons! In Adalo, adding buttons is easy. Just click the + icon in the sidebar andsearch for Button. Try adding a link Action to the button below and connect it to the "Collections"screen.
LEARN ABOUT COLLECTIONS
Sample Datum name
Sample Datum name
Sample Datum name
Every Adalo app is made up of components. To add a component, simply click the big + button. We've added a "SimpleList" for you below.
Components & Data
TRY THIS
Lists need to have connected data. Select the list above in the Builder and choose the"Tasks" Collection under Setup.

Adding Actions
TRY THIS
Set the "Right Section" toggle in the list to have an action that toggles the "Completed"value. This will make it work like a todo list. Easy!

You can add "Click Actions" to any component in Adalo. Click Actions can change screens or perform database actionslike creating, updating or deleting records in your database.
Task name

Task name

Task name


Home

Components

Collections

Forms

Layout
Collections
Database Collections
The Database tab is where your app's data is stored. Think of it like a spreadsheet where each Collection is itsown sheet. Each column is a property and each row is a record.  
TRY THIS
Create a new Collection called Recipes. Add properties for recipe name, description, and number ofminutes it takes to complete.

Relationships
When you need to connect two Collections, you use relationships. Relationships can be one-to-many ormany-to-many. For example, in a todo app, each user can have many todos, but each todo only belongs to asingle user. So you would create a one-to-many relationship between Users and Todos. However, for recipes, arecipe will have many ingredients, and ingredients appear in many recipes. So here you would create amany-to-many relationship between recipes and ingredients.
TRY THIS
Create an Ingredients Collection and add a Many-to-Many relationship to your Recipes Collection.


Home

Components

Collections

Forms

Layout
Home
Components, Actions, & Data
Collections
Forms
Responsive Layout
Welcome to Adalo!
Choose a lesson below to start learning.

Home

Components

Collections

Forms

Layout
Title
Subtitle
Title
Subtitle
Title
Subtitle
COMPONENTS & DATA - AUTO GROUP
Simple List
Simple List
SETUP
LAYOUT
Simple List

What is this a list of?

Sample Data

Filter

All sample data
ADD CUSTOM FILTER

Sorting

Add sorting...

Maximum number of items

ADVANCED OPTIONS

Divider

Inset
Divider Color
#e0e0e0

Click Actions

No Actions
ADD ACTION
Title
Subtitle
Left Section
Right Section
Background
List Header
List Search
List Empty State
▲ Debug

Countdown

Have your app count down in style 😎

INSTALLED

Countdown
Made with ♡ by Minimum Studio
INSTALLED

Have your app count down in style 😎

20k Installs
Last Updated a month ago
Contact Developer

Components
Buttons
Every app needs buttons! In Adalo, adding buttons is easy. Just click the + icon in the sidebar andsearch for Button. Try adding a link Action to the button below and connect it to the "Collections"screen.
LEARN ABOUT COLLECTIONS
Sample Datum name
Sample Datum name
Sample Datum name
Every Adalo app is made up of components. To add a component, simply click the big + button. We've added a "SimpleList" for you below.
Components & Data
TRY THIS
Lists need to have connected data. Select the list above in the Builder and choose the"Tasks" Collection under Setup.

Adding Actions
TRY THIS
Set the "Right Section" toggle in the list to have an action that toggles the "Completed"value. This will make it work like a todo list. Easy!

You can add "Click Actions" to any component in Adalo. Click Actions can change screens or perform database actionslike creating, updating or deleting records in your database.
Task name

Task name

Task name


Home

Components

Collections

Forms

Layout
Collections
Database Collections
The Database tab is where your app's data is stored. Think of it like a spreadsheet where each Collection is itsown sheet. Each column is a property and each row is a record.  
TRY THIS
Create a new Collection called Recipes. Add properties for recipe name, description, and number ofminutes it takes to complete.

Relationships
When you need to connect two Collections, you use relationships. Relationships can be one-to-many ormany-to-many. For example, in a todo app, each user can have many todos, but each todo only belongs to asingle user. So you would create a one-to-many relationship between Users and Todos. However, for recipes, arecipe will have many ingredients, and ingredients appear in many recipes. So here you would create amany-to-many relationship between recipes and ingredients.
TRY THIS
Create an Ingredients Collection and add a Many-to-Many relationship to your Recipes Collection.


Home

Components

Collections

Forms

Layout
Forms 2
Using "Current" Data
Linking to a screen from a list item automatically passes that list item's data. Once you've linked to a screen likethis one, components on that screen can use the "Current" option in flyouts to access the information in therecord the user clicked on. The form below will show the data from whatever the user clicks on and allow them toupdate it.
TRY THIS
Try changing the form below to be just like the one above so it updates the "Current" task.

Task Name
Enter name...
Completed
UPDATE TASK
Name
Enter name...
Description
Enter description...
CREATE FORM

Home

Components

Collections

Forms

Layout
Forms
Creating Records with Forms
The easiest way to give users the ability to create records in your app is to add a form. Like with lists, you canconnect a form to any Collection.
TRY THIS
Hit Preview, then navigate to the Forms screen and use the form above to create a new task.

Name
Enter name...
Completed
CREATE TASK
Task name
Task name
Task name
Updating Records with Forms
You can also use forms to update records from a list. First, create a list. Then, link it to a Collection. Next, add anaction that links a click on a list item to a new screen. This will send the "Current" record to the new screen whenthe user clicks.
TRY THIS
Hit Preview and navigate to the Forms screen. Click into a list item above, then use the form toupdate the current list item.


Home

Components

Collections

Forms

Layout
Layout
Responsive Layout
In Adalo, a single app can be designed to look great on every screen size. To control each component's layout,select the component and then click the Layout tab. For each component, you can choose to have it scale with thescreen, or stay fixed, so it won't ever change size.
TRY THIS
Change the size of this screen and watch how the components scale.

Layout: Anchoring
Anchoring allows you to control how a component "sticks" to the screen as it scales. If you want something to stayto the left, anchor it left. If you want it to stay in the center, anchor it to the center. Easy!
TRY THIS
Change the size of this screen and watch how the icons above react.




Custom Layout Settings
Custom Layout Settings allow you to change the size, position, and responsive settings of any component for aspecific screen size. For example, you can have a component scale on mobile and tablet, but then stay at a fixedsize on Desktop so it doesn't scale too wide.
You can also easily show and hide any component by screen size. To do so, simply click on the visibility buttonsunder Layout.
Pro Tip: Try designing your layouts on mobile first, then expand them on desktop. It's a lot easier to take a small,simple design and make it wider than it is to take a wide, complex design and crunch it down!
TRY THIS
Select a component on this screen and try hiding it on desktop. Change the screen size to see itdisappear and come back.


Home

Components

Collections

Forms

Layout
Home
Components, Actions, & Data
Collections
Forms
Responsive Layout
Welcome to Adalo!
Choose a lesson below to start learning.

Home

Components

Collections

Forms

Layout
Title
Subtitle
Title
Subtitle
Title
Subtitle