# Getting Started If you've made it this far, you're probably thinking about starting to build your app! We're so glad you're here. Check out the links below to find everything you need to start learning Adalo! ## First Time in Adalo — What to Expect Start your no-code app-building journey right by watching this overview video to get a foundational understanding of Adalo and everything that's possible. This video is perfect for anyone who just signed up for Adalo & is looking to learn all the concepts to build the best app they can. Enjoy! {% embed url="" %} This video covers everything you need to know about the first time you log into Adalo. From navigating your app to building screens with components: it's all in here. {% endembed %} ## Three Basic Concepts {% embed url="" %} Learn all about the most important elements of Adalo in this five minute video so you can begin your no-code app building journey. {% endembed %} * [**Components**](/component-basics)— The building blocks of the Adalo interface. * [**Actions**](/actions)— Used to specify what your app should do when you click a particular component. * [**Database**](/database)— Like an Excel spreadsheet, the database allows you to enter data to display to app users or to collect the data that they input into the app. To get started building your app, think about which screens you want to build, what those screens should do, and what data they'll need to display and save. Be sure to check out our [guide to app dat](/database)[a](/database) and our [Getting Started in Adalo](https://appacademy.adalo.com/course/getting-started) course from [The Adalo App Academy](https://appacademy.adalo.com/homepage). {% hint style="info" %} It is important to note that you cannot have multiple instances of the Adalo Editor open simultaneously. Our system is not set up in a way that allows collaboration in an app and any changes may not register correctly or you could accidentally save the wrong instance, overwriting any work you may have completed. {% endhint %} ## Navigating Adalo ### Overview
### Builder Canvas * The Canvas is the workspace where you design the screens of your app * Navigate in the Canvas using the scroll bar or your trackpad— scroll left and right and zoom in and out ### Left Toolbar The options available on the left toolbar open up different menus where can change settings, publish your app, add components, and much more. **Add Panel** * Clicking on the plus button opens the Add Panel, where you can select [components](/component-basics/component-basics) and screens to add to your app **Branding** * Customize the color scheme for your app * This can be changed at any time, and any components using your app's pre-set colors will be automatically updated. **Screens** * A list of all the screens in your app and each component within each screen. **Database** * View and update your app's [database](/database). **Settings** * Change the name of the app * Set an icon for your app * Insert Google Analytics code that will allow you to track how people are using your app * Copy or delete your app **Publish** * Once you have subscribed to a paid plan, you can use this panel to download the app file you can submit to the Apple App Store and the Google Play Store * For Web Apps, this is where you can set the URL for your app #### Analytics * In the analytics tab, you can see tons of information about where your users are located, how many are active per day, and even which screens are visited the most. #### Design Versions * Design versions lets you save a version of your app that you can revert back to later. Note that this is only for the design of your app and does not save any database changes. * Want to try out a new dark theme without having to reset everything back if it doesn't work out? Design versions is your tool! ### Top Bar #### App Switcher * In the middle of the Top Bar, you will see the name of the app you're currently creating * Click the name to open the App Switcher and switch to another app in your account * At the bottom of the list of your apps is a button to Create a New App #### Preview * Use this button to run your app in your web browser so you can test out what you're building. #### Share * The share button allows you to get a link to your app you can send to other people who don't have an Adalo account. This is helpful for getting feedback from others while you are building your app. #### Account Menu * Clicking the account icon opens a menu where you can access Help, Account Settings, and Sign Out * From Account Settings you can edit the following: * Profile Tab * Name * Email Address * Password * Team & Billing * Team Name * Team Members * Billing Plan * Payment Method * Domains * Adalo Subdomain * Every app gets it own URL for viewing on the web * The URL follows the format of: subdomain.adalo.com/app-name * This is where you can customize the "subdomain" part of that URL * Custom Domains * You can also set your app's URL to be on your own domain so that your app's URL is something like app.mycompany.com * You can connect your own domain to your Adalo account here # Ada AI (Beta) Ada is currently in beta and may not yet be available in your Adalo Builder. We're actively improving her capabilities, and your feedback helps shape what comes next. ## Getting Started Ada is Adalo's built-in AI assistant, designed to help you build and manage your apps faster, right from the Builder. Whether you're adding screens, styling components, or working with data, Ada can handle it through simple, natural language prompts. Ada lives inside the Adalo Builder in the bottom left corner. To use her, simply click the icon and type what you'd like to do in plain language. No code or technical syntax required. Ada will interpret your request and make changes to your app in real time. *** ## What Ada Can Do Ada already covers a wide range of Builder actions. Below is a walkthrough of supported prompt categories with examples you can try. In the Builder, you can click any example prompt to copy it to your clipboard.
### Ada Prompt Examples #### Screens Manage your app's screens: create, rename, duplicate, delete, or get a summary of what's on them. * Add a new screen called User Details * Delete the Settings screen * Rename the Home screen to Dashboard * Duplicate the Profile screen * List all my screens * Describe what is on the Home screen * Clear all components from the Settings screen #### Screen Protection Control who can access specific screens by setting role-based restrictions. * Protect the Admin Panel so only admins can access it * Restrict the Settings screen to admin users and redirect others to Home * Remove admin protection from the Dashboard screen #### Components Add or remove UI elements on any screen. * Add a button on the Home screen that goes to Profile * Add a text component on the Welcome screen that says "Hello World" * Add an image to the top of the Home screen * Add a search bar to the Users screen * Remove the subtitle from the Home screen #### Lists Display collections of data using list or card layouts. * Add a list of Tasks to the Home screen * Add a card list of Products to the Shop screen * Change the title of the list on the Home screen to "My Items" #### Forms & Inputs Add input fields, pickers, and form controls to your screens. * Add a date picker to the Create Event screen * Add a dropdown on the Settings screen connected to Categories * Add a toggle to the Profile screen * Add a file picker to the Upload screen * Change the submit button text on the Create Tasks form to "Save Task" * Rename the "email" field on the Sign Up form to "Email Address" #### Text Styling Adjust the appearance of text elements across your app. * Change the title on the Home screen to "Welcome Back" * Make the title on the Dashboard bold * Change the font size of the heading on Home to 28 * Change the subtitle color on the Welcome screen to blue * Make the description on the About screen italic #### Colors & Branding Update colors across your app, from individual components to global branding. * Change the primary color to purple * Change the Sign Up button color on the Welcome screen to green * Change the app bar color on the Home screen to dark blue * Change the background of the Login screen to light gray * Suggest some colors for my app #### Navigation Set up and configure navigation bars, menus, and tabs. * Add bottom navigation with tabs Home, Search, and Profile * Add a side navigation menu to the Dashboard * Add an app bar to the Settings screen * Set the active tab to Profile in the bottom navigation #### Layout Rearrange, resize, and organize elements on your screens. * Move the image above the title on the Home screen * Swap the button and the text on the Welcome screen * Make the image on the Profile screen bigger * Add a separator between the title and the list on Home #### Data & Collections Work with your app's database: add fields, inspect collections, or generate test data. * Add a Status field to the Tasks collection * Describe the Users collection * Show me all the data in Products * Generate dummy data for the Tasks collection #### App Settings Update global app configuration. * Change the app name to MyApp * Regenerate onboarding screen *** ### Tips for Getting the Best Results * **Be specific.** Include the screen name and component you're referring to (e.g., "Change the title on the Home screen" rather than "Change the title"). * **Use natural language.** Write prompts the way you'd explain something to a teammate. * **One thing at a time.** Ada works best with focused, single-action requests. *** ### Feedback Ada is in beta and getting better every day. If something doesn't work as expected, let us know by emailing . Your feedback directly shapes Ada's development. # Design The Design of your Adalo App is one of the most important aspects of your app! The pages in this section will get you up to speed on making your app look and feel amazing! {% content-ref url="/pages/TCdfZDZCxR3Q11lN63Vi" %} [Designing Your App](/design/designing-your-app) {% endcontent-ref %} {% content-ref url="/pages/-MRYByizDz26MuFNTxDz" %} [Branding](/design/branding) {% endcontent-ref %} {% content-ref url="/pages/uCV3xU1YIxCeK4Y8ZTgX" %} [Create Component States](/design/create-component-states) {% endcontent-ref %} {% content-ref url="/pages/c6AaUOqbSzH8gJTOhXpt" %} [Design Versions](/design/design-versions) {% endcontent-ref %} {% content-ref url="/pages/bsEqHdrbGFJsvLjfr3Xh" %} [Additional Design Resources](/design/additional-design-resources) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/njV4Bl2RzLNzT7WHAi7w" %} [Migrating Legacy Apps](/design/migrating-legacy-apps) {% endcontent-ref %} ## Working with the Legacy Builder (uncommon) {% content-ref url="/pages/r3eU1N69r99Zv6sHlsKv" %} [Legacy Builder](/design/legacy-builder) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/FEyAGPi3oTtSPcpMYdzI" %} [Preview your App (Legacy Builder)](/design/legacy-builder/preview-your-app-legacy-builder) {% endcontent-ref %} # Designing Your App With Adalo's App Builder, you can build apps that look great on any device and can be published anywhere with just a click. ## Before you start design Think about how your users will access your app. * Will they be interacting with it as a mobile app, downloading it from either of the [app stores](#user-content-fn-1)[^1] or installed as a PWA[^2]? * Or will they have the option of using a variety of different devices to user your app, like mobile, tablet, or desktop devices? Adalo has two primary app types for both of these scenarios: Mobile Apps and Responsive Apps. These app types are fully compatible with each other in Adalo and you can easily switch between them at any time in your app’s Settings sidebar under “App Layout Type”. ### Mobile Apps (Mobile Devices Only) The Mobile app type allows you to focus on a mobile-only experience for your users. Use this if you don’t need to support users on different device sizes. If you’re just getting started with Adalo, this is a great way to learn as it is simpler than responsive. You can always switch to responsive later and even switch back to mobile at any time if you prefer it. You can publish your mobile app to Apple’s App Store for iOS, Google’s Play Store, and the web on your own custom domain. On the web, all of your users will see a mobile-optimized version of your app. The current version of Mobile Only apps was launched in December, 2023. All mobile apps created prior to this date will be legacy apps ([see below](#what-is-the-different-between-responsive-app-builder-and-legacy-app-builder)). ### Responsive Apps (Mobile, Tablet, and Desktop) Responsive apps allow you to design a single app at three different screen sizes: mobile, tablet, and desktop. You can publish your responsive apps to Apple’s App Store for iOS, Google’s Play Store, and the web on your own custom domain. On the web, your users will automatically see the version of the app that’s best for their screen. You’ll know your app is Responsive if you see the screen size switcher above each screen in your app. The responsive app type was launched in April, 2023. #### Responsive Apps Video Walkthrough {% embed url="" %} ## What is the new Adalo Builder? The Adalo App Build has been through many iterations, but the latest version the most advanced app engine yet. This engine powers both Responsive and Mobile apps. Both of these apps be published to the native mobile app stores and the web. {% hint style="info" %} **NOTE:** The newest Adalo Builder is different than the Legacy Builder. The pages in this section are specific to the new Builder. For help with design in Legacy Builder, please see [this guide](/design/legacy-builder). {% endhint %} ## Pages in this Section {% content-ref url="/pages/BYjqRygfndux63U8clnj" %} [Definitions and Terms](/design/designing-your-app/definitions-and-terms) {% endcontent-ref %} {% content-ref url="/pages/8kZzLt0ATLU7km02ipml" %} [Creating an App](/design/designing-your-app/creating-an-app) {% endcontent-ref %} {% content-ref url="/pages/EDKjGJaVeTPQipk0FZbt" %} [Using the Screen Size Switcher](/design/designing-your-app/using-the-screen-size-switcher) {% endcontent-ref %} {% content-ref url="/pages/DMfTvEOdDLNyqkxxXn0q" %} [Using the Layout Tab](/design/designing-your-app/using-the-layout-tab) {% endcontent-ref %} {% content-ref url="/pages/R3Fxpkw8YY1vnqh0YhlL" %} [Grouping Components](/design/designing-your-app/grouping-components) {% endcontent-ref %} {% content-ref url="/pages/405qHJjlwmAaQkjKrrcJ" %} [Responsive Navigation](/design/designing-your-app/responsive-navigation) {% endcontent-ref %} {% content-ref url="/pages/PHBTVSFUPuAiBx9SC6cU" %} [Responsive Design Best Practices](/design/designing-your-app/responsive-design-best-practices) {% endcontent-ref %} ## FAQ
What is responsive design? Adalo’s Responsive Design allows you to design for multiple screen sizes with one screen and one app.
What is a responsive web app? A responsive web app detects and adjusts the components on the screen to adapt to the screen size of the device being used. It’s not magic, but it’s pretty close. Using the Adalo Builder, you choose what your icons positioning and scaling.
Is a PWA different than a responsive web app? Yes! PWAs don't have to be responsive, but the best ones are. A PWA, or Progressive Web App, is a type of website that acts a lot like an app you might download from the Apple App Store or Google Play Store. One of the defining aspects of a PWA is that it can be installed on the user's device from the browser. All Adalo apps can be published as PWAs, even if you don't choose to build for all screen sizes.
What is the different between the new (Responsive) App Builder and Legacy App Builder? Responsive App Builder is a complete rewrite of the Adalo Legacy Builder's codebase. It includes new layout options, screen sizing, component anchoring, new snap grid improvements, and much more - making it possible to build your app once, and publish to native and web at the same time. The new [Mobile Apps](#mobile-apps-mobile-devices-only) are built on top of the Adalo Responsive App engine. This makes it possible for you to switch between this design modes at will. \ \ Legacy Builder is not designed to respond to screen sizes and typically worked best to create mobile or native apps separately from web apps. Additionally, Legacy apps have no component layout tools, dimished control of publishing, and unimproved snap guides.
[^1]: Apple's App Store or the Google Play Store [^2]: Progressive Web App # Definitions and Terms Definitions and Terms for the Adalo Builder.
App Layout Type Your App Layout type is controlled in your [App Settings](#user-content-fn-1)[^1]. This setting can be changed at any time and determines which device types you are building for. Either Mobile Only, or for all Mobile, Tablet, and Desktop devices. We recommend that everyone start off with the Mobile Only type as you are learning Adalo.
Breakpoints The exact width where the screen shifts from being “mobile” to “tablet” or “desktop.” \ See the exact sizes below. Mobile\ Default: 390px \ Max: 719px Tablet\ Min: 720px \ Default: 834px\ Max: 991px Desktop\ Min: 992px \ Default: 1512px
Fixed Constraints When a component is set to Stays Fixed, the component will stay fixed where it is placed.
Vertical Positioning This is controlled by a group of concepts/features: * Size and Position: Where you place a component on a screen and the physical bounds that you give it * Automatic pushing and pulling that occurs when a horizontal resizing of the screen causes components such as text to grow vertically. * Vertical Positioning can also be affected by the “Sticky While Scrolling” feature which pins a component in place above other content as the user scrolls.
Horizontal Positioning This is controlled by a group of concepts/features: * Size and Position: Where you place a component on a screen and the physical bounds that you give it * Width Resizing: The setting in the Layout tab that controls whether the component stays the same size or grows/shrinks with the horizontal resizing of the screen * Anchoring: The setting in the Layout tab that controls where a given component is “anchored” to the screen. For example, a component that is “Anchored Left” will keep its distance between its leftmost edge and the left edge of the screen.
Layout Tab Layout is the tab's name, where you will find advanced controls that govern how a given component will behave in response to various screen sizes. Controls such as **Visibility** by screen size, **Scaling**, **Anchoring**, and **Sticky While Scrolling** are all found in the layout tab. There are more options in this tab when you are in Responsive Design Mode
Shared Layout Settings Shared Layout Settings allows you to share layout settings between multiple breakpoints.
Custom Layout Settings Custom Layout Settings allows you to customize the layout for individual breakpoints.
Width Resizing The core question you need to answer for each component on the screen is: Do I want this component to grow/shrink as the screen size changes, or do I want it to stay the same size? Stays Fixed: Use for components that don’t grow * Anchor Left: Use for components on the left * Anchor Right: Use for components on the right * Anchor Center: Use for components in the center Scales with Screen: Use for components that grow * Anchor Center: Use for most scaling components, especially multi-column layouts * Anchor Left & Right: Use for a scaling column next to a fixed-width column (example below) Note: When a component is inside a group, Scales with Screen becomes Scales with Group. This constraint tells a component that it should grow and shrink as the width of its parent group changes (more below on how you can use this for advanced layouts). Keep in mind that if its parent group is set to Stays Fixed, a component set to Scales with Group will also stay fixed because the group never scales!
Anchored Component Anchor Left: Use this for components you want to stay on the left side of the screen as it scales. Anchor Right: Use this for components you want to stay on the right side of the screen as it scales. Anchor Center: Use this for components you want to stay centered on the screen as it scales.
Sticky While Scrolling With this enabled, the component or group will not move when scrolling.
Visibility by Breakpoint Visibility by breakpoints allows you to only see what you allow based on the breakpoint. For example, if a single list works on mobile but a two-column list works better on tablet and desktop, you can create this visibility setting.
Note: When you hide a component on a given breakpoint, it will be hidden even in the editor. This allows you to design for each breakpoint without being distracted by components that are only visible on other breakpoints.
Component Tree The Component Tree is where you can see all the components on the selected screen. You can also reorder components by dragging and dropping components up and down in the tree.\ \ You can add components to groups, by click and dragging a component over a group.\ \ You can add and remove components from rectangles by clicking the rectangle's dropdown, then dropping the component into the hierarchy. Click to enlarge the image below:
Parent and Child Components Whenever a component is inside another one, we call the container component the parent, and the component inside the container a child. There are only three types of parent components in Adalo: * Groups * Lists * Rectangles (Responsive Builder only) * Images (Responsive Builder only) * Ellipses (Responsive Builder only) Components can be placed inside each of these components in the [Components Tree](#component-tree).
[^1]: You can open this sidebar by using the little gear menu in the Left Toolbar. # Creating an App Creating a new App is quick and easy. Now design once, publish everywhere. *Skill Level: Beginner* ## Before You Begin * Make sure you've read about the new [Definitions and Terms](/design/designing-your-app/definitions-and-terms) for developing responsive apps. * Make sure you have an Adalo account and are logged in. ## Walkthrough #### 1. (Optional) If you already have apps in your Adalo account, click on the app selector dropdown in the Builder and choose Create New App
screenshot of create new app dropdown
#### 2. In the app selection modal, choose how you want your users to access your app. {% hint style="info" %} **Don't fret over this decision!** You can change which devices you are building for at any time. You can toggle this back and forth by modifying your [App Layout Type](/design/designing-your-app/definitions-and-terms#app-layout-type). {% endhint %} **Mobile, Tablet, and Desktop** - we call these Responsive Apps. Choose this option if you expect your users to use your app at all these different screen sizes. **Mobile Only** - we call these Mobile apps. This is best option to choose if you are new to Adalo! You can optimize your app's design for Mobile screens and then iterate on it for larger screens by toggling your App Layout Type. When you have selected, click "Next".
#### 3. Select a template to get started with, or choose Blank to create a Responsive App from scratch, then click Next. If you're just starting with responsive, it can be helpful to play around with a template first to see how different component setting affect their responsive behavior.
#### 4. Choose a name for your app, the Adalo team if applicable, and some branding colors, then click Create.
#### 5. Congrats! You just created a Responsive Web App that you can publish to web, iOS, and Android! ### Disabling User Registration and Login Adalo will by default add user registration and login features to your app. However there are certainly use cases in which you might not want to require users to create or sign into accounts. You can easily disable this feature by following the steps described in this video: {% embed url="" %} ### Managing Global Settings Many Makers create apps consisting of dozens and in some cases hundreds of screens. As your application grows in size, so can the time required to make even trivial global changes to things like icons or the application logo. One way to maximize update efficiency is by managing references to various assets in using global settings. While global settings aren't a first-class feature in Adalo, you can easily manage them in a Collection. Watch this video to learn more: {% embed url="" %} Managing Global App Options in Adalo {% endembed %} ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://forum.adalo.com/c/roadmap/10) # Using the Screen Size Switcher The screen size switcher is super handy for quickly visualizing how your app will behave on the three main screen sizes. *Skill Level: Beginner* ## Before You Begin * Make sure you've completed the guide for [Creating a Responsive App](/design/designing-your-app/creating-an-app) and have an app created. ## Video {% embed url="" %} ## Walkthrough #### 1. Adalo's new Responsive Apps Builder offers building for three different screen sizes, with predefined resolutions: * **Desktop** - screens larger than 992 x infinite height * **Tablet**- screens 768 - 991 wide x infinite height * **Mobile** - screens up to 767 wide x infinite height {% hint style="info" %} **NOTE:** Thanks to Responsive Apps, rotating a device from vertical to horizontal now adapts the app layout to match the screen size! {% endhint %} #### 2. To access the screen switcher, simply click the device icon at the top left of any screen in the builder.
#### 3. Clicking on the different device types will adjust the screen size in the builder so you can build for that specific screen size.
#### 4. When changing the device with the screen switcher, components on the screen will behave according to their [Layout](/design/designing-your-app/using-the-layout-tab) settings. In this sense, the screen switcher serves as more of an in-builder preview than an actual control of what happens to the app's screen layout. #### 5. You can also preview these different screen sizes by clicking on the screen's label, then clicking and dragging on the screen's yellow borders. Use the screen switcher to reset the screen size back to one of the default screen sizes at any time.
## Learn More * The predefined pixel widths cannot be changed with responsive apps to help you stay aligned with industry-standard screen widths. If you need more advanced control, you can check out the other Screen Detector components in the Adalo Marketplace, though we can't assure the best performance when combining responsive methods in this way. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Building with Sections Learn about the faster way to build your Adalo app with Sections. #### What are Sections? Sections are pre-designed, fully responsive user interfaces that allow you to dramatically speed up how fast you build screens in Adalo. Each Section contains several Components that are already positioned and styled to look great together. With over 150 Sections to pull from, you can mix and match Sections to create your own custom designs. #### Finding a Section
To find a Section, simply hit the + button at the top left and click on the Sections tab. Sections are organized into categories so you can easily find what you’re looking for, or you can search for keywords like “calendar” or “gallery” and you’ll see related Sections. #### Adding Sections to Your Screen To add a Section to your Screen, drag it out like a component. When you drop it onto your screen, it will automatically expand to the full width of the screen. Note that Sections are designed specifically to be full-width. If you have a side navigation, the Section will automatically snap to the edge of the side navigation instead of to the left edge of the screen.
After you place a Section on your screen, you will need to set up each component inside the section to have your content instead of the placeholder content. For text components, type in your own text or [use Magic Text](/component-basics/inserting-dynamic-text). For lists, forms, etc., connect them to the Collection that you want to use and make sure you set up each item inside the list or form to have the data you want to see. #### Section Containers Each Section has an inner content area and spacing around the outer edges. We call the inner content area a “Container” because you add components to it and it holds them like a box. It’s important to understand how to select the various parts of a Section:

Sections, containers, and components

* If you click on any Component inside the Container, the Component will be selected * If you click inside the Container where no Component is present, the Container will be selected. * If you click on the spacing outside the Container but inside the Section, the Section will be Selected. Click and drag here to move the entire Section. {% hint style="info" %} The Section bounding box has a solid line and the Container bounding box has a Dashed line, so it’s easy to tell them apart. {% endhint %} #### Using the Spacing Handles in a Section With a Container inside a Section selected, you’ll see some extra lines pop up around the edges of the container. Click and drag these to adjust the container width and height as well as the spacing between the container and the outer edges of your Section.

Resizing the padding in a Section

Using the handles on the left and right makes it easy to adjust any Section you drag onto your screen to fit the width of your existing content. So if you drag a Section in, and everything looks wider than your other content, simply select the container and drag one of the handles on the left or right. The container and everything inside it will adjust to your desired width. Sections can also have minimum and maximum widths. If you find that dragging the handles "stops" at a certain point, it is probably because of the min/max width settings. {% hint style="info" %} If you want to set your Container size to precise dimensions or change the minimum / maximum widths, select the Container, then click on the Layout tab in the sidebar. Inside the Advanced menu, you’ll find inputs for setting precise values for your Container width and height. {% endhint %} #### Adding Background Colors and Images You can add background colors or images to both the Section itself and the Container. With either the Section or Container Selected, go under the Styles accordion and change “Background Type” to either “Background Color” or “Background Image”. You can also set rounding, borders, and shadow styles here to totally customize the look and feel of your Section. #### Stacking Sections To build out your screen one Section at a time, starting at the top and working your way down. Here are some tips to help you make the most out of Sections: * Important: Sections should never overlap. As your screen changes size, Sections may grow taller or shorter. In order for this to work correctly, make sure your Sections don’t overlap each other. * Sections may not look right when they’re placed side-by-side. They were designed to look consistent when stacked vertically. * When you add a Section to a screen in responsive mode, make sure to check the other screen sizes and move the Section into place on Mobile, Tablet, and Desktop before adding more Sections. #### Moving Sections
When you’re moving a Section around, it’s very important to make sure that you are moving the Section and not the content inside of the Section. If you select a list for instance that’s inside of a Section, you could be dragging that out of your Section unintentionally. To make sure that you have the Section selected, look in the sidebar when you select something. Notice how it says “Section” above the title of what you have selected.
#### Building Your Own Sections
Can’t find the Section you need? In the Sections tab, there’s an Empty Section that allows you to create your own. This works a bit like a Group: you can drag any components you like into it, and it will hold them together. Here are some tips for building your own Sections: * If you’re building a responsive app, you’ll want to read up on how our responsive layout system works before building your own Sections. * Closely examine some non-empty Sections to see how they’re built. Select Components inside of them and look at the Layout tab to see the settings. This will help you when you need to create similar layouts. * Unless your screen is very simple, try to avoid making your entire screen one giant Section. Also avoid making things too complicated and having 50 Sections per screen. We find that the average screen should be made up of around 3-4 Sections. * Never put the following inside Sections: * Components set to “Sticky while scrolling” should never be placed inside a Section. Sticky Components need to be free of any parent objects that affect their position. One example would be the “Action Button” component, which is always set to sticky. . * Our built-in Top Navigation, Side Navigation, Bottom Navigation, and App Bar components should not be placed inside Sections. These should always live on their own and not inside other parent components. * Sections cannot be nested inside of other Sections. They should always be stacked vertically and not overlapping in any way.
# Alignment Tools Alignment Tools allows you to quickly align components on a screen or in a selection. {% embed url="" %} ### To Use: Access Alignment Tools by selecting a component and clicking the More menu.
{% tabs %} {% tab title="Align to Screen" %} {% hint style="info" %} Align to screen shows up when one or more components are selected. {% endhint %} Align to screen acts as if the entire selection is a group and aligns the components with the screen. ### Align Horizontally
### Align Vertically
{% endtab %} {% tab title="Align to Selection" %} {% hint style="info" %} Align to selection shows up when two or more components are selected. {% endhint %} Align to selections acts as if the entire selection is a group and aligns the components with the selection. ### Align Selection Left
### Align Horizontal Center
### Align Right
### Align Top
### Align Vertical Center
### Align Bottom
{% endtab %} {% tab title="Distribute" %} {% hint style="info" %} Distribute shows up when three or more components are selected. {% endhint %} Distribute distributes the space between the selected components. ### Distribute Vertical Spacing
### Distribute Horizontal Spacing
{% endtab %} {% endtabs %}
Keyboard Shortcuts **Align to Selection:**\ Align top: OPTION + W Align left: OPTION + A Align bottom: OPTION + S Align right: OPTION + D Align Vertical Center: OPTION + V Align Horizontal Center: OPTION + H
**Align to Screen**\ Align Vertically: OPTION + SHIFT + V Align Horizontally: OPTION + SHIFT + H
{% hint style="info" %} When selecting items with different parents, align/distribute options will **not** be available. {% endhint %} # Using the Layout Tab The Layout tab holds all of the features you need to build truly responsive web and native apps that look great on any screen size. *Skill Level: Intermediate* ## Before You Begin * Make sure you have a good understanding of the [definition and terms](/design/designing-your-app/definitions-and-terms), as well as the [screen size switcher](/design/designing-your-app/using-the-screen-size-switcher). * Make sure you have [created a responsive app](/design/designing-your-app/creating-an-app). ## Basics The layout tab is where you can adjust how your components are laid out on different screen sizes. It encompasses quite a few areas that each have their own unique features and limitations. In the pages that follow, you'll learn more about each feature of the layout tab and how to use it to build the best responsive apps possible. **You can access the Layout tab by clicking on a component or group and then selecting the Layout option.**
## Pages in this Section {% content-ref url="/pages/prT3rSwrn6zeKgEIxB2H" %} [Screen Size Visibility](/design/designing-your-app/using-the-layout-tab/screen-size-visibility) {% endcontent-ref %} {% content-ref url="/pages/m0hXP9z6emVYL7Wy0oQ1" %} [Sticky While Scrolling](/design/designing-your-app/using-the-layout-tab/sticky-while-scrolling) {% endcontent-ref %} {% content-ref url="/pages/t0G8xbGyAxiPmgE3lMpB" %} [Shared Layout Settings](/design/designing-your-app/using-the-layout-tab/shared-layout-settings) {% endcontent-ref %} {% content-ref url="/pages/SneTXJCtNsIcnH7QPIZ2" %} [Custom Layout Settings](/design/designing-your-app/using-the-layout-tab/custom-layout-settings) {% endcontent-ref %} ## Learn More * The layout tab is not available in apps built in the Legacy Adalo builder. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Screen Size Visibility You can change whether components or groups of components are visible on different screen sizes with the click of a button! *Skill Level: Intermediate* ## Before You Begin * It's highly recommended to become familiar with the [Definitions and Terms](/design/designing-your-app/definitions-and-terms) before reading this guide. * This guide only applies when building Responsive Layout Apps. ## Video {% embed url="" %} ## Walkthrough #### 1. To access the Screen Size Visibility controls, click on a component. Then click on the Layout tab.
#### 2. At the very top, you will see the Visibility controls for different screen sizes of this component.
#### 3. Clicking on one of these buttons will toggle the device visibility on and off for the selected component. For instance, if this rectangle component should only be visible on mobile, then you would turn off the Desktop and Tablet visibility. Notice in the screenshot below how the buttons are now slightly greyed out and accompanied by a "closed eye" icon. {% hint style="info" %} **NOTE:** Turning off visibility for a component or group will also disable it's [Shared Layout settings](/design/designing-your-app/using-the-layout-tab/shared-layout-settings) for that screen size. Notice in the screenshot below that because the Desktop and Tablet toggles are turned off, there are no options to change the Shared Layout Settings for those screen sizes. {% endhint %}
#### 4. In addition to individual components, you can also change visibility settings on entire groups of components as well. Keep in mind that the group visibility settings will overwrite the visibility settings of individual components within that group.
#### 5. Notice in the screenshot above that making components or groups "Not Visible" on a given device, also removes the ability to edit its [Shared](/design/designing-your-app/using-the-layout-tab/shared-layout-settings) and [Custom](/design/designing-your-app/using-the-layout-tab/custom-layout-settings) Layout settings. {% hint style="info" %} **HINT:** The easiest way to get started with responsive design is to design multiple layouts for the three main screen sizes and control them with visibility. For truly responsive and optimized apps, though, Shared and Custom Layout settings are the way to go! {% endhint %} ## Learn More * Currently, it is not possible to control the constraints of screen sizes. The screen sizes are pre-defined dimensions in pixels and cannot be changed; however, these are highly standardized, so your apps will always respond best to most devices on the market today. See [Using the Screen Size Switcher](/design/designing-your-app/using-the-screen-size-switcher) for more info. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Sticky While Scrolling You can make a component or group of components stay visible on the screen, even if users scroll up or down. *Skill Level: Beginner* ## Before You Begin * Make sure you've completed the guide for [Creating a Responsive App](/design/designing-your-app/creating-an-app) and have an app created. {% hint style="info" %} **NOTE**: This feature functions the same way as the old "Fixed to" toggle in the Edit Styles menu of the Legacy builder, except now you can even make components sticky to the side or center of a screen, not just to the top and bottom. See the [Learn More](/design/designing-your-app/using-the-layout-tab/sticky-while-scrolling#learn-more) section of this guide for reference. {% endhint %} ## Video {% embed url="" %} ## Walkthrough #### 1. To turn on Sticky while scrolling, click on a component or group of components, then click on the layout tab.
#### 2. Click on the "Sticky while scrolling" toggle to turn it on for the selected group.
#### 3. Now your component or group will stay fixed in the same position regardless of how far up or down your users scroll on the screen. To turn it off, just click the toggle again. ## Learn More * Sticky while scrolling works the same way that the Fixed option did in Legacy builder, only now you can stick components and groups of components to the top, bottom, center, side, or anywhere else on screen.

OLD Legacy builder version of Sticky While Scrolling

## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Shared Layout Settings Use Shared Layout Settings to make sure components and groups behave the same way on all screen sizes. *Skill Level: Intermediate* ## Before You Begin * Make sure you understand the [definitions and terms](/design/designing-your-app/definitions-and-terms). * Make sure you have read through the previous guides. ## Video {% embed url="" %} ## Walkthrough #### 1. To access the Shared Layout settings, click on a component, then click on the Layout tab.
#### 2. In the Layout tab you will see an options window called Shared Layout Settings with a few options. These options can change slightly based on if your selection is a group or an individual component.There are two main settings here with option for each: * **Scaling**: This controls how the group or component is resized when the screen size is made larger or smaller. * **Anchoring**: This controls how the group or component "latches onto" certain parts of the screen as it is resized. * **Positioning** (not visible): The location of groups or components on screen will be shared across screen sizes. Moving a group or component on one screen size will also change its location on all other screen sizes. We'll get into more detail about these below.
#### 3. Let's look quickly at a small decision tree to better explain which options appear in different circumstances. {% hint style="info" %} **NOTE**: Rectangles act as auto-groups for all components inside them, except components inside the rectangle do not inherit the option to **Scale with Group**. For more information see the article on [Grouping and Rectangles](/design/designing-your-app/grouping-components). {% endhint %}
#### 4. Now let's look at and define each of these option behaviors with some examples. #### Scaling Options Scaling refers to how the size of the group or component changes as the screen size grows or shrinks in width.
OptionDescription
Scales with ScreenCauses groups or components to get larger or smaller based on the screen size.
Scales with GroupCauses the component to match the scaling settings of its parent group, even if the group is set to "Stays Fixed".
Stays FixedCause the group or component size to stay the same regardless of screen size.
#### Anchoring Anchoring refers to the location of the group or component in the screen when the screen size grows or shrinks. | Option | Description | Example | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | | Anchor Left (Stays Fixed) | Locks the distance between the element and the left side of the screen as it scales. Only available when "Stays Fixed" is selected. | ![](/files/qqoCISg1MdI3s2iAgSrF) | | Anchor Right (Stays Fixed) | Locks the distance between the element and the right side of the screen as it scales. Only available when "Stays Fixed" is selected. | ![](/files/sgUp2rJtq3d1Gmq9h9p1) | | Anchor Center (Stays Fixed) | Anchors the component to the center of the screen, but component does not resize as screen size grows or shrinks. | ![](/files/PGoF27DVt0yA14EvHLRi) | | Anchor Center (Scales with Screen) | Scales the distance between the component and both sides of the screen. | ![](/files/lkJFjrM74nfnukjc4QP4) | | Anchor Left and Right (Scales with Screen) | Locks the distance between the left and right sides of the screen as it scales. Only available when "Scales with Screen" or "Scales with Group" is selected. | ![](/files/QFzVPIZ76z5alREQDyW4) | #### 5. The toggles at the top of the Share Screen settings are used to "breakout" the settings for the selected group or component so that they do not share the same settings. When toggled off, a new menu appears below allowing you to change the Scaling, Anchoring, and Positioning independently of the Shared Screen Settings. We'll learn more about these [Custom Screen Settings](/design/designing-your-app/using-the-layout-tab/custom-layout-settings) in the next guide.
## Learn More * Turning off [responsive visibility](/design/designing-your-app/using-the-layout-tab/screen-size-visibility) for a component or group in a specific screen size will also disable its shared screen settings for that screen size. * Check out the Responsive Apps templates when creating a new app - they can help you learn how to create the best layouts possible! ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Custom Layout Settings Use Shared Layout Settings to make sure components and groups behave the same way on all screen sizes. *Skill Level: Intermediate* ## Before You Begin * Make sure you understand the [definitions and terms](/design/designing-your-app/definitions-and-terms). * Make sure you have read through the previous guides, especially how to access the [Layout](/design/designing-your-app/using-the-layout-tab) tab and the [Shared Layout Settings](/design/designing-your-app/using-the-layout-tab/shared-layout-settings). ## Video {% embed url="" %} ## Walkthrough #### 1. To access the custom layout settings, simply toggle off screen size(s) in the Shared Layout Settings. When you do this the Screen Layout settings for that component or group is broken out into its own menu so that the settings can be changed independently of the other screen sizes.
#### 2. When you break out a screen size into Custom Layout settings, you still have the same options as before, except all settings now have separate behavior from any Shared Layout settings. * **Scaling:** The group or component will scale or resize its width according to the setting for just that screen size, regardless of any group or rectangle it is a part of. * **Anchoring:** The group or component will anchor itself according to the setting for just that screen size, regardless of any group or rectangle it is a part of. * **Positioning:** The positioning or location of the component on-screen can be completely different for that screen size, regardless of the group or rectangle it is a part of. Note that for groups, the group boundaries will expand to accommodate the change in its position across screen sizes. #### 3. Click on the dropdown arrow to reveal the same options as Shared Layout, except any changes here will not affect the other screen sizes. Note the different settings in the screenshot below:
#### 4. In addition to how your components scale and are anchored, any positioning and component sizing adjustments you make in the Custom layout settings are saved separately from the shared settings. This makes it possible to now stack elements based on screen size, adjust the number of columns in a layout, and move information around on screen for specific screen sizes. Notice in the GIF below, how the Pricing cards and buttons stack on mobile, but are side-by-side on tablet and desktop.

Click the animation to enlarge.

## Learn More * Turning off [responsive visibility](/design/designing-your-app/using-the-layout-tab/screen-size-visibility) for a component or group in a specific screen size will also disable its shared screen settings for that screen size. * Check out the Responsive Apps templates when creating a new app - they can help you learn how to create the best layouts possible! ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Grouping Components Grouping Components works a bit differently in Responsive Builder than it does in Legacy Builder. *Skill Level: Intermediate* ## Before You Begin * Make sure you understand the [definitions and terms](/design/designing-your-app/definitions-and-terms). * Make sure you have read through the previous guides, especially how to access the [Layout](/design/designing-your-app/using-the-layout-tab) tab and the [Shared Layout Settings](/design/designing-your-app/using-the-layout-tab/shared-layout-settings) and [Custom Layout Settings](/design/designing-your-app/using-the-layout-tab/custom-layout-settings). * Make sure you understand the [Component Tree](/design/designing-your-app/definitions-and-terms#component-tree) and [Parent and Child Components](/design/designing-your-app/definitions-and-terms#parent-and-child-components). ## Video {% embed url="" %} ## Walkthrough #### There are a few principles to understand when using rectangles, images, & ellipses: 1. When you place a rectangle, image, or ellipses on a screen, it acts as a sort of container for other things. You can drag and drop other components into it to create an **Auto-Group.** 2. You can access the components inside the "container" by double-clicking on the component you want to select. Note that you can also have nested rectangles, i.e. rectangles inside of rectangles. 3. Components within a rectangle will scale with the rectangle automatically, unless the component scaling is set to **Stays Fixed**. 4. The yellow bounding box of a rectangle extends only to the edges of the rectangle. 5. In order for a component to be considered "inside" the rectangle, the component's yellow borders must be fully inside the rectangle's borders. 6. Rectangles do not appear in the component tree as a group, but can be opened up like a group can within the component tree to add or remove components. 7. Because rectangles are not technically considered groups, the components inside them do not have the option to **Scale with Group**, however **Scales with Parent** does ensure that the components scale as their parent rectangle scales. {% hint style="info" %} **NOTE**: You cannot ungroup rectangles. If you need to remove components from a rectangle, you can click on the Component and drag it out of the Auto-Group. {% endhint %} ### Groups #### There are a few principles to understand when using rectangles: 1. You can turn anything into a group, even a single component, another group, or a rectangle with components inside it. 2. The green bounding box of a group extends out to include any component within that group, regardless of their location on screen. Group bounding boxes can be quite large if components within the group are positioned far apart. 3. When a component is added to a group, the group's green border extends to include the newly added component. 4. You can Add or Remove a component to a Group by dragging it into or out of the green bounding box. 5. Groups are useful for applying layout constraints to several components or groups that need to maintain not just their own scaling, anchoring, and positioning, but also the components' settings relative to one another. Notice in the animation below, that the pricing cards tend to get closer and farther apart as the screen scales. When the pricing card rectangles are placed into a group, however, the spacing between them stays the same as the screen scales.

Click the animation to enlarge it.

### When Should I Use Groups vs. Rectangles? This is an excellent question, however it's not really an either/or answer because both groups and rectangles serve a similar purpose. The main reason to pick rectangles over groups would be to add styling to the background such as Background Color or Border. ## Learn More * Be sure to check out the [Design](/design) section to learn more about designing screens in Adalo. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Responsive Navigation We have some specialized responsive navigation components that make building responsive menus a breeze! {% content-ref url="/pages/YZWnhVOqIe2MICSsMzXr" %} [Responsive Side Navigation](/design/designing-your-app/responsive-navigation/responsive-side-navigation) {% endcontent-ref %} {% content-ref url="/pages/hITwEzHLo54isZ36nq0n" %} [Responsive Top Navigation](/design/designing-your-app/responsive-navigation/responsive-top-navigation) {% endcontent-ref %} # Responsive Side Navigation The Responsive Side Navigation lets you quickly create a navigation menu for each breakpoint while editing only one component for the side of a screen. ## Video {% embed url="" %} The Responsive Side Navigation is broken down into five different sections. Side Navigation, Title, Menu Item(s), Bottom Bar, and Profile Section.
Adalo Side Navigation Sections
# Side Navigation Side Navigation lets you determine how the Side Navigation will look for each breakpoint. For each breakpoint, you can decide how the menu will be displayed. ### Medium Side Menu
Medium Side Menu
### Small Side Menu
Small Side Menu
### Top Bar Menu
Side Top Bar Menu
### Top Offset Top Offset refers to the amount of space between the top of the screen and the top of the Side Navigation component.
Top Offset Side Navigation
### When the Top Menu Bar Is Open... {% hint style="info" %} To see this in the Builder, see Menu Style and be on the Mobile Breakpoint. {% endhint %} Adjust these settings to change the Top Bar Menu Icon, Top Bar Menu Back Icon, and Overlay between the component and remaining space on the screen.
When Menu Bar Is Open Side Navigation
# Title Title controls the top section of the Side Navigation Bar ### Title Type The Title Type can be an Image or Text. You can use magic text, and URL, upload your own image and use magic text or type your own title.
Title Type Side Navigation
### Divider The Title Divider is the line between the Title and the Menu Items. You can adjust the color and width or toggle it off.
Title Divider Side Navigation
# Menu Style Menu Style allows you to adjust how the menu items are interacted with. ### Active Indicator Active Indicator shows which Menu Item is active. #### Background Fill
Background Fill Side Navigation
#### Full With Background Fill
Full Width Background Side Navigation
#### Line
Line Side Navigation
### Divider The Menu Divider is the line between each Menu Item. You can adjust the color and width or toggle it off.
Menu Style Divider Side Navigation
### Small Side Menu Item Text {% hint style="info" %} This setting will affect Small Side Menu only. {% endhint %} Small Side Menu Item Text allows you to toggle the menu title when using Small Side Menu.
# Menu Items Menu Items allows you to select the icon and title for each Menu Item. You can select an icon for each individual Menu Item and type or use magic text for the title or toggle the Menu Item off and add actions when the menu item is selected. You can add up to six Menu Items.
# Bottom Button Bottom Button will show on ### Type The Bottom Button can be two different types, Info Card & Button or Button.
Info Card Bottom Button
Using Info Card & Button, you can type in the text or use magic text to display information at the bottom of the Responsive Side Navigation. # Profile Section The Profile Section makes it easy to give a personalized experience for your users. This section stays at the bottom of the Responsive Side Navigation. You can control the image, name, and divider.
Profile Section Responsive Side Navigation
# Responsive Top Navigation The Responsive Top Navigation lets you quickly create a navigation menu for each breakpoint while editing only one component for the top of a screen. ## Video {% embed url="" %} The Responsive Top Navigation is broken down into five different sections. Navigation Bar, Title, Menu Item(s), Additional Navigation, and Profile Image.
Responsive Top Navigation
# Navigation Bar The Navigation Bar lets you determine how the Top Navigation will look for each breakpoint. ### Desktop
Desktop Top Navigation Bar
### Tablet & Mobile #### Tablet
Tablet Top Navigation Bar
#### Mobile
Mobile Top Navigation Bar
{% hint style="info" %} To see the different Top Navigation Bar's displays use the [screen switcher](/design/designing-your-app/using-the-screen-size-switcher). {% endhint %} ### Offset Size Offset Size refers to the amount of space between the top of the screen and the top of the Top Navigation component.
# Title The Title Section refers to the left section of the Top Navigation Bar This section can be of two different types which can be the same for all screen sizes or change by screen size. ### Image
Image Title Top Navigation
### Text
Text Title Top Navigation
# Menu Items Easily adjust how the menu items look with Top Navigation You can adjust Menu Items Alignment, Style, Active Indicator/Color ### Alignment Alignment can be adjusted Left, Centered, or Right. #### Left
Left Align
#### Center
Center
#### Right
Right Align
### Style #### Icon on the Left
Icon on Left
#### Icon on Top
### Active Indicator and Color Adjust the Active Indicator and color either by Line or Background Fill #### Line
#### Background Fill
### Menu Item(s) Adjust icons and text for each menu item. {% hint style="info" %} The maximum number of menu items is currently five. {% endhint %}
Top Navigation Menu Items
# Additional Navigation Additional Navigation allows extra navigation options. The two options for Additional Navigation are located on the right side of the Top Navigation Bar. ### 1 Icon & 1 Button
1 Icon 1 Button Top Navigation
### 1 Button
1 Button Top Navigation
# Profile Image The Profile Image makes it easy to give a personalized experience for your users. ### Desktop This section stays at the right of the Responsive Top Navigation on Desktop. You can control what image is displayed.
Image Top Navigation
### Tablet & Mobile On Tablet & Mobile, you can change the image, text displayed, and divider color.
# Responsive Design Best Practices Having a standardized workflow can help tremendously when building responsive apps in Adalo. Find our preferred workflow below. *Skill Level: Intermediate* ## Before You Begin * It's highly recommended that you read through the other guides in [Responsive Apps](/design/designing-your-app) first, so that you have a good understanding of how to use this workflow. * Note that while we believe this workflow works best, you can certainly build in the way that you find works best for you. ## Video {% embed url="" %} ## Walkthrough #### 1. Start building with the smallest preferred screen size your users will be using. For instance, if you are building a social posting app, you might start with mobile first. If you're building an inventory management app for your company, it might make sense to start with a desktop app first. Chunking the app into audience usage can keep you from becoming overwhelmed in trying to design for all screen sizes at once. {% hint style="info" %} **PRO TIP**: We definitely recommend starting with mobile first if you plan to offer it. It's easier to make screens bigger and rearrange components, than it is to make them smaller - components tend to hang off the mobile screen in that scenario. {% endhint %} #### 2. Wireframe the screens you think you might need for your users. Will your app need a profile screen? How about a settings screen or a screen for adding new records? Do you have signup and login screens? Even if you don't place components on these screens initially, having them already built can help you think more deeply about what you might need to include on these screens. #### 3. Think about screens in terms of sections or containers of information. When designing for multiple devices, it can quickly become quite messy if the information you want to display doesn't have a place to live. Dividing pieces of similar information into boxes or containers can help later on when those pieces of information need to move around to accommodate different screen sizes. Looking at other apps that you use can really help you think about sections of information. Let's look at these help docs as an example:
Notice that each piece of information lives within a red rectangle or container on the page. As the screen size changes down to a **mobile** view, notice how these containers change and shift to accomodate the difference in screen size. The page list is now hidden within a menu button and the page navigation is now completely inaccessible, even through the kebab icon in the upper right:
#### 4. Add in placeholder containers and any components you may need to display information. Now that you're thinking in terms of containers of information, it's time actually build some layouts with these containers in mind. In the same way the red squares above represent sections of information, you can use the [Rectangle](/design/designing-your-app/grouping-components) component to make these containers in your own app, then place the relevant components that you need inside of them.
#### 5. Once you have the Rectangles laid out to represent your sections of content, it's usually best to go ahead and start adjusting their [Shared](/design/designing-your-app/using-the-layout-tab/shared-layout-settings) and [Custom](/design/designing-your-app/using-the-layout-tab/custom-layout-settings) Layout settings. Having the Rectangles respond to screen sizes without actually having other components inside them lets you focus solely on the responsive aspect of the content sections, before adding in all the detailed bits. #### 6. Now that the Rectangles are in place and they're responsive across screen sizes, it's time to start dropping your detail components into the content Rectangles. These detail components are your text labels, images, buttons, lists, and anything else you want to display to your end-users. If you're wanting your containers to not appear as a "card" or container, you can set the rectangle background to invisible or the same color as the screen background.
Try adjusting the screen sizes with all of the detail components added in. Chances are it's already looking pretty good, but if you need to adjust individual components inside Rectangles or Groups, you can tweak those components' layout settings separate from their [parent](/design/designing-your-app/definitions-and-terms#parent-and-child-components)[ ](/design/designing-your-app/definitions-and-terms#parent-and-child-components)component. #### 8. Last but not least, make sure all your data is hooked up and you have actions in your app! It probably goes without saying, but you still need to build your app just like any other Adalo app, responsive or not. That includes setting up your database, adding actions to components, connecting screens, and adding in magic text where needed! ## Learn More * This is obviously just one preferred workflow of ours, but it's the one we like the best! Let us know your own workflow in the forum - it may help other makers as well! ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Branding How to create custom branding inside of Adalo {% content-ref url="/pages/-MRYC2x2JYEr45Yq4Rtg" %} [Colors](/design/branding/colors) {% endcontent-ref %} {% content-ref url="/pages/-MRYC5KB6LKjF3TZ5rmP" %} [Fonts](/design/branding/fonts) {% endcontent-ref %} # Colors Add your own brand colors to your Adalo app {% tabs %} {% tab title="Simple Guide" %} In the Colors section of the Branding Tab of the left tool bar, you can set your brand colors. You can set a Primary Color, Secondary Color, Screen Background Color, and Text Color. Once those are set, any new component you add to the screens in your app will use those defaults. For example, the App Bar component uses your branding's Primary Color by default (though of course, you can change the color of the component to whatever you like). When you change the colors in your branding tab, all of the components that are still using those branding colors will be automatically updated all at once. ![](/files/-MRvAqxY2Bc5Z7-il9R-) Your branding colors will be automatically added to the pre-set palette options in the Adalo color picker, along with a lightened and a darkened version of your Primary and Secondary colors. The last two colors of the bottom row in the color picker are set to your selections for text color and screen background color. ![](/files/-MRvB6GE7qzyRwQL0wu5) {% endtab %} {% endtabs %} ## Help If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! # Fonts Use different fonts in your Adalo app. ## Intro Video {% embed url="" %} {% tabs %} {% tab title="Simple Guide" %} ### Where Can I Set the Fonts for my App? In the Branding Tab of the left toolbar, you can see the fonts that are available to use in your app. There are two types of fonts you can set -- a Heading Font and a Body Font. When you add components to your app, the text in them will default to one of these two selected fonts. ![](/files/-MR_NbMedaoyqAahkPzO) ### What Fonts are Available? * If you are on a Free Adalo plan, you have access to the following font options * Oswald * Merriweather * Source Sans Pro * Standard System Font * If you are on a Paid Adalo plan, you have access to choose from over 1,000 fonts from Google Fonts ### What is Standard System Font? Choosing this option will set the font of the text in your app to be the default font of the device that your users are viewing your app on. For Android and Chromebooks, this is Roboto. For iOS and Mac devices, this is San Francisco. For Windows 10, this is a font called Segoe UI. Most apps, especially those in the app stores, use the Standard System Font rather than customize their fonts. ### What Fonts Should I Choose? Choosing fonts that work well (and work well together) can be daunting. There is literally a whole professional field of experts on the subject of typography. Because we want making beautiful apps be as easy as possible, we've provided a number of features to make font selection easy for you. **Popular Pairings -** After you set your Heading Font, when you go to set your Body Font, Adalo will automagically suggest fonts that Pair well with your heading selection. So in the example below, Oswald was selected as the Heading Font, and Adalo is suggesting that Open Sans, Roboto, Lato, Montserrat, or Source Sans Pro would pair well with Oswald. Think of this feature as a sommelier for your font choice. ![](/files/-MR_NrofrqSpiBThPEIj) **Popular Fonts -** Beyond suggested pairings, Adalo also suggests a selection of popular fonts. Both Heading and Body each have their own selection of popular fonts chosen for their style, variety, and accessibility by our design team. ![](/files/-MR_OLWJXGYskOW8tJoT) **Search & Explore -** Of course every app and brand is unique, so you don't have to just follow the popular crowd. If you've already got a font you know you want to use, you can just start typing the name of the font you want to immediately start searching the entire Google Fonts library. If you don't know what font you want to use, and you're in the mood for browsing, the Explore option is always available at the bottom of the font selection dropdowns. This option takes you directly to the Google Fonts website where you can browse and filter on a number of criteria to find the font that's perfect for your app. ![](/files/-MR_PU_3ape41QGsPqFd) ### ### Using Fonts Now that you've set the fonts for your app in the Branding tab, it's time to use them! You can select any component in your app that has configurable text, and in the left panel, below where you can set the text that displays, you will see a tool bar with an icon to add magic text, and a palette icon to open the **Formatting Menu**. ![](/files/-MR_RLR5sfgF9qF9h6kw) **Using formatting menu** - When the formatting menu is open you'll be able to set the following: * Font * Here you can select for this text to use either your Heading Font or your Body Font * Font Weight * Choose from options like Normal, Bold, and Extra Bold * Note: Different Fonts have different weight options available to them. The options in this dropdown automatically change based on what font you have selected. * Font Size * Set the size of the text * Alignment * Choose whether the text is aligned left, right, or center * Text Color * Set the color for your text {% hint style="info" %} **Note:** Not all components will enable all of the possible options in the formatting tool bar. Component developers have the option to enabled which formatting settings make sense for their component. {% endhint %} ### Changing Fonts If you decide to change which fonts you are using in your app, you can do this by heading back to the Branding tab in the left toolbar. When you update either your Heading or Body font, Adalo will automatically update all of the components in your app with the relevant new font. No need to go back to every single component in your app and update them one at a time! Check out this Adalo blog post for [Tips & Tricks for Using Fonts](https://www.adalo.com/posts/tips-tricks-for-using-fonts-in-your-mobile-and-web-apps) in Adalo! {% endtab %} {% endtabs %} ## Help If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! # Create Component States Use conditional visibility and some careful component placement to change how a component looks based on different criteria. *Skill Level: Intermediate* ## Before You Begin * Know about [Screens and Components](/component-basics) and [Filters and Conditions](/component-basics/conditions-and-filtering) * You do not need a paid Adalo plan to use this feature ## Walkthrough {% tabs %} {% tab title="In-Depth" %} Sometimes you may need to create components that have multiple states. For instance, a button that is greyed out until an input is filled in. The way Adalo renders screens makes it very easy to do this. Since Adalo renders the screen from the top down, any missing hidden components are replaced by the components below it. Let's create a simple button that changes states if an input is filled. **1.)** Add a simple button to a screen by clicking the big plus sign in the top left ![](/files/9g9wb7x33Xfo23T257qw) **2.)** Below it, add another button just like it, but set the button color to a lighter color ![](/files/czDQ8Lx6eS2aTrcRiliP) **3.)** Let the bottom border of the first button and the top border of the second button barely touch each other. You can zoom in using **Cmd** and **+** (Mac) or **Ctrl** and **+** (PC) to make sure the borders are touching. ![](/files/X7oFXM0TTsSrFBaJ28ZI) ![](/files/Rtsj4lZjNtrpkNn38EhX) **4.)** Now let's add a text input field above the buttons by clicking the big plus sign in the top left, then clicking the **Forms and Fields** dropdown section. ![](/files/jJICv7T3J6uxt1jhhisa) **5.)** Let's change the visibility of each button so that the one that appears is different depending on if the input is filled or empty. Click on the darker button, then click on the **More** button and choose **Change Visibility**. ![](/files/pRk7w4OoDexKLgQYqSvv) **6.)** Choose **Sometimes Visible** from the **Visibility** dropdown. ![](/files/DqrpIUGlALD4RGGSsNuH) **7.)** In the **"Will be visible if..."** dropdown, choose **Other Components > Input** ![](/files/oEoIO0ONAPvH7GJwXa8I) **8.)** Change the **Is equal to** dropdown to **Is not equal to**, then leave the third input of the visibility set to **Empty** and click **Done.** ![](/files/wzowbs96WfIwZVfNEOdP) **9.)** Now click on the second, lighter button and repeat Steps 5-8 for this button as well - only this time set the visibility to **Is equal to** and leave the third input set to **Empty**. ![](/files/5CpcMYh7rUvMo2V7sfyL) Now this button will change colors based on if the input is filled in or not! The key to making this work is that the borders touch each other so they can take each other's placed based on the visibility conditions. {% endtab %} {% endtabs %} ## Watch a Video This video explains how to toggle component visibility based on conditional values. {% embed url="" %} ## Example Want to see the app we used to make this walkthrough? [Click Here](https://previewer.adalo.com/f7b4368c-cc58-4403-9749-d02d18d96b21) to use or clone the example app. If you don't know how to clone apps, you can learn to do that[ here](/settings/copying-vs-cloning-your-app/how-to-clone-an-app). ## Learn More * Always ensure the elements you want to create states with are aligned vertically and horizontally so that they fall into the same location when the visibility conditions change. * You can make component states out of any component in Adalo. * You can also make component states with visibility conditions that uses data from your database with [Magic Text](/component-basics/inserting-dynamic-text) * Certain components such as Toggles have their own built-in states. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Preview Your App *Skill Level: Beginner* ## Before You Begin * Ensure you have started building your app or created an app from a template in Adalo. Adalo 2.0 Responsive apps are cross-platform apps which work in both mobile and desktop versions. While development, makers can choose to view their apps in either web or mobile versions for testing. This setting can be controlled from the Publish section in the left panel. ## Walkthrough 1. Go to the Publish section in the left panel. 2. If you wish to ***share*** this with users, using our share function, mark the app as published by toggling ***Publish*** to on.
3. Go to **Web App** section and scroll to “Show Desktop Users…”. 4. Select how you want the app to be Previewed. * **Mobile App Preview:** This will load a new screen with a skin that will show you how your app will look and function on Mobile devices.
* **Responsive App:** This will load a new screen showing the Responsive version of the app. On a desktop, it will show the desktop web version by default. * If you would like to see how the app responds on various screen sizes, you can adjust the size of the browser manually or use the [DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/) to simulate different devices. * Alternatively, you can try using this [Mobile Simulator Chrome Extension](https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk). 5. **Save** Settings. 6. Select the ***Preview*** button in the top Left corner of your Builder. 7. If you wish to share the app with Users, you will need to [publish a web version](/publishing-apps/publishing-to-the-web) of your app and then you can share using the Domain the app is set on or by clicking the ***Share*** button in the top Left corner of your Builder. # Design Versions You can create different design versions of your app that you can use to experiment with different layouts, publish new updates, or even restore backup versions if something goes awry. *Skill Level: Beginner* ## Intro Video {% embed url="" %} ## Before You Begin * Ensure you have an app to save as a design version! * Design versions only save the visuals and layouts of your app. *They do not save database changes of any kind.* * You will need a paid Adalo plan to use this feature. ## Walkthrough {% tabs %} {% tab title="Simple" %} **1.)** To create a design version, click on the Versions tab in the left menu , then click **+Create Design Version.** **2.)** A popup will appear where you can give your version a name and optionally provide some notes about the version such as version number, changes made, questions that need answering, etc. When finished, click **Create**. ![](/files/Wm6FGBXRU5Qt54Sp2TVn) **3.)** In the **Versions** tab, you can also see a list of your previous versions (up to 10). The list includes both manual saves as well as automatic saves of your app. You can see the name of the version, a preview of its notes, who created it, and when.
**4.)** Clicking on the More button on a version will reveal some options. You can click on **Version Details** to see the full name and all notes for a version. Clicking on **Restore Version** will revert the current working version of your app back to the selected saved version. Click on **Delete Version** to... well... delete the saved version. ![](/files/T2u8ZcWd4QvcbSpA1C3R) **5.)** In case you're unsure about what is saved in a design version, we've created a handy chart below showing which items will change when you restore a design version. {% hint style="info" %} **IMPORTANT:** While the collections, properties, and record data are not saved in versions, the way they are connected to your app (through lists, forms, etc.) **are** saved in design versions. {% endhint %} | Item | Will change upon version restore? | | ----------------------------------------------------------------------------------------------------- | --------------------------------- | | Screens and screens tab settings | ✅ | | Components on each screen | ✅ | | Setup of components on each screen (ex: list filter setup, which Collection is linked to a list, etc) | ✅ | | Branding tab settings | ✅ | | Screen Type (Home, etc) | ✅ | | Domains | ✅ | | Collection data | 🚫 | | Collections and Collection Setup | 🚫 | | Collection Permissions | 🚫 | | API Keys | 🚫 | | External Collections | 🚫 | | Custom Actions | 🚫 | | Installed or purchased components | 🚫 | | App settings tab | 🚫 | | Publish settings | 🚫 | | Profile settings | 🚫 | | Team & Billing | 🚫 | | App Builds | 🚫 | | {% endtab %} | | | {% endtabs %} | | ## Learn More * Restoring a saved version will cause an auto-save version to be created before the restore happens. * Saving database changes is not currently supported, but is something we would like to do in the future. * Deleting collections is permanent between versions. If you delete a collection and try to restore it with a design version, it will not be restored. * Changing the connected collection of forms and lists between design versions will be reflected whenever you restore a version. * Design versions are per team, not per user. * Private and paid components will remain unchanged between versions (i.e. components purchased in one version will be available for use in all versions). * Custom actions also remain unchanged between versions (i.e. a custom action created in one version will be available for use in all versions.) ## Help If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! # Additional Design Resources Master the art of smart design, user research, and user experience to design seamless apps with our Adalo App Academy Courses.
Fundamentals of Design In Adalo Seamlessly designed apps help make amazing experiences. With the help of Kelcy Vermaak, learn design basics from within the Adalo Editor.
Intro to Wireframing Great user interfaces & experiences start with wireframing. Learn this new skill to take your app development to the next level.
Design Systems For No-Code Master a collection of principles and design insights that you can put into practice throughout your organization's design needs.
Create Intuitive Digital Experiences – Intro to Object-Oriented UX in Adalo OOUX is a secret weapon for breaking down complexity. It is a philosophy for designing digital systems that respects the fact that people think in objects.
Building Adalo Apps That 'Hook' Users Learn how to build habit-forming web & mobile apps that will have your users coming back for more.
Fiverr x Adalo Logo Maker It happens to everyone: you have an idea for an app but haven't thought about branding. With the built-into-Adalo logo-maker by Fiverr you have a done-for-you logo in five minutes.
# Migrating Legacy Apps You can migrate legacy apps to the new Adalo App Builder, with a few limitations. ## Before You Begin * You will need a Legacy app to migrate * Ensure you have read how to [Copy an App](https://help.adalo.com/settings/copying-vs-cloning-your-app/how-to-copy-and-or-delete-an-app#copy-an-app) * Note that only Legacy Apps can be copied as a Legacy App. You can't copy a new app to Legacy. * Choose whether you want to copy as a new Mobile-Only or Responsive App... ### Why You Should Transition to the Responsive Builder Adalo's Responsive Builder introduces layout control and compatibility with all current and future component updates. Legacy apps will no longer receive improvements or support for new features, so we strongly encourage all makers to rebuild their apps using the Responsive Builder to future proof their projects and benefit from smaller app sizes and more efficient layouts. ### Rebuilding vs Copying While it is possible to copy your existing legacy app into a responsive version, we do **not** recommend this approach. Legacy layout structures, especially nested rectangles and groups, do not translate cleanly. For example, rectangles in the Responsive Builder act as containers and will automatically group any components placed inside them, which can lead to unexpected layout issues if carried over from legacy built app. Instead, we encourage you to **start fresh** by creating a new app using the Responsive Builder and [sharing the database](/how-to/how-to-share-a-database) with your existing app. This ensures a clean, intentional layout and makes the transition smoother in the long run while also allowing you to check your app with the new [Adalo X-Ray Tool](/performance/adalo-x-ray) to ensure a performant app from the start. ### Choosing a Destination App Type **Responsive Apps (Mobile, Tablet, and Desktop)** Responsive apps allow you to design a single app at three different screen sizes: mobile, tablet, and desktop. You can publish your responsive apps to Apple’s App Store for iOS, Google’s Play Store, and the web on your own custom domain. On the web, your users will automatically see the version of the app that’s best for their screen. You’ll know your app is Responsive if you see the screen size switcher above each screen in your app. The responsive app type was launched in April, 2023. **Mobile Apps (Mobile Devices Only)** The Mobile app type allows you to focus on a mobile-only experience for your users. Use this if you don’t need to support users on different device sizes. If you’re just getting started with Adalo, this is a great way to learn as it is simpler than responsive. You can always switch to responsive later and even switch back to mobile at any time if you prefer it. You can publish your mobile app to Apple’s App Store for iOS, Google’s Play Store, and the web on your own custom domain. On the web, all of your users will see a mobile-optimized version of your app. The current version of Mobile Only apps was launched in December, 2023. All mobile apps created prior to this date will be legacy apps (see below). ## Walkthrough 1. Go to the Legacy App you wish to migrate. 2. Go to the left panel in the Adalo Builder, in the Settings section. 3. Go to Copy/Delete sub-section and select Copy app
4. Give your new app copy a name and select the toggle for "***Copy As A New Mobile-Only App***" or "***Copy As A New Responsive App***"
{% hint style="success" %} We recommend selecting "***Copy As A New Mobile-Only App***" {% endhint %} {% hint style="warning" %} **NOTE!** When selecting a Responsive App, as the warning states, you will need to adjust the Layout settings for each component in your app to ensure Responsiveness. Migrated apps are not automatically made responsive. {% endhint %} 5. Choose whether you want to Copy the Database structure or Share the same Database as the original Legacy App. {% hint style="info" %} More than likely you will want to share the same Database so that when you publish the new Responsive build of your app, your app users still on a Legacy build of your app still have access to the any new app data created after the new Responsive App goes live. {% endhint %} * If you have chosen to copy the database and you are on multiple teams, you can choose the team you wish to copy the app to.
6. Finally, click "Copy". You're done! Now that your Legacy app has been migrated, you'll want to check your screens and components to make sure that they are behaving as you expect. If you chose to copy as a Responsive App, then you should position and configure each component on each screen size. Check out the [Layout Setup Guide](https://help.adalo.com/design/designing-your-app/using-the-layout-tab) for more information on this!
Once you have migrated your app to a new Mobile-Only or Responsive app and are ready to publish, you can see our Publishing Guides for more information: * Our all new [Web App Publishing Guide](https://help.adalo.com/testing-your-app/publishing-to-the-web)! * [Publishing your app to the Apple App Store](https://help.adalo.com/testing-your-app/publishing-to-the-apple-app-store) would be as straightforward as adding the right information to your iOS Export Settings. * [Publishing to the Google Play store](https://help.adalo.com/testing-your-app/publishing-to-the-google-play-store) would need a one-time intervention from your end to update some critical information. * Please add your package name, Frontend google-services.json and Service Account Key google-services.json from your existing Firebase Project used in the original app to your new app. * Publish a new build. * Reach out to our team to request we update the Version Code of your app. This can be found in your Google Developer Account. Alternatively, provide the link for both the ***New App*** and ***Original App*** and our team can look this up for you! ## Learn More * Check out the [Changelog ](https://adalo.canny.io/changelog/you-can-now-copy-a-legacy-app-as-a-responsive-app)Post for more info! * You cannot migrate Responsive Apps to a Legacy App. * Remember, that migrated apps are not automatically responsive. You should adjust the layout settings of your screens and components after migrating. ## Help If you need additional help with transitioning your app to Adalo 2.0, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Legacy Builder The Legacy Native Builder is Adalo's original editing engine that works best for Native mobile apps and mobile PWA apps. ## What is the Legacy Builder? When you first create an app in Adalo, you may be presented with a few options for which Adalo Builder you want to use, depending on how recently you signed up for Adalo. As a new user, you will only have the option to build with our new [Responsive App Builder](/design/designing-your-app), however users with apps built in the Legacy builder may still see the option to create Legacy apps. These options are available in the Create New App dialog box. {% hint style="info" %} **NOTE:** Apps built with the Legacy Builders are not designed to be responsive and have different design options and workflows than the new Adalo Builder**.** The pages in this section are specific to Legacy Builder. {% endhint %} ### Legacy App Types Adalo has two older app types that are still supported, but may not receive new feature updates. A quick way to spot if your app is a Legacy app is to select a component on any screen. If you **don’t** see a “Layout” tab, then it’s a Legacy app (the Layout tab is a new feature, exclusive to our newest apps). **Legacy Mobile** Most apps created before 2023 are Legacy Mobile apps. These apps have an older version of our layout engine and do not have access to some newer features, such as Magic Add (our AI-powered database builder) and Feature Templates (one-click to add entire working features to your app). If you have a Legacy Mobile app, it will continue to function. If you want to receive the latest Adalo updates, copy your Legacy Mobile app as a new Mobile App and make sure you share the same database (your original app will remain unchanged and you can alter the copy). All of your data and screens will continue to function but you may need to adjust your app’s layout as you switch to our newer layout engine. **Legacy Web** Desktop apps created before 2023 are Legacy Web apps. These apps have an older version of our layout engine and do not have access to some newer features, such as Magic Add (our AI-powered database builder) and Feature Templates (one-click to add entire working features to your app). If you have a Legacy Web app, it will continue to function. If you want to receive the latest Adalo updates, copy your Legacy Web app as a new Responsive App and make sure you share the same database (your original app will remain unchanged and you can alter the copy). All of your data and screens will continue to function, but you will likely need to do a good amount of layout work to make sure your app looks good at all three screen sizes in our new layout engine. ## Pages in This Section {% content-ref url="/pages/btZNunAWhCyiOgwi7Pll" %} [Create Component Containers](/design/legacy-builder/create-component-containers) {% endcontent-ref %} {% content-ref url="/pages/FfTXFBhTFaOGtZGbV2eE" %} [Positioning Components](/design/legacy-builder/positioning-components) {% endcontent-ref %} {% content-ref url="/pages/Ent709jFEZYBOiOujjMm" %} [Arranging and Grouping Components](/design/legacy-builder/arranging-and-grouping-components) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/FEyAGPi3oTtSPcpMYdzI" %} [Preview your App (Legacy Builder)](/design/legacy-builder/preview-your-app-legacy-builder) {% endcontent-ref %} ## FAQ
What is the difference between Responsive App Builder and Legacy App Builder? The new Adalo App Builder is a complete rewrite of the Adalo Legacy Builder's codebase. It includes new layout options, screen sizing, component anchoring, new snap grid improvements, and much more - making it possible to build your app once, and publish to native and web at the same time. \ \ Legacy Builder is not designed to respond to screen sizes and typically worked best to create mobile or native apps separately from web apps. Additionally, Legacy apps have no component layout tools, dimished control of publishing, and unimproved snap guides.
Can I transition a Legacy Builder App to a Responsive App? Yes, with some caveats. Please see the guide on [Migrating Legacy Apps to Responsive Apps](/design/migrating-legacy-apps).
# Create Component Containers You can create hidden containers for your components to keep them from moving around or expanding into areas they should not. *Skill Level: Intermediate* ## Before You Begin * Know about [Screens and Components](/component-basics) * Know about how to [arrange and group components](/design/legacy-builder/arranging-and-grouping-components) together * You do not need a paid Adalo plan to use this feature. ## Walkthrough {% tabs %} {% tab title="In-Depth" %} ### How Adalo Renders Screens In order to understand what containers are and why they may sometimes be necessary, it helps to have a good understanding of how Adalo renders the screens in your app. In the background, Adalo uses a method called Flexbox that tries to automatically organize the components on your screens into invisible containers while also making these containers responsive to different screen sizes. If you want to dig into the weeds about how Flexbox works, you can do that [here](https://reactnative.dev/docs/flexbox). When working with individual components and even groups of components, sometimes the auto-generated containers from Adalo have difficulty understanding what you want your app to look like. If you have a complicated screen layout, components can do weird things if the screen size changes or users have larger phone text for example. To help reduce these weird behaviors, we can help guide Adalo a bit by creating containers ourselves using the rectangle component. ### Creating Containers While in most cases containers will not be necessary, creating containers for your components is one of the best methods you can use to make sure your app looks and functions the way you want. Not to mention, laying out screens using containers is a staple in any type of web design. To create containers: **1.)** Click on the big plus sign in the top left corner of the builder. **2.)** In the **Simple** section dropdown, click and drag the **Rectangle** component onto a screen and resize it to fit your liking. ![](/files/PdVcQI3kQDf2dGTC0tkD) **3.)** In the same way, add some text over the top of the new rectangle, ensuring that the text's yellow border is fully inside the rectangle. This will ensure your rectangle acts as a container for the text. Borders that touch (like in the image below) are fine as long as they don't exceed the rectangle border. ![](/files/eVFZQaC49GUUIyhGuH6d) **4.)** If you like, you can [group](/design/legacy-builder/arranging-and-grouping-components) these together to make the container easier to manage, but grouping is not required to maintain the function of the container. **5.)** You can do this with all of your other components as well. You can build whole layouts within containers or even place containers within containers. Here are a few tips for working with them: * Dynamic length items within containers (such as multi-line text) will automatically expand the container downward to accommodate the containers contents. * You can make the containers grey at first so they are easy to see and manipulate, then change the color to your background color or transparent to hide them. * Containers are quite useful when [creating component states](/design/create-component-states), since they adjust their size based on what is visible inside the container. * If you choose to group your container and components, you can also add click [actions](/actions) to the entire group, allowing you to create your own buttons, navigation bars, and menus. ![](/files/tAmR35JwKw9AnFX82GW8) {% endtab %} {% endtabs %} ## Example Want to see the app we used to make this walkthrough? [Click Here](https://previewer.adalo.com/799b32c0-e1e0-4a57-8356-f41ba1cffb54) to use or clone the example app. If you don't know how to clone apps, you can learn to do that[ here](/settings/copying-vs-cloning-your-app/how-to-clone-an-app). ## Learn More * Containers are typically not necessary, but if you experience unexpected behaviors in your app layout, they are a great way to make those components behave. * Thinking of your app layout in terms of sections of content can really help in the design of your app as well. Even if you don't need to use containers, thinking in this way can provide some good cohesion to your app layouts. * You don't always have to hide your containers. Many apps have tiles or banners that they use to contain content in a very stylish, yet functional way. * You can also use containers as spacers between other containers to keep everything nice and neat - like a puzzle that fits together just right! ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Positioning Components Make use of Adalo's snap guides and keyboard shortcuts to place your components exactly where you want them. *Skill Level: Beginner* ## **Before You Begin** * Know about [Screens and Components](/component-basics) * You do not need a paid Adalo plan to use this feature ## Walkthrough {% tabs %} {% tab title="In-Depth" %} ### **Clicking and Dragging** The main method for positioning components in the Adalo Builder is simply by clicking and dragging on the components. In order for a component to be visible, it must be placed on a screen in your app. If you drag a component completely off a screen, it will be deleted, however components can partially hang off the screens in your app if need be. ### **Using Snap Guides** Adalo has some built-in snap guides to help you align your components both on the app screen and with other components. You'll see these guides when you select and drag around a component that has already been added to a screen (you will not see them when adding a component). The guides will appear for a few purposes: #### Denoting centerline of app screen or center of other component ![](/files/sO3ltKtXSWclGg21LNKa) #### Denoting small margin at top, bottom, and sides ![](/files/MCP9vd8oLQBiZ3lJneny) #### Denoting edging alignment with other components ![](/files/GaKE9zIaMcPuq1AiaIc7) #### Denoting alignment with components across screens ![](/files/hTxX816ya3NDzNqAUQA3) ### Movement Shortcuts * When you have a component selected, you can use the **arrow keys** on your keyboard to nudge the component around in the builder. If you need larger nudges, you can hold **Shift** while using the arrow keys. * You can create copies of components by holding **Option** (on Mac) or **Alt** (on PC), then clicking and dragging a component you want to copy. This also works for entire screens so that you can copy whole layouts. * You can copy and paste specific element(s) from screen to screen by selecting the element(s), pressing **Cmd + C** (on Mac) or **Ctrl + C** (on PC) to copy the component, then selecting the new screen's label and pressing **Cmd + V** or **Ctrl + V**. {% endtab %} {% endtabs %} ## Learn More * Sometimes it can be helpful to create temporary shapes or buttons to help you align components on your screens. You can always delete these once everything is aligned properly. * You can also place components in groups and align, copy, or nudge whole groups of components around without changing their layout. * Be sure to check out our dedicated guide for additional [Shortcuts](/how-to/how-to-use-keyboard-shortcuts) * Be sure to check out our dedicated guide for [Screens](/component-basics/inserting-and-editing-screens) * Check out [this wonderful video](https://www.youtube.com/watch?v=oM9NwJLNI4c) from Mitch at PragmaFlow on some tips for placing components. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Arranging and Grouping Components Arrange the layer order of components and place them in groups to better control their layout and function. *Skill Level: Beginner* ## Before You Begin * Know about [Screens and Components](/component-basics) * Know about [Positioning Components](/design/legacy-builder/positioning-components) on screens * You do not need a paid Adalo plan to use this feature ## Walkthrough {% tabs %} {% tab title="In-Depth" %} ### Arranging Components When you initially place a component on a screen, the component is placed "on top" of all the other existing components. You can think of components as layers on a sandwich, with each component able to be moved up or down in the stack of components on screen. You can arrange components through several methods. It's easy to arrange components: **1.)** Select a component, then click on the More button in the top right of the component's settings **2.)** Hover over the **Arrange** option and a menu will flyout showing 4 different options: * **Bring to Front** - This option brings a component all the way to the front/top of the components regardless of how many components are on screen. * **Send to Back** - This option sends a component all the way to the back/bottom of the components regardless of how many components are on screen. * **Bring Forward** - This option brings a component forward/up in the component stack one component at a time, like the rungs of a ladder. * **Send Backward** - This option send a component backward/down in the component stack one component at a time, like the rungs of a ladder. ![](/files/BJCvTcBQ7dsacj53zPht) **3.)** Another way to arrange components is by selecting the entire screen by clicking its label, then clicking and dragging the components up or down in the left menu hierarchy. Components near the top of the list are at the front/top of the components on screen. ![](/files/BzCGtxULOXLoy8SABbrv) **4.)** Still another way to arrange components one layer at a time is to hold Command (Mac) or Control (PC) and press the up and down arrow keys to move the component forward and backward on the screen. ### ### Grouping Components Sometimes it makes sense to group components together to maintain their layout, lock their position on screen, or apply visibility rules and actions to whole groups of components. Sometimes grouping components together can also prevent them from moving around or expanding into areas they shouldn't, particularly when [using rectangles as "containers" ](/design/legacy-builder/create-component-containers)within groups. To group components: **1.)** Select multiple components by either clicking and dragging a square around them, or by holding the **Shift** key and clicking on the components you want to group. **2.)** Once you have the components selected, click on the **Make Group** button in the group settings on the left. You can also do this by holding Command (Mac) or Control (PC) and pressing the **G** key. ![](/files/R69Exkt6WFZyPKLN31Jb) **3.)** To ungroup components, simply select the group, click on the **More** button in the top of the group settings on the left, then choose **Ungroup**. You can also use Command (Mac) or Control (PC) + **G** to ungroup as well. ![](/files/viZ25ndgOySXmxxvAKid) {% endtab %} {% endtabs %} ## Learn More * You can also make single components a group. * You can fix a group of components to either the top or bottom of the screen in the **Edit Styles** menu of the group settings. * Arranging groups of components to the front and then fixing them in place is a great way to create your own custom navigation bars and menus. * You can also arrange groups and add or remove components from them using the component hierarchy when an entire screen is selected. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Preview your App (Legacy Builder) *Skill Level: Beginner* ## Before You Begin * Ensure you have started building your app or created an app from a template in Adalo. ## Walkthrough 1. Select the ***Preview*** button in the top Left corner of your Builder.
2. This will load a new screen showing the Desktop version of the app. 3. If you wish to share the app with Users, you will need to [publish a web version](/publishing-apps/publishing-to-the-web-legacy) of your app and then you can share using the Domain the app is set on or by clicking the ***Share*** button in the top Left corner of your Builder. ## # Actions All about Actions! {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/-Li8y\_MMJryl5m2mZk1S" %} [Action Basics](/actions/action-basics) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/-Li93wUwHJ5Gds7zqn\_9" %} [Links](/actions/links) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/YOwGJaWYy9L1o6XBhAD8" %} [Share Action](/actions/share-action) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/-Li945m8V1x0bKMv1vz5" %} [Change Data](/actions/creating-an-action-that-triggers-data-edit) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/luyOVpregQ2pABNv6MEw" %} [Notifications](/actions/notifications) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/-M4tJ5hoxzeVQVTEvYgv" %} [Conditional Actions](/actions/conditional-actions) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/B6Kv0IU8xLqYchENymXg" %} [App Authentication](/actions/app-authentication) {% endcontent-ref %} # Action Basics Information about Actions in Adalo ## Quickly Learn about Actions in Adalo This video covers the basics of Actions in Adalo. Learn how actions move users between screens, interact with the database, and add interactivity to your app. {% embed url="" %} Watch a quick overview of Actions in this short YouTube tutorial. {% endembed %} ## Actions Actions define what happens when a user interacts with a component. If components are the nouns of your app, actions are the verbs. They let users navigate between screens, submit data, trigger notifications, and more. You add actions to components like buttons, icons, list items, and images. A single component can have multiple actions that run in sequence. *** ### Link Navigate the user to another screen or open an external URL. * **Existing Screen** - link to any screen in your app * **New Screen** - create a new screen and link to it in one step * **Back** - return the user to whatever screen they came from * **External Link** - open a website, email, phone number, or messaging app (listed as "Website..." in the menu) [**Learn more about link actions →**](/actions/links) *** ### Change Data Create, update, or delete records in your database collections. * **Create** - add a new record to a collection * **Update** - edit an existing record * **Delete** - remove an existing record [**Learn more about change data actions →**](#change-data) *** ### Notifications Send and manage push notifications from your app. * [**Trigger Notification**](/actions/notifications/trigger-push-notifications) - send a push notification immediately * [**Schedule Notification**](/actions/notifications/scheduled-notifications) - send a push notification at a future date and time * [**Request Permission**](/actions/permissions#request-notification-permissions) - prompt the user to allow push notifications [**Learn more about notification actions →**](/actions/notifications) *** ### Location * [**Request Permission**](/actions/permissions#request-location-permissions) - prompt the user to allow location access Requires a Google API key to be configured in your app settings. [**Learn more about location permissions →**](/actions/permissions#request-location-permissions) *** ### Custom Actions Connect your app to external services using custom API integrations. * **Custom Action** - call an external API you've configured * **New Integration** - connect to popular services like Gmail, SendGrid, Google Sheets, Twilio, Mailchimp, Slack, and Google Drive through Zapier [**Learn more about custom actions →**](/integrations/custom-actions) *** ### More Actions These actions are found under the **More...** submenu in the action menu. * [**Share**](/actions/share-action) - open the device's share sheet so the user can send content, like text, images, or files, to any app on their device * [**Deep Linking Share**](/component-basics/inserting-and-editing-screens/deep-linking/deep-linking-share-action) - share a direct link to a specific screen in your app * [**Change Input Value**](#change-data) - set or update the value of a Text Input or other input component on the current screen [**Learn more about share actions →**](/actions/share-action) *** #### User Login Also found under **More...**, the User Login submenu contains authentication actions. * **Sign Up** - create a new user account and log them in * **Log In** - log an existing user into the app * **Log Out** - log the current user out * **Forgot Password** - send a password reset email to the user ***User login sessions expire after 20 days. This is the default and cannot be changed.*** *** ### Conditional Actions Any action can be made conditional so it only runs when certain criteria are met. This lets you create logic like "only delete this record if the user is the owner" or "only navigate to the next screen if all required fields are filled in." [**Learn more about conditional actions →**](#conditional-actions) # Links Want to make screen navigation easy and intuitive? Check out our linking guide below. Link actions let you connect screens together and open external content from your app. When you add a Link action to a component (like a button, list item, or icon), you choose where the user goes when they tap it. ![](/files/-Lij9e08DTamV4lw5A1C) *** ### Types of Links * **Existing Screen** * Link to any existing screen in your app. This is the most common link type. Use it to connect your navigation, like linking a list item to a detail screen or a button to a settings page. * **New Screen** * Link to a screen that doesn't exist yet. Select "New Screen..." from the Link action menu, name the screen, and pick a template. The link action automatically connects to your new screen once it's created. * **Back** * A special link that returns the user to whatever screen they came from. This is most commonly used with a back arrow icon in an app bar. * Back links are especially useful when a screen can be reached from multiple places in your app, since the link always returns the user to the correct previous screen. The transition animation automatically reverses whatever transition brought the user to the current screen. * [**Website (External Links)**](/actions/links/share-via-external-links) * Opens a URL outside your app. This includes: * **Websites** -- opens in a new browser tab (or in-app browser on mobile) * **Email** -- use a `mailto:` URL to open the user's email app * **Phone** -- use a `tel:` URL to open the phone dialer * **Text message** -- use an `sms:` URL to open the messaging app * **Messaging apps** -- use platform URLs to open WhatsApp, Telegram, and others * External links support Magic Text, so you can build dynamic URLs using data from your app. [**Learn more about External Links →**](/actions/links/share-via-external-links) [**Learn more about Special Links →**](/how-to/special-links-email-text-sms-and-phone) *** ![](/files/-Lij9l340_29PG7bbXZ6) ### Transitions With Link Actions, you can also specify the type of transition the user sees when the move from one page to the next. For example, the screen could slide to the left or come up from the bottom. By default the transition will be set to push, which is the most commonly used. If you are linking to a [Modal](/how-to/how-to-create-a-modal-popup-window), you should select the transition type of -- you guessed it -- Modal. ![](/files/0kHWmIvbzIPcm4UQBrDk) # Share via External Links You can let users send a pre-filled message directly from your Adalo app to WhatsApp, Telegram, Google Messages (SMS), or Email using a Text Input, a Button, and a Website External Link action. Each platform supports a URL scheme that opens the app and pre-fills a message. You can use [**MagicText** ](/component-basics/inserting-dynamic-text)to dynamically populate that message with content from your app. *** ### Video Walkthrough {% embed url="" %} *** ### Share to WhatsApp #### How It Works **Base URL format:** ``` https://wa.me/?text=YOUR_MESSAGE_HERE ``` To send to a specific phone number, include it after `wa.me/`: ``` https://wa.me/15551234567?text=YOUR_MESSAGE_HERE ``` Phone numbers must be in full international format with no spaces, dashes, or parentheses (e.g., `15551234567` for a US number). For more details on the URL scheme, see the [WhatsApp FAQ](https://faq.whatsapp.com/5913398998672934). #### Setup Steps 1. **Add a Text Input** -- This is where the user will type the message they want to send. 2. **Add a Button** to the same screen. 3. **Add an External Link Action** to the button: * Open **Add Action** and choose **External Link**. * **Enable "Use System Browser"** so the link opens directly in WhatsApp rather than Adalo's in-app browser. * In the URL field, use Magic Text to pull in the Text Input value: ``` https://wa.me/?text=[Text Input Value] ``` * To pre-set a recipient: ``` https://wa.me/PHONENUMBER?text=[Text Input Value] ``` 4. **Preview and Test** -- Tapping the button should open WhatsApp with your message pre-filled. #### Notes * WhatsApp must be installed on the user's device. * **Important:** Enable "Use System Browser" in the External Link action. Without it, Adalo opens `https://` links in an in-app browser, which may not hand off to WhatsApp correctly. * Adalo only encodes spaces in your URL. Avoid special characters like `&`, `#`, and `+` in your message text, as they can break the URL. * Sending to a specific number is not covered in the video above, but follows the same steps with the number added to the URL as shown. *** ### Share to Telegram #### How It Works **To share a message with a URL:** ``` https://t.me/share/url?url=YOUR_URL_HERE&text=YOUR_MESSAGE_HERE ``` **To send directly to a specific Telegram user (by username):** ``` https://t.me/USERNAME?text=YOUR_MESSAGE_HERE ``` **To share a text message without a URL:** ``` https://t.me/share/url?url=&text=YOUR_MESSAGE_HERE ``` For more details, see the [Telegram Sharing Documentation](https://core.telegram.org/widgets/share). #### Setup Steps 1. **Add a Text Input** -- This is where the user will type the message they want to share. 2. **Add a Button** to the same screen. Label it something like "Share on Telegram." 3. **Add an External Link Action** to the button: * Open **Add Action** and choose **External Link**. * **Enable "Use System Browser"** so the link opens directly in Telegram rather than Adalo's in-app browser. * In the URL field, use Magic Text based on what you want to share: **Text message only:** ``` https://t.me/share/url?url=&text=[Text Input Value] ``` **Link from your database with a message:** ``` https://t.me/share/url?url=[Your Link Property]&text=[Text Input Value] ``` **Directly to a known Telegram username:** ``` https://t.me/USERNAME?text=[Text Input Value] ``` 4. **Preview and Test** -- Tapping the button should open Telegram with the message or link pre-filled. #### Notes * **Important:** Enable **"Use System Browser"** in the External Link action. Without it, Adalo opens `https://` links in an in-app browser, which may not redirect to the Telegram app properly. * If Telegram is not installed, the link opens Telegram Web in the browser instead. * Telegram uses usernames (e.g., `@johndoe`) rather than phone numbers for direct messaging via URL. *** ### Share to Google Messages (SMS) #### How It Works **Base URL format (no recipient):** ``` sms:?body=YOUR_MESSAGE_HERE ``` **To send to a specific phone number:** ``` sms:15551234567?body=YOUR_MESSAGE_HERE ``` This works across both Android and iOS. On Android it typically opens Google Messages; on iOS it opens Apple Messages. #### Setup Steps 1. **Add a Text Input** -- This is where the user will type the message they want to send. 2. **Add a Button** to the same screen. Label it something like "Send as Text" or "Share via SMS." 3. **Add an External Link Action** to the button: * Open **Add Action** and choose **External Link**. * In the URL field, use Magic Text to pull in the Text Input value: ``` sms:?body=[Text Input Value] ``` * To pre-set a recipient phone number: ``` sms:15551234567?body=[Text Input Value] ``` * To pull the phone number dynamically from your database: ``` sms:[Recipient Phone Number]?body=[Text Input Value] ``` 4. **Preview and Test** -- Tapping the button should open the device's default messaging app with the message pre-filled. #### Notes * The `sms:` scheme opens whichever messaging app is set as default on the user's device. * Phone numbers should be in full format with no spaces, dashes, or parentheses. * Adalo does not apply any URL encoding to `sms:` links. Avoid special characters like `&` and `#` in your message text, as they can break the URL. * This works reliably in Adalo's mobile previewer and in published apps. It may not work in desktop web preview since desktop browsers don't have a default SMS app. *** ### Share via Email #### How It Works **Base URL format:** ``` mailto:?subject=YOUR_SUBJECT&body=YOUR_MESSAGE_HERE ``` **To send to a specific email address:** ``` mailto:someone@example.com?subject=YOUR_SUBJECT&body=YOUR_MESSAGE_HERE ``` #### Setup Steps 1. **Add Text Inputs** -- One for the subject line and one for the message body. You can also hardcode the subject using static text. 2. **Add a Button** to the same screen. Label it something like "Share via Email." 3. **Add an External Link Action** to the button: * Open **Add Action** and choose **External Link**. * In the URL field, use Magic Text: ``` mailto:?subject=[Subject Input Value]&body=[Message Input Value] ``` * To pre-set a recipient: ``` mailto:someone@example.com?subject=[Subject Input Value]&body=[Message Input Value] ``` 4. **Preview and Test** -- Tapping the button should open the user's default email app with the fields pre-filled. #### Notes * On Android, this typically opens Gmail. On iOS, it opens Apple Mail (or whichever email app the user has set as default). * You can add multiple recipients: `mailto:one@example.com,two@example.com` * CC and BCC are supported: `mailto:?cc=someone@example.com&bcc=another@example.com&subject=Hi&body=Hello` * Adalo does not apply any URL encoding to `mailto:` links. Avoid special characters like `&` and `#` in your subject or body text, as they can break the URL. *** ### Quick Reference | Platform | URL Format | App Required? | | ------------------ | --------------------------------------------- | ---------------------- | | WhatsApp | `https://wa.me/?text=MESSAGE` | Yes | | WhatsApp (to #) | `https://wa.me/PHONE?text=MESSAGE` | Yes | | Telegram | `https://t.me/share/url?url=URL&text=MESSAGE` | No (falls back to web) | | Telegram (to @) | `https://t.me/USERNAME?text=MESSAGE` | No (falls back to web) | | SMS | `sms:?body=MESSAGE` | No (built-in) | | SMS (to #) | `sms:PHONE?body=MESSAGE` | No (built-in) | | Email | `mailto:?subject=SUBJECT&body=MESSAGE` | No (built-in) | | Email (to address) | `mailto:EMAIL?subject=SUBJECT&body=MESSAGE` | No (built-in) | *** ### Tips for All Platforms * **Enable "Use System Browser" for WhatsApp and Telegram.** Adalo opens `https://` links in an in-app browser by default, which can prevent the link from handing off to the native app. This setting is not needed for `sms:` or `mailto:` links -- those always go straight to the OS. * **URL encoding:** Adalo's encoding is minimal -- it only converts spaces to `%20` for `https://` links, and applies no encoding at all for `sms:` and `mailto:` links. Avoid special characters like `&`, `#`, and `+` in your message text. Keep messages to plain text for the most reliable results. * **Web preview limitations:** `sms:` and `mailto:` links may not work as expected in desktop web preview. WhatsApp and Telegram links will navigate away from the page rather than opening in a new tab. Use Adalo's mobile previewer or a published app for accurate testing. * **Magic Text:** You can pull in any data from your app's database using Magic Text -- user names, listing titles, prices, links, etc. This lets you create dynamic share messages like "Check out \[Product Name] for \[Price]!" * **Multiple share options:** Consider adding a row of buttons (one per platform) so users can choose how they want to share. Each button uses the same Text Input but with a different External Link URL. * **Dynamic phone numbers:** If your app stores user phone numbers in a collection, you can use Magic Text to pull them into the WhatsApp or SMS URL instead of hardcoding a number. # Share Action The Share action opens the device's built-in share sheet, letting users share content from your app to any app on their device: text messages, email, social media, notes, and more. Unlike an [**External Link**](/actions/links/share-via-external-links) (which opens a specific URL), the **Share** action lets the user choose where to send the content. *** ### What You Can Share You can share one piece of content at a time: * **Text** - a name, description, message, or any text value from your database * **Image** - a photo or image stored in your app * **File** - a PDF or other document stored in your app * **Number** - a price, score, or other numeric value * **Date** - a date value from your database To share a URL, store it as a text property in your database and select that as the source. *** ### How to Set It Up 1. Select the component you want to trigger the share (e.g., a button or icon). 2. Open **Add Action**. 3. Choose **More...**, then select **Share**. 4. In the **Source** field, pick the data you want to share. This dropdown shows all available properties from your screen's data: text fields, images, files, etc. That's it. The Source field is the only setting. When a user taps the component, the share sheet opens with that content ready to send. *** ### Example Use Case Say you're building a recipe app. Each recipe has a name, a description, and a photo. * Add a share icon to your recipe detail screen. * Set the Share action's source to the recipe's **description** field. * When a user taps the icon, the share sheet opens and they can send the recipe description to a friend via text, email, AirDrop, or any other app on their device. To share the recipe photo instead, just change the source to the **image** field. The share sheet will let the user send the image directly. *** ### Notes * The share sheet is controlled by the device's operating system, **not Adalo**. The options a user sees depend on what apps they have installed. * You can only share one source per Share action. To let users share both text and an image, use two separate Share actions on different buttons. * Supported image formats: PNG, JPG, and GIF. Supported file format: PDF. * **On web, sharing uses the browser's built-in share feature. Some desktop browsers do not support this and will show an alert.** # Change Data Actions can be used to alter your app's database— either by creating, updating, or deleting records. ### Create Action Most of the time, when you want users to create new records in your database, you will take them to a screen with a [Form](/component-basics/forms-and-fields/how-to-create-and-edit-forms-and-fields) where they can fill out information about the record they are creating. However, sometimes you might want the user to click a button that automatically creates the new record without the user having to fill out a form. In the example below, a user is viewing details about a Trip they are planning and the app let's them add new Days to their Trip. Every time the user clicks the "+ DAY" button, another day is automatically added to their trip ![](/files/-LmjsybDtIRVfIqgUwzr) To configure your Create Action 1. Select the collection from your database that the Create Action will add a new record to 2. You will then be able to specify how all of the properties for the new record should be created. You can use an combination of Text, Magic Text, Numbers, and even Formulas for most properties. For relationships, you can select what they new record should be related to. In this example, we've specified that the new Day record should be related to the Current Trip the user is viewing. ### Update Action As with creating new records, updating a record is often done with a [Form](/component-basics/forms-and-fields/how-to-create-and-edit-forms-and-fields). However, there are times when you want the press of a button to automatically change the property on of a record, without the users having to manually make the changes in a form. In the example below, clicking a "Publish" button triggers an Update Action that automatically changes the current Trip's "Is Published" property from False to True. ![](/files/-LinUuG9bSG5oB_Zf3JG) To configure your Update Action 1. Select the available record that the Update Action will affect. 2. You will then be able to specify how all of the properties for that record should be changed. You can use an combination of Text, Magic Text, Numbers, and even Formulas for most properties. For relationships, you can select what they new record should be related to. 3. For properties that you don't want to change, you can simply leave them set as "No Change" ### Delete Action Delete actions are used to delete records from your database (no surprise there). They can be added to any kind of button as well as icons that are part other components like App Bars and Lists. ![](/files/-LjHR5aN3KpAGOFYvXhe) To configure your Delete Action, simply choose which record to delete. If the Delete Action is deleting an item inside of a List component, that row will be automatically removed from the list as soon as the user click the icon that you added the Delete Action to. # Notifications Send notifications to users using the Trigger Notification Action in your Adalo app! Adalo natively supports Triggering Notifications to Logged in Users on iOS, Android, and Web apps through the ***Trigger Notification*** Action in the Builder. If you are looking to send ***Push Notifications*** using Adalo's API, see [this article](/integrations/the-adalo-api/push-notifications) instead. ### Requirements * User must be logged into device and have been active in the last 2 weeks. * User must have accepted notification permissions for the app on the device. * User receiving the notification cannot be the one triggering the notification. {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/AddwVnN4ooj5gBgY9TV7" %} [Request Notification Permission in Your App](/actions/notifications/request-notification-permission-in-your-app) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/-LijAGGk5QG5-VXVTqdO" %} [Trigger Push Notifications](/actions/notifications/trigger-push-notifications) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/Zd3RBg6Z1Zi2kaqBDAfx" %} [Testing Notifications](/actions/notifications/testing-notifications) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/tdz6qOeHAA39FnQtYgHH" %} [Troubleshooting Notifications](/actions/notifications/troubleshooting-notifications) {% endcontent-ref %} # Request Notification Permission in Your App Permissions setup for each app type. Each app type has different permission requirements to ensure your users receive notifications on their device. Please follow the steps below to ensure your permissions are allowed for each app type that your users will be receiving notifications. *** *Skill Level: Intermediate* #### Notification Permission Action should always be added on or after the Home Screen of the app. This ensures that Users are prompted in the event they log in on a new device or in on a new browser. ### Notification Permission Action 1. The Notification Permission Action is Found in the Actions Menu on any screen and is available on most components as a Click Action. ![](/files/WorYgtYdC5ug6y2ODoQW)
2. Recently created apps will have this set as a Screen Action on home screen by default and will work for most iOS and Android Native Apps. PWA has additional setup requirements listed below. ### iOS Notification Permission Requirements 1. Apple requires Users to allow notification permissions within each app. * If using the Home Screen Action, the first time your users go to your app's home screen, they will be automatically prompted to grant your app permission to send them Push Notifications. They will not see this prompt any subsequent times they visit your app's home screen. 2. If a User denies permission, they need to go into the settings for the app and allow notifications as they may not be prompted again. ### Android Notification Permission 1. In Android 12 and below the Notifications are automatically allowed once the app is downloaded. ***There will not be a pop-up requesting permission.*** 2. In Android 13 or newer, users will be prompted to allow notifications on their app with a pop-up. * If using the Home Screen Action, the first time your users go to your app's home screen, they will be automatically prompted to grant your app permission to send them Push Notifications. They will not see this prompt any subsequent times they visit your app's home screen. 3. If a User denies permission, they need to go into the settings for the app and allow notifications as they may not be prompted again. ### PWA Notification Permission 1. Browsers used for installed PWAs ***block screen actions requesting notification permissions*** meaning the action needs to be connected to a click action. * Below shows how this could look in the Setup Flow for your Users as an approval screen where the Request Notification Permission would be on the 'Allow Notifications' Button.
* If a User denies permission, they need to go into the settings for the browser and allow notifications as they may not be prompted again. ### Next steps * Now you are ready to [Trigger Notifications](/actions/notifications/trigger-push-notifications) within your Adalo App! * If you want to send Push Notifications using the Adalo API, head over to [this guide](/integrations/the-adalo-api/push-notifications)! # Trigger Push Notifications This action lets your app send native iOS, Android, and Web push notifications to users. *** *Skill Level: Intermediate* ## Before You Begin Notifications require that your app is installed on Native iOS, Android, or as a PWA. * Notifications can only be triggered to another logged-in user, on another device. * *ex: The Logged-in User triggering the notification will not be able to receive the notification they triggered within the app.* * Notifications only work when a user is logged in. * *ex: Any button or action that sends a notification works only if a user is logged in. Without a logged-in user, Adalo cannot create the required token, so the notification will not be sent.* * The app must have the [Request Notification Permission](/actions/notifications/request-notification-permission-in-your-app) set up. Please ensure this is set up correctly before continuing. * Target Screen is only available on Native iOS and Android. PWA will always direct to the Apps Home Navigation Screen. *** ### Add Notification Action * Select the component that should trigger the notification, then in the left panel select 'Add Action'. * Scroll to the bottom of the options, and click Trigger Notification.
### Select Users to receive notification All Users will get the notification unless filtered by available data such as Current User or by a Relationship to the User. * **Current User - Send a message to a single user using Available Screen Data** * Uses include sending a notification to a single user such as a 'New Follower' notification or 'Friend Request' when **Current User** Data is available.
* **One User - Send a message to a single User through Filter** * Used similarly to "Current User" but when filtering through other available data such as a relation to a User. Example of this may be a Marketplace Listing sale or an Admin approval request.
* **Multiple Users - All Users or Users who meet criteria** * Used when wanting to send to all users or a specific group of users filtered through a rerelationship. Examples would include a Notification to multiple users about an event they are attending or a new message in a group chat.
* This is also where you exclude the Logged in User from your notifications if sending to multiple Users.
{% hint style="info" %} * Notifications will only be sent if; 1. The user has the app installed on their device. 2. The user is logged in. 3. The user has had activity in the app in the last 2 weeks to be considered active. 4. The user has permissions allowed. 5. The user is not the user triggering the notification. {% endhint %} ### Enter Notification Details * Set the title and body text for the Notification message. * If using information from an Input, we recommend creating a Message or Notification Record in your Collections before using that information to fill in the Notification details. {% hint style="warning" %} **Warning:** If the body of the Trigger Notification action is left empty, **the notification will fail on Android and Web.** Always make sure the body field is filled in to ensure notifications are delivered across all platforms. {% endhint %} * Select which screen in your app the user should be taken to when the tap on the notification on Native iOS and Android builds. * You **must** select a Screen for notification to be triggered.
{% hint style="warning" %} **PWA will always direct to the Apps Home Navigation Screen regardless of the Target Screen selected.** {% endhint %} ### Next Steps Now you are ready to test your notifications! # Scheduled Notifications Allow your app to send a push messages to users at a future date and time, even if the app is not open. This guide covers how to set up scheduled push notifications for your app. Scheduled notifications allow you to send notifications at a future date and time, rather than immediately. Common use cases include appointment reminders, event countdowns, task deadlines, booking confirmations, and more. *** *Skill Level: Advanced* ### **Before You Begin** * Have a good understanding of creating Collections and setting up database relationships. * The user must have the app installed on Native iOS, Android, or as a PWA. * You must have [***Notification Permissions***](/actions/notifications/request-notification-permission-in-your-app) configured within your Adalo App. * Sending notifications of any type requires a logged-in user flow. * The Adalo Previewer will not receive scheduled notifications. * The user must have been active in the app within the last 2 weeks to receive the notification. * Unlike [**Trigger Notifications**](/actions/notifications/trigger-push-notifications), Scheduled notifications can be reeived by the person who created them. {% embed url="" %} ### Common Scheduled Notification Use Cases Before diving into setup, here are examples of how scheduled notifications work across different app types: **Appointment/Event Reminders** * Coach booking app: Send reminders 3 days before, 1 day before, or 1 hour before an appointment * Restaurant reservation app: Remind users of their reservation 24 hours in advance * Medical clinic: Send appointment confirmations and reminders at various intervals **Task Management** * Task app: Send a reminder on the due date of a task * Project management: Send deadline warnings 3 days before deadline, then 1 day before **E-commerce & Bookings** * Order confirmation: Send automatic confirmation when order is placed, with follow-up reminders * Travel booking: Send reminders the day before flight, day before hotel check-in * Marketplace: Notify seller of pending shipment deadlines **Event Countdowns** * Special event app: Send daily countdown starting 1 week before event ("6 days to go", "5 days to go", etc.) * Course/Class: Send reminder series (1 week before class, 3 days before, 1 day before, 1 hour before) **Subscriptions & Recurring** * Subscription app: Send renewal reminders before payment is due * Recurring booking: Send reminders for regular appointments (weekly therapy, monthly salon visit) ### Best Practices * **Always use "No Formatting" for dates** – This is the #1 cause of scheduling issues. Always scroll to the bottom of the date format dropdown. * **Provide users with a way to cancel or reschedule notifications** * **Avoid scheduling large volumes of notifications at the exact same time** * **Store Job ID immediately** – You need it for future management. Capture right after scheduling. * **Use date math with negative values** – For notifications before an event: * `-1` = 1 day * `-3` = 3 days * `-7` = 1 week * **Include relevant context in messages** – Tell users what they're being reminded about and when. Include names, dates, times, etc. * **Test before launching** – Verify notifications work with real data before rolling out to users. * **Consider timezone implications** – If your app serves multiple regions, test how timezone differences affect scheduling. * **Make notifications optional** – Let users control when/if they receive notifications. Don't force them. * **Choose meaningful defaults** – If you auto-create notifications, pick timing that makes sense for your app. *** ### Learn More * [Push Notifications](/integrations/the-adalo-api/push-notifications) * [Trigger Notifications in your Adalo App](/actions/notifications/trigger-push-notifications) ### Help If you need additional help with this article, ask in the [Adalo Community Forum](https://forum.adalo.com/). Include a link to this article so others can reference the same setup. # Scheduled Notification Database Setup To schedule notifications, create a collection to track all scheduled notifications. This stores reminder details, timing, and the Job IDs needed to manage them. ### Example Database Structure Create a new collection with these core properties: | Property Name | Property Type | Purpose | | ------------------- | ------------- | -------------------------------------------------------------------------------- | | Name | Text | Title/description of the notification (e.g., "Appointment Reminder", "Task Due") | | Start Date | Date and Time | When the notification will be sent | | Related Record | Relationship | Links to the main record this notification is for | | User | Relationship | The user who will receive the notification | | Notification Job ID | Text | Unique ID from Adalo (required for managing notifications) | **Optional properties:** Body, Title, Message, Frequency, Draft toggle, Type **Key relationships:** * **Many Notifications to One Main Record** (e.g., Many Reminders to One Appointment) * **Many Notifications to One User** # Create Scheduled Notification on Trigger When something important happens in your app (user books, creates, purchases, etc.), automatically create and schedule a notification. This provides seamless reminders without requiring extra user act *** ### Before You Begin * Map out the User flow to ensure data is available * Set up a Collection to track scheduled notifications *** #### The Three-Action Pattern Most scheduled notifications follow the same basic pattern: 1. **Create Notification Record** – Store the notification in your Adalo Collectionn. 2. **Schedule the Notification** – Tell Adalo when to send it and at what frequency. 3. **Update newly created Notification Record to store the Job ID** – Save the notification's Job ID for future management. *** #### Create the Notification Record Add a **Create** action that creates a new record in your Notifications collection. **Field values:** * **Name:** Reference the main record's name * **Start Date:** The trigger date minus how many days/hours before you want the notification. * Use negative numbers: `-1` = 1 day before, `-3` = 3 days before, `-7` = 1 week before * **Related Appointment:** Link to the current record * **User:** Who should receive it * Or reference a related user if applicable * **Notification Job ID:** Leave blank (you'll fill this in Step 3)
#### Schedule the Notification Immediately after creating the record, add a **Schedule Notification** action.
#### **Notification set up:** * **Recipient:** The user who should receive it (usually the same user from Step 1) * **Title:** What the notification is about * **Body:** The message the user sees * Include relevant details: what it's about, who it involves, timing context, etc. {% hint style="danger" %} **Warning:** If the body of the Notification action is left empty, **the notification will fail on Android and Web.** Always make sure the body field is filled in to ensure notifications are delivered across all platforms. {% endhint %} * **Scheduling Date:** Use the date from the New Record created in Step 1
{% hint style="warning" %} **Date Format:** ⚠️ **CRITICAL** You must change the date format: 1. Click the date format field (defaults to "relative") 2. Scroll to the bottom of the dropdown 3. Select **"No Formatting"** This converts to the Unix timestamp Adalo requires. {% endhint %} * **Repeat Type: *****None*** if only sending 1 notification * **Target Screen:** Link to a relevant screen in your app. #### Update Notification Record to Store the Job ID Add an **Update** action immediately after scheduling. Update the notification record you just created:
**Why this matters:** The Job ID is Adalo's unique identifier for this scheduled notification. You need it later to cancel or modify the notification. It's only available right after scheduling, so capture it now. #### Complete Action Sequence Your trigger button/action should execute in this order: 1. **Original actions** (create appointment, mark as booked, etc.) 2. **Create Notification Record** ← New 3. **Schedule Notification** ← New 4. **Update Notification Record with Job ID** ← New 5. **Additional actions** (Link, etc..) # Set Up Recurring Notifications For some use cases, you want a notification to repeat multiple times. ### Before You Begin * Map out the User flow to ensure data is available * Set up a Collection to track scheduled notifications *** #### Examples of Recurring Notifications * **Daily countdown:** Starting 1 week before event, send daily ("6 days away", "5 days away", etc.) * **Reminder series:** 1 week before, 3 days before, 1 day before, on the day * **Regular bookings:** Weekly reminders for recurring appointments * **Subscription alerts:** Daily reminders starting 1 week before renewal *** #### Create the Notification Record Add a **Create** action that creates a new record in your Notifications Collection. **Field values:** * **Name:** Reference the main record's name * **Start Date:** The trigger date minus how many days/hours before you want the notification. * Use negative numbers: `-14` = 2 weeks before, `-28` = 4 weeks before, `-7` = 1 week before * **Related Appointment:** Link to the current record * **User:** Who should receive it * Or reference a related user if applicable * **Notification Job ID:** Leave blank (you'll fill this in Step 3)
#### **Schedule Notification set up:** * **Recipient:** The user who should receive it (usually the same user from Step 1) * **Title:** What the notification is about * **Body:** The message the user sees * Include relevant details: what it's about, who it involves, timing context, etc. * **Scheduling Date:** Use the date from the New Record created in Step 1
{% hint style="warning" %} **Date Format:** ⚠️ **CRITICAL** You must change the date format: 1. Click the date format field (defaults to "relative") 2. Scroll to the bottom of the dropdown 3. Select **"No Formatting"** This converts to the Unix timestamp Adalo requires. {% endhint %} * **Repeat Type:** * Choose one: * **Minute -** Send each minute * **Daily** – Send every day * **Weekly** – Send every week * **Monthly** – Send every 30 days * **Stopping Criteria:** * **End Date Reached:** Will stop after selected date * **End Date:** Date selected from Magictext will allow Notifications to automatically stop on the record's date (appointment day, due date, event date, etc.) * **After number of times:** Will stop after number of notifications sent. * **Number of times:** Integer * **Target Screen:** Link to a relevant screen in your app.
#### Update Notification Record to Store the Job ID Add an **Update** action immediately after scheduling. Update the notification record you just created:
**Why this matters:** The Job ID is Adalo's unique identifier for this scheduled notification. You need it later to cancel or modify the notification. It's only available right after scheduling, so capture it now. # Testing Scheduled Notifications #### Test the Complete Flow 1. Perform the trigger action (book appointment, create task, place order) 2. Check your database to verify: * Notification record was created * Start Date is correct * Notification Job ID is populated 3. If you added a user-facing notification list, verify the notification appears 4. Test adding additional notifications if applicable #### Test Actual Notification Delivery To verify notifications actually send at the scheduled time: 1. Create a test record with a notification scheduled for 1-2 minutes from now 2. Wait for the scheduled time 3. On a native device or PWA, verify you receive the notification 4. Tap the notification and verify it takes you to the correct screen # Manage Scheduled Notifications This guide covers how to let users view and cancel recurring notifications. You'll create interfaces where users can manage all their scheduled notifications and delete ones they no longer need. *** *Skill Level: Intermediate* ### Before You Begin Before setting up notification management, you should have already: * Created and scheduled notifications * Store the Notification Job ID in your Adalo Database * Set up notification permissions *** ## Display Notifications to Users Users need to see what notifications are scheduled for their records. #### Add a Notifications List In your app, add a list component that shows all notifications and filter to show only notifications for the current related record or user.
#### Make Notifications Actionable Make the list items tappable so users can click a notification to see details and manage it. *** ### Create a Notification Details Screen When a user taps a notification, navigate them to a details screen where they can see more information and manage it. #### Design the Details Screen Create a simple screen with: * **Back button** for navigation * **Notification information** (what it's about, when it will send) * **Action buttons** (cancel notification, reschedule, etc.) #### Display Notification Details Show the scheduled date and time clearly so users know exactly when the notification will arrive:
## Cancel Notifications Users should be able to cancel notifications they no longer want. #### The Two-Action Cancellation Pattern {% hint style="warning" %} **Action order is critical.** You must cancel the notification ***BEFORE*** deleting the record. If you delete first, the Job ID becomes inaccessible and you can't cancel the notification. {% endhint %} #### Cancel the Scheduled Notification Add a **Cancel Scheduled Notification** action: * **Notification ID:** Current Notification > Notification Job ID
This removes the notification from Adalo's queue so it won't be sent. #### Delete the Notification Record Add a **Delete** action immediately after: * **Record:** Current Notification
* This removes the notification from your database so it no longer appears in lists. **Why delete the record?** If you only cancel the notification but leave the record, users will still see it in their notification list, which is confusing. ### Best Practices for Managing Notifications * **Always cancel before deleting** – This is critical. Cancel the notification first, then delete the record. Reversing this will result in the JobID being deleted before the notification is cancelled. * **Store Job ID immediately** – Capture it right after scheduling. You need it for any future management. * **Set clear end dates** – For recurring notifications, always specify when they should stop (usually the main record's date). * **Provide good UX feedback** – After canceling, navigate users back to a list so they see the change immediately. * **Test recurrence early** – Recurring notifications with date calculations can be complex. Test with data scheduled soon. * **Consider timezone handling** – If you serve multiple regions, test how timezones affect scheduling and recurring patterns. * **Make actions obvious** – In your UI, make it clear what action will happen (e.g., "Cancel Notification" not just "Cancel"). * **Allow easy management** – Don't hide notification management. Put it on the main detail screen where users expect it. # View Scheduled Notifications Monitor and manage your app's scheduled push notifications directly in the Adalo editor. You can view scheduled push notifications for each of your apps directly in the editor. Use this to monitor active notifications, review past notifications, and troubleshoot any delivery issues. *** #### How to Access 1. Open your app in the Adalo editor. 2. Click the **Settings** tab in the left panel. 3. Scroll down to the **Scheduled Notifications** section. 4. Click the green **View Scheduled Notification** button.
A panel will open with two tabs: **Active** and **History**. *** #### Active Tab The **Active** tab lists all scheduled notifications that are pending. They have been set up but not yet sent or completed. Click on any active notification to open its details, where you can: * **Edit** the notification (update the message, timing, date, or number of times to repeat) * **Cancel** the notification to prevent it from sending {% hint style="warning" %} Once a scheduled notification has been cancelled, it cannot be reverted. {% endhint %}
*** #### History Tab The **History** tab shows a log of all past scheduled notifications. If a notification has a failed status, click on it to view the error message. Review your notification setup to identify the issue. Check that your action trigger, timing conditions, and target collection are all configured correctly.
*** #### Help If notifications continue to fail, reach out to [Adalo Support](https://info.adalo.com/submit-a-support-ticket) with a screenshot of the error message, and someone from our team will take a closer look. # Troubleshooting Scheduled Notifications **Job ID is not storing:** * Verify date format is set to "No Formatting" in Schedule Notification setup. * Check that Update Notification action runs after Schedule Notification action. * Ensure you're referencing `Scheduled Notification > Job ID` correctly via MagicTect **Notifications not appearing in list:** * Verify Related Record relationship was created correctly. * Check that list filter is correct: `Related Record = Current Record` * Confirm notification records are in your database **Notification not sending at scheduled time:** * Check that date format is "No Formatting" (not "relative") * Verify the Start Date calculation is correct * Ensure user has notification permissions enabled * Check that user has been active in app within last 2 weeks * Body of notification is empty. you must fill out the body of the notification or the notification will fail to send. # Testing Notifications Here are some common steps to test sending and receiving notifications within your Adalo app! *** There are many ways to test this depending on the setup and User flow within your app. Below is just one example of how this could be done but it's important to test multiple scenarios to ensure your users are receiving notifications. *Skill Level: Intermediate* ## Before You Begin * Set up 2 Users in your app for testing. One will be the sender and the other will be the receiver. * Notifications can only be triggered to another logged-in user, on another device. * *ex: The Logged in User triggering the notification will not be able to receive the notification they triggered within the app.* * Make sure you have the [**Request Notification Permission**](/actions/notifications/request-notification-permission-in-your-app) set up correctly within your app. * Publish the latest version of your app before testing. * Install the app on the device you are testing. ### Test the Notification * Login Sending User on one device and Receiving User on a separate device. * One way to do this would be to have the Sender logged in on a desktop and the receiver logged in on a mobile device. * Ensure the User receiving the notification has accepted the Notification Permission ***after*** they have logged into the device. * Close the app on the device that will be receiving the notification. * Trigger the notification from the Sender to the Receiver. * *ex: Trigger the notification from the Desktop User to the Mobile User.* * Verify the Notification was received on the Receiving User's device. ## Help If you need additional help setting up notifications, you can always check out out [Troubleshooting Notifications](/actions/notifications/troubleshooting-notifications) Documentation or ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! # Troubleshooting Notifications We have a few requirements that we recommend you check to troubleshoot any notification issues. **A notification will only be sent if;** 1. The audience to send to exists (The users set to be the "recipient") **A notification will only be received if**; 1. The recipient has the app installed on their device. 2. The recipient is logged in or has had activity in the app in the last two weeks to be considered active. 3. The recipient has permissions allowed (notification permission). 4. The recipient is ***not the user triggering the notification***. I.e. the Logged in User is not triggering a notification to themselves. {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/opMQANzGZaiWraBp5kbG" %} [Notifications Not Working on Android](/actions/notifications/troubleshooting-notifications/notifications-not-working-on-android) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/l9FPo6UhzfIdSrbwUU6A" %} [Notifications Not Working on iOS](/actions/notifications/troubleshooting-notifications/notifications-not-working-on-ios) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/N0lJMQzaNSG6rEMNygXj" %} [Notifications Not Working on PWA](/actions/notifications/troubleshooting-notifications/notifications-not-working-on-pwa) {% endcontent-ref %} # Notifications Not Working on Android If your Adalo app's notifications are not functioning on Android devices, follow these consolidated steps to identify and resolve the issue. ### Possible Causes and Resolutions #### **Firebase Certificate Key File Revoked or Invalid** **Cause:** The most likely issue is that the Firebase certificate key file used for notifications has been revoked or is no longer valid. **Resolution:** 1. **Check Key ID in Firebase Console:** * Go to the Firebase Console. * Navigate to **IAM & Admin** > **Service Accounts**. * Verify that the key ID for the relevant key file is present. 2. [**Generate a New Key File**](/publishing-apps/publishing-to-the-google-play-store/generate-and-download-private-key)**:** * If the key ID is missing or invalid, go to the **Project Settings** in the Firebase Console. * Click on the **Service accounts** tab. * Click **Generate new private key** to download a new JSON key file. 3. [**Update Adalo Build Settings**](/publishing-apps/publishing-to-the-google-play-store/get-your-build-file)**:** * Log in to your Adalo App. * Navigate to **Android Build Settings**. * Upload the new Frontend google-services.json(Config File) and Service Account Key google-services.json. * Save the settings and trigger a new build of your app. 4. **Test Notifications:** * After deploying the new build, test notifications on Android devices to ensure they are working properly. ## Additional Troubleshooting If the issue persists even after updating the Firebase key file: 1. Ensure that the Firebase Cloud Messaging (FCM) configuration in your Firebase project matches the setup in your Adalo app. 2. Consult the [Adalo Documentation](/actions/notifications) for any missing steps or requirements related to notifications. ## **Still Need Help?** If you are still unable to resolve, reach out to our [support team ](https://info.adalo.com/submit-a-support-ticket)for further assistance with the details below. 1. Include Steps Taken: Let us know what troubleshooting steps you've already tried. # Notifications Not Working on iOS If your Adalo app's notifications are not functioning on iOS devices, follow these consolidated steps to identify and resolve the issue. ### **Possible Causes and Resolutions for iOS Notifications Issues** #### **Apple Notifications Key Revoked or Invalid** **Cause:** The most likely issue is that the Notifications key used for iOS notifications has been revoked, deleted, or is no longer valid in your Apple Developer Account. **Resolution:** **Check Notifications Key in Apple Developer Account:** 1. Go to the [Apple Developer Account](https://developer.apple.com/account/). 2. Navigate to **Certificates, Identifiers & Profiles**. 3. Under **Keys**, check if the Notifications key is present and valid. **Delete and Generate a New Notifications Key:** 1. If the key is revoked or missing, select the existing Notifications key (if it exists) and delete it. 2. Click on the **+** button to create a new key. 3. Enable **Apple Push Notifications service (APNs)** for this key and download the new key file. * Note: You can only have two active Notifications keys at a time. [**Update Your Adalo Build Settings**](/publishing-apps/publishing-to-the-apple-app-store/start-your-build-in-adalo)**:** 1. Log in to your **Adalo App**. 2. Navigate to **iOS Build Settings**. 3. Save the settings and trigger a new build of your app. ## Additional Troubleshooting If the issue persists even after deleting the Notifications key: 1. Ensure that your **APNs** settings in your Apple Developer account match the setup in your Adalo app. 2. Consult the [Adalo Documentation](/actions/notifications) for any missing steps or requirements related to notifications. ## **Still Need Help?** If you are still unable to resolve, reach out to our [support team ](https://info.adalo.com/submit-a-support-ticket)for further assistance with the details below. 1. Include Steps Taken: Let us know what troubleshooting steps you've already tried. 2. Provide any information you received from Apple. # Notifications Not Working on PWA If your PWA notifications are not functioning as expected, follow these steps to identify and resolve potential issues across different platforms and browsers. ### Possible Causes and Resolutions for PWA Notifications Issues #### 1. Permissions Not Granted **Cause:** Users may not have granted permission for notifications in their browser settings or site settings. **Resolution:** * **Check Notification Permissions:** * In the browser, navigate to settings or site settings. * Ensure notifications are allowed for both the Browser and the Site of the PWA. * **Prompt for Permissions:** * Ensure your app prompts the user to enable notifications when appropriate. * The prompt for permissions should be located on the Home Screen of the app. It is also recommended to have an action trigger the Notification request if possible as some browsers may not support an automatic prompt such as a screen action. #### 2. Browser-Specific Limitations **Cause:** Different browsers have varying support for PWA notifications and these change frequently. **Resolution:** * **Cross-Browser Testing:** * Test notifications on multiple browsers (Chrome, Firefox, Safari, Edge) to identify any browser-specific issues. * **Check for Updates:** * Ensure the browser is up to date, as older versions may have limited support for notifications. #### 3. Android notifications not working - Chrome **Cause:** Notifications may bot be received depending on how the app is being used. Installed PWAs work more like a traditional app where Bookmarked PWAs are essentially a link to a chrome tab. **Resolution:** * **Android Installed PWA vs. Bookmarked Chrome Tab:** * **Installed PWA:** Users who install the PWA on their home screen will receive notifications like native apps. The app looks like a normal installed app but runs using the Chrome app and follows Chrome settings. * Notifications will be received if the App is open. * Notifications will be received if the App is closed as long as the user has not accessed on a different device/tab since the last time they visited the Installed PWA. * Notifications will not be received if the User has not accessed the app in the last 2 weeks or if the app was last accessed using a different device or web browser. * **Bookmarked Chrome Tab:** Notifications will not work as expected since this behaves like a regular browser tab and does not support background notifications. * Notifications will be received if the App is open or minimized and the Tab is active. * Notifications will not be received if the tab is not active or if the app has been closed. #### 4. User Engagement **Cause:** If users have not interacted with the PWA recently, they may not receive notifications. **Resolution:** * **User Activity:** * Encourage users to engage with the PWA regularly to maintain notification functionality. * **Send Re-engagement Notifications:** * Consider implementing re-engagement strategies to prompt users to open the PWA. ### Additional Considerations * **Browsers constantly change features, settings, and requirements.** * check out to see the differences and limitations. ## **Still Need Help?** By following these steps, you should be able to diagnose and resolve issues related to PWA notifications across various platforms and browsers. If you are still unable to resolve, reach out to our [support team ](https://info.adalo.com/submit-a-support-ticket)for further assistance with the details below. 1. Include Steps Taken: Let us know what troubleshooting steps you've already tried and include test credentials for faster assistance. # Conditional Actions With Adalo, you can add logic to your actions so that they only happen when certain rules apply. This works very similarly to [setting up a components visibility](/component-basics/changing-a-components-visibility). \ \ One example of this is linking to different pages depending on if the delivery zip code that a customer entered is a zip code available for delivery.\ \ Another example is if you were to set up a toggle to allow users to follow and unfollow other users. This example can be found in the [How To Allow Users to Follow Others](/how-to/how-to-allow-users-to-follow-others) tutorial. ### Set up the action to only occur sometimes To set up the conditions for an action, you will first need to set up the action. For more details on setting up different kinds of actions, you can refer to the help manual for the specific kind of action. 1. Select your component. 2. Set up your action. 3. Select the action. 4. Select *Show Advanced.* 5. Under *When does this happen?* Select the drop down arrow where it says *Always* and change it to *Sometimes.* ![](/files/-M4yehVY2AKszynZzSo2) ### Set up the conditions There are three parts to setting up a condition: the property that the condition will apply to, the comparison type and the comparison value. {% hint style="info" %} When using a Link Action with multiple conditional Actions, one of those links must be a non-conditional action to act as a 'fallback' option. {% endhint %} #### Select the property When selecting what the condition will apply to, you can choose between any current data, form inputs on the current screen, the Date / Time, all of a collection or the count of a collection. #### Select the comparison type The comparison type is set up as a drop-down. Depending on what property you have selected, the comparison type options may vary. {% hint style="info" %} For **Texts** the available options are: *Is equal to, Is not equal to, Contains* For **Numbers** the available options are: *Is equal to, Is not equal to, Is greater than, Is less than, Is greater than or equal, Is less than or equal and Is between* *For* **Toggles** the available options are*:* *True, False* For **Date & Time** the available options are: *Is after, Is before, Is between* For **Images** the available options are: *Is equal to, Is not equal to* For **Files** the available options are: *Is equal to, Is not equal to* For **Addresses** the available options are: *Is within, Is not within- Miles of, Kilometers of* {% endhint %} #### Set the comparison value The comparison value is the value that you want the property to contain, not contain, be equal to or not be equal to depending on the comparison that you selected. 1. Underneath where it says *This Action will only happen if...* select the drop-down arrow next to where it says *Select.* 2. Select the property. 3. Select the comparison value 4. Set the comparison value 5. Select *Done.* ![](/files/-M4yfo6PQjbZsGYqKquw) # Permissions Some features of Adalo require permission from your app Users to access! This section will assist you in setting these up in your app! *Skill Level: Beginner* ## Before You Begin * Permissions grant access to various features of your app such as Location or Notifications. * Users **must be logged in** for permissions to work**.** ## Walkthrough
Request Notification Permissions * This Action grants access to send the Logged in User [Trigger notifications](/actions/notifications/trigger-push-notifications) or [Push Notifications](/integrations/the-adalo-api/push-notifications). * This Action must be added to part of the User flow ***after*** the User **is logged in**. * By default this is added as a Home Screen Action. * Separate setup required for both Apple and Android through your developer account. * Android devices running OS 12 and older have notification permissions set by default so no screen message will pop up and prompt for permission. * iOS requires this is a prompt and the user accepts. If the user denies access, the prompt will not show up again and access must be granted manually.
Request Location Permissions * This allows Users to grant access to their device location. * This Action must be added to part of the User flow where the User **is logged in**. * Best practice is to add to the Home Screen * Separate setup required for both Apple and Android through your developer account.
Camera Permissions * Camera permissions prompt will pop up by default when attempting to upload a photo. * There is no pop up for access to the Photo Library. * *Out-of-process pickers allow the user to see and pick assets from within the context of an app but the app only gets access to assets that were selected. Additionally they did not have access to other things that PhotoKit provides such as information about the user’s albums.There is text in the Photos permissions explaining to users why they may have seen photos within the context of an app without any permission prompts. Currently that text looks like:*\ *`APPS WITH ONE-TIME PHOTO SELECTION:`*
# App Authentication To keep Adalo Apps secure, App Users are required to log in **every 20 days** when authentication tokens expire. This ensures that only authorized users can access their accounts over time. #### **Why Do Tokens Expire?** Regular logins help protect your account by: * Reducing the risk of unauthorized access. * Preventing long-term sessions from being hijacked. * Keeping your security settings up to date. #### **Other Reasons You May Be Logged Out** In addition to token expiration, User Sessions may end if: * Your Users **log in on another device** or browser, replacing an active session. * Your Users **clear their browser cache and cookies**, which removes stored authentication data. To continue using the platform, Users simply need to log in again when prompted. # Screens and Components We like to think of screens and components as the building blocks of an app— the first step in designing an app is understanding how to create an intuitive and easy-to-use interface. {% content-ref url="/pages/-Li8rbvp1jY9IAmVgYiT" %} [Screens](/component-basics/inserting-and-editing-screens) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/oomgjdbJwlLKqkMr8OER" %} [Default Authentication Screens](/component-basics/inserting-and-editing-screens/default-authentication-screens) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/qsNzNfpp526jOsE7h4h0" %} [Deep Linking](/component-basics/inserting-and-editing-screens/deep-linking) {% endcontent-ref %} {% content-ref url="/pages/-LhGeiAwaLstR8HREso1" %} [Component Basics](/component-basics/component-basics) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/-MCDcgR24cvMGF6ASBMb" %} [Navigation Components](/component-basics/screen-navigation) {% endcontent-ref %} {% content-ref url="/pages/-LhvZRwhix8QnukX-k\_E" %} [Magic Text](/component-basics/inserting-dynamic-text) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/ReP4V88BKVnxpEe6d9EF" %} [Conditions and Filtering](/component-basics/conditions-and-filtering) {% endcontent-ref %} {% content-ref url="/pages/-Li8txxmowGvq\_wdzJlw" %} [Changing a Component's Visibility](/component-basics/changing-a-components-visibility) {% endcontent-ref %} {% content-ref url="/pages/-Li8u7vHDHIgARhU0VE3" %} [Lists](/component-basics/connecting-lists-and-forms-to-a-database) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/kEMia1z2HMWPzBNZGXQw" %} [Buttons](/component-basics/buttons) {% endcontent-ref %} {% content-ref url="/pages/-Lmj7M0F0IULGmJfowFE" %} [Toggles](/component-basics/toggles) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/P9h4CTLs8ePw4kPPuS4P" %} [Forms and Fields](/component-basics/forms-and-fields) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/PSuuTDCJs4Egj5olLoh2" %} [Simple Components](/component-basics/simple-components) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/trWCYxeaxkxFsX28m2QC" %} [Table Component](/component-basics/table-component) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/iZPfg66GBoLkKe8tQzCF" %} [Video Component](/component-basics/video) {% endcontent-ref %} {% content-ref url="/pages/-MDqzlKSspN3PRVVy3B\_" %} [Marketplace Components](/component-basics/marketplace-components) {% endcontent-ref %} # Screens Screens are the foundation of an app— generating and organizing different screens allows you to start building a custom user experience. ## All About Screens in Adalo ### Overview Screens are the pages of your Adalo app. Every view your users interact with — a login form, a dashboard, a profile page — is a screen. Most new apps start with a set of pre-built authentication screens (Welcome, Sign Up, Login, and Home) that handle the basic sign-in flow. → Learn more about Default Authentication Screens You can add as many screens as your app needs and connect them using link action {% embed url="" %} Learn all about Screens in Adalo with this YouTube Video. {% endembed %} ### **Before You Begin** * Make sure you are logged into your Adalo account. * Open any app in the builder. * Locate the **Screens** list in the left panel. *** ### Walkthrough #### Creating a New Screen There are two ways to add a screen. **From the Add Panel** 1. Click the **+** button in the left toolbar. 2. Select the **Add Screen** tab. 3. Choose a Screen Template for your new screen. **From a** [**Link Action**](/actions/links) 1. Select a component on an existing screen. 2. In the left panel, click **Add Action**. 3. Choose **Link**, then **New Screen...** 4. In the modal that appears, set a name and choose a Screen Template. ![](/files/-LiUKmeLh5m5uYUiZG9a) *** #### Editing a Screen Click a screen's title on the canvas to open its properties in the left panel. From there you can configure: **Screen Name** Give every screen a clear, descriptive name. This matters more than you'd think — vague names like "Screen 5" make your app harder to manage as it grows. [**Navigation Type**](/component-basics/inserting-and-editing-screens/screen-navigation-types) This controls when the screen appears in your app's flow. * **Normal** — The default. Most screens in your app should use this. * **Welcome Screen** — The first screen users see if they are not logged in or don't have an account yet. * **Home Screen** — The first screen users see if they are already logged in. **Screen Actions** Most screens won't need these. Screen actions run automatically when a user lands on the screen — no tap required. They're useful when you need to create a record in the background or auto-redirect a user to another screen. **Screen Styles** * Background color * Screen size * Reverse scroll — Flips the scroll direction so the bottom of the content is visible first. This is commonly used for chat or messaging screens where the most recent messages should appear at the bottom. *** #### Resizing a Screen Click the screen's title on the canvas. Yellow drag handles will appear on the corners — drag them to resize. *** #### Moving a Screen Click and hold the screen's title on the canvas, then drag it to a new position. Keeping related screens grouped together makes your app easier to navigate as it grows. *** #### Deleting a Screen Select the screen's title on the canvas and press **Delete** or **Backspace** on your keyboard. *** ### Known Limitations * Deleting a screen does not automatically remove link actions that point to it. You'll need to update or remove those links manually. * Screen actions run every time the screen loads, which can cause unintended duplicate records if not handled carefully. * Reverse scroll only affects the visual scroll position — it does not change the sort order of list data. Most Adalo apps automatically start with Signup, Login, and Home screens ### Learn More * [**Default Authentication Screens**](/component-basics/inserting-and-editing-screens/default-authentication-screens) * [**Screen Navigation**](/component-basics/inserting-and-editing-screens/screen-navigation-types) * [**Deep Linking**](/component-basics/inserting-and-editing-screens/deep-linking) * [**Actions**](/actions) # Screen Navigation Types ### Overview Every screen in Adalo has a Navigation Type setting that determines where it sits in your app's entry flow. This setting controls which screen users land on when they open your app, depending on whether or not they're logged in. There are three navigation types: **Normal** — A standard screen with no special entry behavior. Most screens in your app will use this. **Welcome Screen** — The first screen shown to users who are not logged in or don't have an account yet. This is your app's front door for new and returning logged-out users. **Home Screen** — The first screen shown to users who are already logged in. This is where authenticated users land when they open your app. Together, the Welcome Screen and Home Screen create a simple gate: logged out users go one way, logged in users go the other. Every other screen is Normal and is reached through links and navigation. *** ### Walkthrough #### Setting a Screen's Navigation Type 1. Click on the screen's title on the canvas. 2. In the left panel, find the **Navigation Type** dropdown. 3. Select **Normal**, **Welcome Screen**, or **Home Screen**. That's it. The setting takes effect immediately. #### How the Three Types Work Together When a user opens your app, Adalo checks whether they have an active session: * **Not logged in** → The user is sent to the screen marked as **Welcome Screen**. * **Logged in** → The user is sent to the screen marked as **Home Screen**. Every other screen in your app is set to **Normal** and is only reachable through link actions or navigation components. A typical flow looks like this: > **Welcome Screen** → Sign Up or Login → **Home Screen** → Normal screens throughout the app #### When to Change a Navigation Type Most of the time you won't need to touch this setting. Adalo assigns the correct types to the default authentication screens automatically. You'd change it if you: * **Replace the default Welcome Screen** with a custom onboarding or landing screen — set your new screen to Welcome Screen and switch the old one to Normal. * **Replace the default Home Screen** with a different dashboard or landing experience — set your new screen to Home Screen and switch the old one to Normal. * **Build an app without authentication** — you may not need a Welcome Screen at all. Set your main screen to Home Screen and leave everything else as Normal. *** ### Learn More * Your app can only have **one Welcome Screen and one Home Screen** at a time. If you assign the type to a new screen, the previous screen with that type reverts to Normal. * If you delete a screen that is set as the **Welcome Screen** or **Home Screen**, Adalo will automatically assign that navigation type to another screen in your app. This can lead to unexpected behavior — always reassign the navigation type to the correct screen before previewing your app. * The Navigation Type setting only controls the initial entry point. It does not prevent logged-out users from reaching other screens through deep links or shared URLs. # Default Authentication Screens ### **Before You Begin** * Make sure you are logged into your Adalo account. * Open any new or existing app in the builder. * Locate the **Screens** list in the left panel. *** ### Overview Every new Adalo app comes with four built-in authentication screens that manage how users sign up, log in, and enter your app. These screens are pre-wired to the Users collection and control the app's entry flow out of the box — no setup required. The four default screens are named: * **Welcome** — Shown to users who are not logged in. * **Sign Up** — Allows new users to create an account. * **Login** — Allows existing users to access their accounts. * **Home** — Shown to users after they log in. Together, these screens handle the full authentication cycle: first impression → account creation → login → landing experience. *** #### Welcome Screen This is the first screen new users see because the ***Navigation Type*** is set to ***Welcome Screen***. It includes: * App logo or title * Short description * **Login** button * **Sign Up** button The **Welcome Screen** acts as a gate. Users who are not logged in land here and choose whether to sign up or log in.
#### Sign Up Screen This screen contains a form connected to the **Users** collection. New users enter: * Email * Password * Full Name When they tap **Submit**, a new user account is created and they are automatically sent to the Home screen.
#### Login Screen Existing users return through this screen. They enter: * Email * Password After tapping **Submit**, they are logged in and sent to the Home screen.
#### Home Screen This is the main screen for Users who have logged into the app previously. The ***Navigation Type*** is set to ***Home Screen***. By default it's a blank canvas you can customize to show: * A dashboard * A list * User-specific data * Navigation buttons This is where you start building the core experience of your app.
*** ### Known Limitations * The default screens use basic styling. You will likely want to customize fonts, colors, and layout to match your brand. * The Sign Up form only collects Email, Password, and Full Name by default. Additional fields must be added to the form based on the properties in the Users collection. * "Forgot Password" flow is built-in on the Login screen using Adalo's password reset action. *** ### Help If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Deep Linking Allow users to be directed to a specific page or content within an app or website by clicking a link, bypassing the homepage, or other introductory pages. *Skill Level: Intermediate* ## Before You Begin * Deep Linking is ***not available in Legacy Apps***. You must update your app to Responsive to implement Deep Linking. * You must use the ***Published*** Version of your app. (Adalo subdomain or custom domain) * Deep Linking is available on Legacy Mobile Apps ***only*** if using a Custom Domain. Legacy Mobile Apps ***do not*** support the usage of Adalo Subdomains. * No coding required, but familiarity with URL structures and query strings will help you understand how parameters pass data. ## Learn About Deep Linking You've probably shared many website links with colleagues, friends and relatives over text message or Slack. A concept known as *deep linking* lets you do the same with mobile apps. In doing so, you can give the user who follows the link an easy way to go to a specific location inside the app. For example, suppose you wanted to show a friend a pair of shoes you're considering purchasing, and those shoes are listed inside a retailer's mobile app. By sending a deep link to your friend, he can go directly to the shoe listing inside the app rather than open the app and search for the shoes. Adalo added deep linking support in April, 2025. Below you'll find instructions for configuring deep links inside your app. {% embed url="" %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/TNjieEXIng2z3Mgw05yk" %} [Setup Deep Linking](/component-basics/inserting-and-editing-screens/deep-linking/setup-deep-linking) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/yvw7iqcplypuQ8DmQi3O" %} [Deep Linking With Data](/component-basics/inserting-and-editing-screens/deep-linking/deep-linking-with-data) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/Uq3UhN4tOtv8KbHEu35h" %} [Deep Linking Share Action](/component-basics/inserting-and-editing-screens/deep-linking/deep-linking-share-action) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/jpIC2fFLZu88pGuDYF0R" %} [Deep Linking Redirection & Fallbacks](/component-basics/inserting-and-editing-screens/deep-linking/deep-linking-redirection-and-fallbacks) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/o2C5R9XLOMHD3S71xNqQ" %} [FAQs and Troubleshooting](/component-basics/inserting-and-editing-screens/deep-linking/faqs-and-troubleshooting) {% endcontent-ref %} # Setup Deep Linking Walkthrough of integrating Deep Linking into your app. Let's configure a deep link for one of your app screens. {% hint style="warning" %} Preview Links ***do not*** support Deep Linking. {% endhint %} ### Step #1. Click on the Screen Name Let's configure a deep link for one of your app screens. Open the Adalo app builder and click on a screen title (the blue badge that sits above a screen). The left-side drawer will open, and inside it you'll see a section titled "Deep Linking".
### Step #2. Open the "Deep Linking" Menu Open the Deep Linking menu located in the screen drawer. Then set a screen route name which will be used when routing the user who clicks on the link. This can be any name you want, it does not have to be the name of the screen in the builder.
For example, this screen will have the path "events" so that users will be directed to the "events" screen.
### Step #3. Copy URL Click "Copy URL" to copy the specific URL needed to your clipboard to route users to the designated screen. In this example, the URL would be "adalo-internal.adalo.com/deep-linking-example/**events**"
Of course, it is also possible to integrate the link into your user interface for the benefit of users who want to share it.
### Step #4. Test your link Test the link below to see the events page from the app example. {% embed url="" %} # Deep Linking With Data Redirecting your users to a specific page or screen that contains some data based on the URL pressed Data can be passed via URL as long as it is **Available Data** on the screen. In the Example below, the ***Current Event*** is available on the Screen which will allow you to use that Variable in the Deep Linking Setup. ## Configure Your Query Parameters A query parameter name is what will be shown in the URL. In this case, as we are directing the user to an event page, we will use the parameter name `event`. Our URL will look like this: `adalo-internal.adalo.com/deep-linking-example/events/event=` *Note: The structure of the URL may vary depending on the data collection used on the screen. In this case, the collection is called **Events**, which is why the screen label shows “Events” above the input field. However, the actual query parameter (`event`) can be defined freely and is added manually in the field when setting up the deep link.*
### Copy the Screen URL You can copy the screen URL by clicking on `Copy Url` button to share the event. Replace "EventId" with the actual value of the event in the following URL: `adalo-internal.adalo.com/deep-linking-example/events/event="EventId"`. # Deep Linking Share Action Create a seamless sharing experience for your app users which just one actio ## Add a new Deep Linking Share action 1. Click on **Add Another Action**. 2. Select **More** from the dropdown menu. 3. Choose **Deep Linking Share**.
## Configure Deep Linking Share The deep linking share action contains fields based on the screen's available data. Using magic text, fill each field with the corresponding available data ID to ensure accurate and dynamic link sharing capabilities.

Deep linking share base action

Magic text selecting the ID of events

Final result

## How it works in-app? When your app user trigger `Deep Linking Share` the application will automatically populate the URL configured in `Deep Linking With Data` section and trigger the share functionality within the app. The `Deep Linking Share` is smart enough to know what is your app configuration for web, whether you are using an organization subdomain or your custom domain name
# Deep Linking Redirection & Fallbacks What happens when the app is not installed on the device? When a user clicks on the deep link and the app is not installed on the user's device you can \ send the user to the Google Play Store or Apple App Store to install the app (or any different fallback URL based on the Android/iOS platform) or send the user to the PWA Browser version of the app to said screen.
### Configuring Fallback URLs
# FAQs and Troubleshooting Troubleshoot your Deep Linking Setup ***
Why doesn’t Deep Linking work in Previewer? Preview URLs don’t support Deep Linking—always test on your Published App.
Why doesn't Deep Linking open my installed PWA? Installed PWA's are a website that's been downloaded and saved to your device, providing an app-like experience. Think of them like a bookmark of a Website. Since these are just a reflection of the browser and not actually an App, they will not open with a Deep Link. Instead, a new browser instance will open in the default browser.
Can I use Deep Linking in Legacy Apps? No. Legacy built Adalo Apps will not support the new Adalo Deep Linking Feature. You must update your app to Responsive to implement it.
Is Deep Linking an action? Deep linking is not an action. Deep linking is a standalone Adalo feature, and is managed separately by the Adalo infrastructure and team.
# Component Basics An intro to using components to build screens. ## Learn All About Components Components are the building blocks of your app's design. Everything your users will interact with when using your app are considered components. These are the visual elements of your app! {% embed url="" %} ## Inserting Components ![Components are located in the Add Panel that appears after clicking the plus button-- to insert them, click and drag into a screen.](/files/-LiUOVatXXHyGhngYpob) Components are all of the elements on a screen — lists, buttons, text, etc. * **Drag and drop** components from the Add Panel onto a screen on your Canvas. * To **copy and paste** a component from one screen to another, select and copy the component, then **click the Screen Title** of the new screen and paste it. * To **edit** a component, click on it and the left panel will open with all of the options to configure and customize the component. * If you want to **group components**, click and drag to select multiple components. Then, in the left panel, click the "Make Group" button. * If you want to **arrange the order of components** on a screen so that one component is above or below another, go to the Screens tab in the toolbar, and click the relevant screen to see its list of components. In that list, drag components up or down to move them closer to the front or back of the order. * To link clicking on a component to an action or to another screen, check out our [Action Basics](/actions) section. Components can range from very simple to robust with many options. Simple components like text and shapes can be combined to create your own custom designs. ## All Components #### [Navigation](/component-basics/screen-navigation) * Tab Bar * App Bar * [Side Navigation](/design/designing-your-app/responsive-navigation/responsive-side-navigation) * [Top Navigation](/design/designing-your-app/responsive-navigation/responsive-top-navigation) #### [Lists](/component-basics/connecting-lists-and-forms-to-a-database) * Simple List * Card List * Image List * Avatar List * Horizontal Card List * Horizontal Chip List * Custom List #### [Buttons](/component-basics/buttons) * Button * Action Button * Icon * Toggle #### [Simple](/component-basics/simple-components) * Text * [Image](/component-basics/simple-components/image-component) * Eclipse * Rectangle * Line * Vector * [Web View Component](/component-basics/simple-components/webview-component) * [Video Component](/component-basics/video) #### Forms & Fields * [Form](/component-basics/forms-and-fields/how-to-create-and-edit-forms-and-fields) * [Text Input](/component-basics/forms-and-fields/text-input) * Date Picker * Dropdown Menu * File Picker * [Image Picker](/component-basics/forms-and-fields/image-picker) **Marketplace Components** * Map * Calendar * Image Slider * Google Signin * Multiselect Dropdown * Star Rating * Progress Bar * YouTube * AdMob Banner * Stripe Kit * Deck Swiper * Plyr Video * Chart Kit * Audio Player * Apple Sign-In * Email Validator * Slider * Lottie * QR Code Generator (by Knight) * Countdown * Randomizer * NocoderHQ HTMLRenderer * QR Code Scanner * Calendar Stripe * Stopwatch * Signature Pad * IAP Kit * QR Code Generator (by Zeroqode) * Magic Color Rectangle * NocoderHQ Round Button * Random Picker * NocoderHQ Countdown * Twitter Timeline * URL Encode Decoder * Switch * Masked Form * Markdown Renderer * Jam Room # Navigation Components Check out this quick two minute video to learn the ins & outs of creating custom navigation in Adalo with different components. ### Overview Navigation is how your users move between screens. Adalo provides five pre-built navigation components, each designed for a different layout and use case. You can also build fully custom navigation using basic components like rectangles, text, and images. This page covers the fundamentals of navigation and best practices that apply regardless of which component you use. Each component has its own setup guide linked below. {% embed url="" %} #### Pre-Built Navigation Components [**Side Navigation** ](/design/designing-your-app/responsive-navigation/responsive-side-navigation)— A vertical panel that slides in from the side. Useful for apps with many destinations or desktop-style layouts. [**Top Navigation**](/design/designing-your-app/responsive-navigation/responsive-top-navigation) — A horizontal bar at the top of the screen. Works well for organizing content within a section or as a complement to bottom navigation. **Bottom Navigation** — A horizontal bar fixed to the bottom of the screen. The most common navigation pattern for mobile apps. Best for 3–5 primary destinations. **App Bar** — A top bar that typically holds a screen title, back button, and action icons. Used for hierarchy and context rather than primary navigation. **Tab Bar (Legacy)** — An older version of bottom tab navigation. Still functional, but newer apps should use Bottom Navigation instead. *** ### Before You Begin * Your app should have at least two screens to navigate between. * Decide which screens are your primary destinations — these will become your navigation tabs. * Plan your tab order: most important items go on the left (or top), least important on the right (or bottom). *** ### How Navigation Works in Adalo #### The Core Pattern Regardless of which component you choose, navigation setup follows the same basic steps: 1. **Drag the component** onto your screen. 2. **Configure each tab** — set the icon, label, and link for each destination. 3. **Set link transitions to None.** Navigation should feel like switching tabs, not moving to a new page. 4. **Copy and paste** the component onto your other main screens. 5. **Update the active tab** on each screen so it matches the screen the user is currently on. The default components come with sensible defaults. For most apps, the main work is setting your links, copying across screens, and marking the active tab. #### Building Custom Navigation If you need full control over how your navigation looks, you can build it from scratch using basic components. 1. Drag in a **Rectangle** to serve as the navigation bar background. 2. Add **Text** components for your tab labels and **Image** components for your icons — this lets you use any icons you want, not just the built-in set. 3. Arrange and style everything to match your design. 4. Drag to copy each icon/text pair across your tab slots, then update the labels and icons for each destination. 5. **Group** all the navigation elements together. 6. Set the group to **Fix position to bottom** (or top, or side) so it stays anchored as users scroll. 7. **Copy and paste** the entire group onto your other main screens. 8. On each screen, adjust the styling of the active tab so users can see which screen they're on. Custom navigation gives you control over icons, layout, colors, and effects — including rounded designs, centered action buttons with different transitions, and other UI patterns. *** ### Best Practices **Always set link transitions to None.** Navigation should feel like switching tabs, not navigating to a new page. This applies to both pre-built components and custom builds. **Bottom navigation disappears on interior pages.** When a user taps into a detail or sub-screen, the bottom nav typically goes away. This is expected — interior pages are deeper in the hierarchy, not primary destinations. **Use visually distinct sub-navigation for interior pages.** If an interior page needs its own navigation (e.g., tabs within a section), make it look clearly different from the main nav so users understand the hierarchy. **Stick to five items or fewer on bottom navigation.** This is a standard mobile UX guideline. If you have more destinations, consider using top tabs or side navigation. **Top tabs complement bottom navigation well.** When bottom nav handles your primary screens, top tabs can organize content within a single screen — filtering between views, categories, or data sets. *** ### Known Limitations * Navigation components must be copied and pasted to each screen manually — changes to one copy do not sync across screens. * Active tab state must be set manually per screen. If you add or reorder tabs, you'll need to update every copy. * Custom navigation requires grouping and fixing position; forgetting either step will cause layout issues on scroll. # Magic Text Magic Text allows you to pull information directly from your Adalo Database dynamically. ## Learn About Magic Text Magic Text is a foundational aspect of Adalo that you must understand in order to create a dynamic and engaging app that is designed well & performant. Magic Text pulls data from the database to display in the app without replicating designs for each record item in the database. Magic Text is truly :sparkles:Magic:sparkles: {% embed url="" %} In components that display text, in the toolbar below the text box, you will see the Magic Text icon: Clicking this will show you what Magic Text you can add to your component. Magic Text will automatically be replaced with text from your App's Database. For example, if your screen is showing details for a Trip, you can use Magic Text to show the Trip's Name. You can display Magic Text for the Logged in User, any item in a list, or any list item that links to the screen you're on. For example, if you have a travel app that displays options for trips, and you want the user to be able to click on a particular trip and open a screen with more detailed information on that trip: 1. Insert text boxes, images, or other components 2. Select the Magic Text icon from your text box's toolbar 3. Choose the database Collection and the Property you want to add as Magic Text 4. Click on 'Preview' to make sure the Magic Text works ![](/files/-MRvDM8r85NdOmhijfZp) ![Step 4](/files/-LioAWe66HytJ5Ri3T6V) # Logged-In User vs. Current User When utilizing Magic Text, there is an option to use Logged-In User vs. Current User. ## Learning the Difference between Users in Magic Text Learning the two types of users available when utilizing Magic Text is important because it will alter the data present to users of the app & will control the entire app experience. {% embed url="" %} # How to Format Dates and Numbers * If the [Magic Text](/component-basics/inserting-dynamic-text) you add is for a Number or Date Property, you can customize how that information is formatted. * **To see formatting options, click on the pencil in the Magic Text chip** * For numbers: * Saving Numbers in the Database * Whole numbers must be entered without symbols (no commas or periods). Decimals must be denoted by either a period (.) or a comma (,) * Formatting Number for Displaying * You can select whether the number should have commas, be abbreviated, or be displayed as currency. * Prefixes and Suffixes * Prefixes and Suffixes can make your text even more magical by smartly showing the right word depending on whether the number is singular or plural. * For example, if you are showing a count of Trips, you can set the singular suffix to "Trip" and the plural suffix and "Trips." Then your app will automatically show "1 Trip" or "2 Trips" * For dates: * You can elect whether you want your data formatted as a Date or Date/Time, Day of the Week, or Relative (i.e., 3 days ago) ![](/files/-MRvE74X9HMkD41tojl4) # Sums, Counts, Averages, Min and Max This is how you can display sums, counts, averages, min and max with your Adalo app. *Skill Level: Intermediate to Expert* ## Before You Begin * Should have knowledge of [Databases](https://help.adalo.com/database) ## Walkthrough {% tabs %} {% tab title="In-Depth" %} When you have two collections in your database that are related to each other, you can use Magic Text to display Sums, Counts, Averages, Min and Max. For example, if you have a database collection of Trips and another collection of Activities (and each Activity has a price property) where each Trip can have multiple Activities, if you have a screen or list displaying information about a Trip, you can use Magic Text to display: * The Count of Activities for that Trip * The Sum of the Prices for that Trip's Activities * The Average Price for that Trip's Activities * The Maximum Price for that Trip's Activities * The Minimum Price for that Trip's Activities As with any number, you can click on the chip to [customize the number formatting](/component-basics/inserting-dynamic-text/how-to-format-dates-and-numbers) when it is displayed in your app. ![](/files/-LiUcAnoFOetqHh45Hh5) ### Adding Filters You can also add filters to specify which records are included in these aggregations. For example, if your Activities collection has a True/False property for "Will Definitely Do," then you can add a filter so that you're only showing the Sum of the Prices for Activities where "Will Definitely Do" is equal to True. To add a filter, simply click on the chip, and select Add Filter. ![](/files/-LmehqCUmbs3F1p1KR5S) {% endtab %} {% endtabs %} ## Help If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! # How to Create a Custom Math Formula Create your own custom math formulas inside of Adalo *Skill Level: Intermediate* ## Before You Begin * Should have knowledge about [Databases](https://help.adalo.com/database) * Should have knowledge of [Magic Text](https://help.adalo.com/component-basics/inserting-dynamic-text) ## Walkthrough #### **Using Custom Formulas with Magic Text** When adding Magic Text, you’ll notice the option **"New Formula..."** at the bottom of the menu. Selecting this will insert a "Custom Formula" chip into your text box. Follow these steps to use the formula: 1. **Click on the "Custom Formula" chip** to open the formula editor. 2. In the editor, you can type any number along with the following operators: * `+` for addition * `-` for subtraction * `/` for division * `*` or `x` for multiplication * `( )` for parentheses to group parts of the formula 3. **Insert Magic Numbers**: * Click the **Magic Number icon** to insert a number from your database. * Magic Numbers use Number properties from your data, and you can filter them by [**Counts**, **Sums**, **Averages**,](/component-basics/inserting-dynamic-text/connecting-your-database-for-counts-and-aggregating) etc., of related collections. 4. **Insert Functions**: * The Magic Number icon also allows you to insert functions into your formulas. The following functions are supported: **Supported Functions** * **Round**: Rounds a number to the nearest integer. ```plaintext ROUND(4.32) → 4 ROUND(4.5) → 5 ``` * **Integer (INT)**: Removes the decimals from a number (rounding down). ```plaintext INT(4.32) → 4 INT(4.999) → 4 ``` * **Absolute Value (ABS)**: Displays the absolute (positive) value of a number. ```plaintext ABS(-4.32) → 4.32 ``` * **Square Root (SQRT)**: Displays the square root of a number. ```plaintext SQRT(9) → 3 ``` * **Exponent (EXP)**: Raises one number to the power of another. ```plaintext EXP(3, 2) → 9 (which is 3²) ``` * **Random Number (RAND)**: Generates a random number between two specified values. ```plaintext RAND(0, 1) → A random number between 0 and 1 ``` * **Logarithm (LOG)**: Displays the base 10 logarithm of a number. ```plaintext LOG(100) → 2 ``` *** #### **Example: Calculating Trip Cost Per Person** Let’s say you want to calculate the cost of a trip per person using a custom math formula. 1. Insert a text box. 2. Select the **Magic Text** button (red accented letter). 3. Choose **"New Formula"** from the popup menu. 4. Click on the **pencil icon** to open the formula editor. 5. Click the **Magic Number icon** and select **Trip Cost**. 6. Enter `/` (to divide). 7. Click the **Magic Number icon** again and select **Group Size**. 8. You can also[ edit prefixes, suffixes, and formatting for custom formulas ](/component-basics/inserting-dynamic-text/how-to-format-dates-and-numbers)as needed.
Now, your formula will divide the total trip cost by the group size. ### **Additional Tips** * You can combine multiple Magic Numbers, operators, and functions in the same formula to create more complex calculations. * Custom formulas are flexible—tailor them to your specific needs by adjusting the numbers or properties from your database. Check out some used by our Adalo Makers [Here](/component-basics/inserting-dynamic-text/how-to-create-a-custom-math-formula/complex-calculations). * Formulas using Dates will fail if MagicText is Null. ## Help If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! # Complex Calculations Below are some examples of calculations shared by the Adalo Community. #### **1. Rounding a Number to Nearest Hundredths Using `*100/100`** If you want to round a number to two decimal places manually, you can multiply it by 100, round it, and then divide by 100 again. For example, to round the number 12.34567 to two decimal places: ```plaintext ROUND(12.34567 * 100) / 100 ``` This calculation works by: * Multiplying `12.34567` by 100 → `1234.567` * Rounding it to the nearest integer → `1235` * Dividing by 100 to get it back to the original scale → `12.35` *** #### **2. Calculating a Percentage Increase/Decrease** Let’s say you have a property for last year’s revenue and another for this year’s revenue, and you want to calculate the percentage increase: ```plaintext ((This_Year_Revenue - Last_Year_Revenue) / Last_Year_Revenue) * 100 ``` This formula will: * Subtract last year’s revenue from this year’s revenue to get the difference. * Divide that difference by last year’s revenue to calculate the change as a decimal. * Multiply by 100 to convert the result to a percentage. *** #### **3. Compound Interest Formula** To calculate compound interest, where you have a principal amount, an interest rate, and a number of periods (e.g., years), you can use the formula: ```plaintext Principal * (1 + Rate / 100)^Periods ``` For example, if you invest $1,000 at an annual interest rate of 5% for 3 years, the formula would look like this: 
1000 * (1 + 5 / 100)^3
This will calculate the total value after interest is compounded over 3 years. *** #### **4. Combining Rounding with Other Functions** You might want to round a calculated percentage to one decimal place. For example, if you’re calculating the percentage completion of a task and want to round it: ```plaintext ROUND((Completed_Tasks / Total_Tasks) * 100, 1) ``` This formula: * Divides the number of completed tasks by the total tasks to get the completion rate as a decimal. * Multiplies by 100 to convert it into a percentage. * Rounds the result to one decimal place. *** #### **5. Adjusting Time Based on User Hours** If you want to adjust the current date by a partial day based on the user’s hours, you can use this formula: ```plaintext Current_Date + ((24 - User_Hours) / 24) ``` This formula works by: * Subtracting `User_Hours` from 24 to get the remaining hours in the day. * Dividing by 24 to convert the remaining hours into a fraction of a day. * Adding that fraction of a day to the `Current_Date` to adjust the time. *** #### **6. Simple Percentage Calculation** If you want to calculate what percentage a number (`Part`) is of a total (`Total`): ```plaintext (Part / Total) * 100 ``` For example, if you completed 30 tasks out of 50, the formula would be: ```plaintext (30 / 50) * 100 → 60% ``` *** #### **7. Adding Days to a Date** To calculate a new date by adding a certain number of days to the current date, you can use: ```plaintext Current_Date + Days ``` For example, to add 7 days to today’s date: ```plaintext Current_Date + 7 ``` This will give you the date that’s 7 days from now. *** #### **8. Calculating Days between Dates** To calculate the number of days between 2 dates, you can use: {% code overflow="wrap" %} ```plaintext INT(End_Date - Start_Date/Time) or INT(End_Date/Time - Start_Date/Time) or End_date - Start_Date ``` {% endcode %} **Example 2: Date and Time** ``` End_Date = 2025-02-01 15:45 Start_Date = 2025-01-23 10:30 End_Date - Start_Date = 9.21875 days (9 full days and ~5.25 hours) INT(9.21875) = 9 Result: 9 days(truncated, ignoring partial day) ``` **Example 1: Date Only** ``` End_Date = 2025-02-01 Start_Date = 2025-01-23 End_Date - Start_Date = 9 INT(9) = 9 Result: 9 days ``` This formula * Calculates the difference between two date or date-time values. The result is typically in **days as a decimal**, where the whole number part represents full days and the fractional part represents the time difference. * Applies the `INT` function truncates (rounds down) the decimal result to the nearest lower whole number. For example: * If the difference is `2.75` days, `INT` will give `2` days. * If the difference is `-1.25` days, `INT` will give `-2` days. This formula: #### **Key Limitation**: This approach discards fractional parts of a day, so it's not suitable if you need precise time differences (e.g., 9.22 days). Use alternative methods like `ROUND` or `DATEDIF` for more nuanced calculations. *** **9. Calculating a Discount** If you want to calculate the discounted price of an item, you can subtract the discount from the original price: ```plaintext Original_Price - (Original_Price * Discount_Percentage / 100) ``` For example, if an item costs $100 and there is a 20% discount, the formula would be: ```plaintext 100 - (100 * 20 / 100) → $80 ``` # Conditions and Filtering Conditions and filtering are essential concepts found in many of Adalo's Components enabling you to control the behavior and appearance of your app based on specific criteria. Understanding these concepts will empower you to create dynamic and personalized user experiences. ## Before You Begin * Have a basic understanding of [Databases](/database), [Screen & Components](/component-basics), and [Actions](/actions) ### **What are Conditions and Filtering?** First let's define each term. Both of them run on what's called *If-Then logic, m*eaning that if something is true, then do this thing. **Filtering:** Filtering is used to selectively display your app data based on predefined criteria. It allows you to sift through collections by applying specific rules to control what is shown and what is hidden. **Conditions:** Conditions evaluate whether or not something should occur within your app. They allow you to set up logic to trigger actions and show or hide components based on user interactions or data values. ### **Key Differences:** * **Purpose:** Conditions primarily control the behavior and appearance of components within your app, while filtering focuses on controlling the display of data. * **Scope:** Conditions are often applied to individual components or actions within your app, affecting their visibility or interactivity. Filtering, on the other hand, is applied to collections of data to determine which records should be displayed based on certain conditions. ### Get Started {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/xYBSZgZQDQ9SFuD9WEok" %} [Filtering in Adalo](/component-basics/conditions-and-filtering/filtering-in-adalo) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/jAFmBplQH3wH0lR00MNS" %} [Using Conditions in Adalo](/component-basics/conditions-and-filtering/using-conditions-in-adalo) {% endcontent-ref %} # Filtering in Adalo Filtering is a powerful feature that allows you to refine and organize data within your app. Whether you're a seasoned app builder or just getting started, understanding filtering concepts will help you tailor your app to meet your specific needs. ### **Key Filtering Concepts:** **Filter Criteria:** This refers to the rules you set to determine which data should be displayed or hidden. For example, you might want to only display orders placed in the last 30 days or show tasks assigned to a specific team member using a Relationship Property. **Filter Fields:** These are the Properties in your Collections of data that you can use to filter. For instance, if you're managing a list of products, your filter fields could include product name, price, or category. **Filter Operators:** Operators are used to define the relationship between the filter criteria and the data. Adalo supports various operators such as equals, not equals, contains, greater than, less than, and many more depending on the Property Type. These operators help you specify how you want to filter your data. **Logical Operators:** Logical operators are used to combine multiple filter criteria to create complex filtering conditions. Adalo supports **AND** and **OR** operators in Lists. They allow you to refine your filters further by specifying conditions that must be met simultaneously or independently. ### **Where to Find Filters** Filters are typically found in List components and components that display whole groups of records such as: * Lists * Counts * Dropdown Component * Deck Swiper * Image Swiper * Calendar * Chart Kits * ...and many more! ### Filters Filters can be found in most commonly in Lists that show groups of data from your Collections. In the example below, we have a **List of Trips** and the default filter is set to **All Trips.** You can filter further based on the Available Screen Data or Logged in User data by selecting the dropdown.
### Custom Filters Custom Filter can be added anywhere you see the **+Add Custom Filter** button. These are used to combine logic and display very specific groups of records using Filter Operators. In the same example as above, we want to only display the **Trips** where the **Travelers (Relationship to Users)** contains the **Logged in User**.
**Filter Operators:** Filter Operators are how Adalo determines what records to show. They result in either being true or false. Based on this information, either Adalo should (true) show records based on this operator or it should not (false). Both filters and conditions use operators to determine what do to with records, components, or actions. Following the *if-then* logic mentioned earlier we can use logical operators within filters and conditions to instruct Adalo that "if this thing is true, then do this other thing". #### Operator Types {% tabs %} {% tab title="Text" %} #### Operators: * **Is equal to** - This operator is case sensitive and the two pieces of text must match each other *exactly* - even if there is a hidden return or space in the text. This operator is very strict. "Day" is equal to "day" = false "Day" is equal to "Day" = true * **Is not equal to** - This operator is also case sensitive and determines if the two pieces of text are different from one another - even by a space or return. This operator is very strict. Hint: it's often easier to exclude items that to determine if they match exactly. "Day" is not equal to "day" = true "Day" is not equal to "Day" = false * **Contains** - This operator determine if a string of text contains another string of text. This operator is not very strict and not case sensitive, but can sometimes have unintended consequences if multiple records share the same text string. For example, ** and ** both contain "gmail" but they are not the same result. This also makes it great for searching for records in your app. "Day" contains "day" = true "Day" contains "Day"= true "Tuesday" contains "Day" = true {% endtab %} {% tab title="Number" %} #### Operators: * **Is equal to** - Determines if two number values are equal to each other. This operator is very strict - down to decimals. Can also handle negative numbers. 4 is equal to 4 = true 4 is equal to 3 = false * **Is not equal to** - Determines if two number values are not equal to each other. This operator is very strict - down to decimals. Can also handle negative numbers. 4 is not equal to 4 = false 4 is not equal to 3 = true * **Is greater than** - Determines if one number value is greater than another. This operator is very strict - down to decimals. Can also handle negative numbers. 4 is greater than 4 = false 4 is greater than 3 - true * **Is greater than or equal to** - Determines if one number value is greater than OR equal to another. This operator is strict - down to decimals. Can also handle negative numbers. 4 is greater than or equal to 4 = true 4 is greater than or equal to 3 = true * **Is less than** - Determines if one number value is less than another. This operator is very strict - down to decimals. Can also handle negative numbers. 4 is less than 4 = false 4 is less than 3 = false * **Is less than or equal to** - Determines if one number value is less than OR equal to another. This operator is very strict - down to decimals. Can also handle negative numbers. 4 is less than or equal to 4 = true 4 is less than or equal to 3 = false * **Is between** - Determines if a number value is between two other number values. The first value provided is included in the range, the second value provided is excluded from the range. The operator is very strict - down to decimals. It can also handle negative numbers. 4 is between 4 and 6 = true 6 is between 4 and 6 = false 5 is between 4 and 6 = true {% endtab %} {% tab title="Date" %} **Operators:** * **Is after** - Determines if one date property or datetime property occurs after another. You can compare dates and datetimes interchangeably. Aug 12, 1992 4:00PM is after Aug 12, 1980 = true * **Is before** - Determines if one date property or datetime property occurs before another. You can compare dates and datetimes interchangeably. Aug 12, 1992 4:00PM is before Aug 12, 1980 = false * **Is between** - Determines if one date or datetime property occurs between two other dates or datetimes. The first datetime provided is inclusive, but the second datetime is exclusive. You can compare dates and datetimes interchangeably. Aug 12, 1992 4:00PM is between Aug 12, 1980 and Aug 12, 2021 = true Aug 12, 1980 4:00PM is between Aug 12, 1980 and Aug 12, 2021 = true Aug 11, 1980 4:00PM is between Aug 12, 1980 and Aug 12, 2021 = false {% endtab %} {% tab title="Relationship" %} The only type of relationship that can be compared with logical operators in Adalo are one-to-many relationships. You cannot compare many records with many other records. **Operators:** * **Contains** - Determines if a group or collection of records contains a selected record. This operator evaluates the record as a whole instead of just a single property like the others. ![](/files/a4MTSdZLXzX0nJ0mIepH) * **Does not contain** - Determines if a group or collection of records does not contain a selected record. This operator evaluates the record as a whole instead of just a single property like the others. ![](/files/T680kqAI8G6UL1MUe8Bn) {% endtab %} {% tab title="True/False" %} **Operators:** * **Is true** - Determines if a true/false property is checked * **Is false** - Determines if a true/false property is not checked {% endtab %} {% endtabs %} #### Logical Operators Within filters you have the option to make custom filters be inclusive of each other, or exclusive of each other. For Lists that have multiple custom filters, you can choose whether ***all*** of those filters must be true in order to show records, or you can choose whether ***any*** of the filters are true. {% embed url="" %} If you want to display data only when ***all*** criteria are met, you can click on the **+ AND** button. In the example below, we only want to display the **Trips** where the **Travelers (Relationship to Users)** *contains* the **Logged in User , AND** have a **Travel Date** *is after* the **Date** the Logged in User is viewing the List.
If you want to display data only when ***any*** criteria are met, you can click on the **+Add Custom Filter** button. In the example below, we only want to display the **Trips** where the **Travelers (Relationship to Users)** *contains* the **Logged in User , OR** the **Trip Status** *is equal to* **Active**
**0 vs. Null (Empty):** In data management, **0** and **Null** represent different states. **0** is a valid numerical value, indicating the absence of a quantity or a specific value. **Null** signifies the ***absence of any value or unknown value*** indicating that ***no data is present*** in a particular field. In Adalo, **Null** is referred to as ***Empty.*** #### **Filtering Empty Values:** * Empty **cannot** be used to evaluate whether a Relationship exists AND the operator is Empty. * **Example:** You only want records where a relationship exists, but a certain property is empty. * Empty **cannot** be used to filter a **count** of records. * **Example:** You only want records that do not have a relationship count. Since Counts are Numbers, you must compare to a Number such as '0' **Advanced Filtering Techniques:** * **Checking Relationships:** You can check if a record has a relationship across a many-to-one relationship by examining the Relationship’s ID property for Empty. * **Example:** You can get a list of **Leads** that do not have a **Sales Person** **\[many Leads, one Sales Person]**, by checking **Current Leads > Sales Person > ID** *is equal to* **Empty**. * **Evaluating Image and File Properties:** You can evaluate if a record does or does not have an image or file saved for an Image or File property. * **Example:** You can only show options in a Dropdown component that have a saved **Contract \[File property]**, by applying a custom filter to only show records where **Contract > URL** *is not equal to* **Empty**. * **Evaluating Location Properties:** Similarly, you can evaluate if a record does or does not have a location saved for a Location property. * **Example:** You can get a count of all **Restaurants** that do not have a **Location**, by using a Magic Text Count of all Restaurants with a custom filter set to **Restaurant's > Location > Full Address** *is equal to* **Empty.** {% hint style="danger" %} ***Please Note:***Very complex filters, especially ones combining many **OR** conditions with **location** filters, can get large enough that a list fails to load. If that happens, reduce the number of OR conditions or simplify the filter. See [Comparing Locations](https://help.adalo.com/database/location/comparing-locations) for details. {% endhint %} *** ## Learn More * You can combine filters with conditions to give even more control over what happens in your app. For instance, you may change the visibility of a component based on a filtered count of a collection of records in your database. * Currently conditional actions and conditional visibility can only have one filter attached to them, but filters for lists, counts, charts, and other components can have multiple filters. *** ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Using Conditions in Adalo Conditions enable you to create dynamic and interactive user experiences within your app. Understanding conditions is essential for designing engaging and responsive apps by dictating when specific actions or behaviors should occur within your app. ### **Where to find Conditions:** #### **Conditional Actions** Conditional Actions can be added to any Action by selecting "Show Advanced" at the bottom of the Action Setup. This allows you to trigger actions based on certain criteria such as User data or input values. In the example below, we see a Conditional Link Action set up to link a User to the Admin Screen if **Logged in User>Admin**(Boolean) is *equal to* **True**.
{% hint style="warning" %} **Please note**: If the criteria of a Conditional Action is not met, nothing will happen when the User clicks the Component. To avoid this, we recommend setting up a fallback action which will apply to any users who do not meet the conditions for the action. {% endhint %} #### **Conditional Visibility** Conditional Visibility can be added on any component from the kebab menu in the top right of the component setup. It will enable you to control the visibility of elements within your app allowing you to show or hide buttons, images, text fields, and other UI components based on specific conditions such as user roles or input values. In the example below, we have a button that we want to only be visible when the **Current Destination>Users** (from the available screen data) *includes* the **Logged in User.**
Visibility rules in Adalo **do not support aggregations** like `Sum`, `Count`, or filtering across multiple records in a collection. This means you cannot show or hide a component based on a total or condition that depends on more than one record. If you need to base visibility on something like the total number of future-dated records or a sum of values, you’ll need to **pre-calculate that value** and store it in a property (e.g. on a User or related record). You can then reference that property in the visibility condition. ✅ *Note: Filters on Lists do support collection-wide conditions, which is why the same logic may work there but not for individual components.* {% hint style="danger" %} ***Please Note:***** Adding too many Conditional Actions to any Component can negatively impact performance of the app for the end user.** {% endhint %} ## **Learn More** * Currently conditional actions and conditional visibility can only have one filter attached to them, but filters for lists, counts, charts, and other components can have as many filters as you like. * Many times conditional actions and conditional visibility can be used interchangeably to achieve the same end result or user experience even though the setup may differ slightly. * If you want to learn how to create an empty state— a screen that shows up when no data input matches filtering or search criteria— check out [this tutorial](/how-to/how-to-create-an-empty-state). * If you would like to take a further look at how to set Conditional visibility we will highly recommend you take the [Conditional Visibility Course](https://appacademy.adalo.com/course/conditional-visibility-for-components) from [The Adalo App Academy](https://appacademy.adalo.com/homepage). ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) # Changing a Component's Visibility With Adalo, you can add logic to your components so that they are only visible when certain rules apply. *Skill Level: Beginner* ## Before You Begin * Have a basic understanding of [Databases](/database), [Screens and Components](/component-basics), and [Magic Text](/glossary#magic-text) * You do not need a paid Adalo plan to use this feature ## Walkthrough With Adalo, you can add logic to your components so that they are only visible when certain rules apply. For example, you may only want Admin users to see a button that lets them add new records. Or, you may only want some text to be visible if the certain data is not blank. ![](/files/-LinX0Mqqdto65qggBo1) To Change the Visibility of a Component: 1. Select a component 2. Click the More Menu icon (the three dots) at the top right of the left panel, and select Change Visibility 3. Select Sometimes Visible 4. Alter the visibility so that the component is only visible under certain conditions. You can learn more about filter and conditions in [this guide](/component-basics/conditions-and-filtering). {% hint style="info" %} For **Texts** the available options are: *Is equal to, Is not equal to, Contains* For **Numbers** the available options are: *Is equal to, Is not equal to, Is greater than, Is less than, Is greater than or equal, Is less than or equal and Is between* *For* **Toggles** the available options are*:* *True, False* For **Date & Time** the available options are: *Is after, Is before, Is between* For **Images** the available options are: *Is equal to, Is not equal to* For **Files** the available options are: *Is equal to, Is not equal to* For **Addresses** the available options are: *Is within, Is not within- Miles of, Kilometers of* {% endhint %} For example, take the vacation app we've been using to demonstrate different functions. Suppose it displays all planned trips, but we want a way to differentiate trips that are occurring soon from those that aren't. Above we have changed the visibility of the hourglass icon so that it's only visible for a particular trip if that trip is happening between the current day and a week from the current day. ## Help If you want to learn how to create an empty state— a screen that shows up when no data input matches filtering or search criteria— check out [this tutorial](/how-to/how-to-create-an-empty-state). If you would like to take a further look at how to set Conditional visibility we will highly recommend you take the [Conditional Visibility Course](https://appacademy.adalo.com/course/conditional-visibility-for-components) from [The Adalo App Academy](https://appacademy.adalo.com/homepage). # 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](/database) * You do not need a paid Adalo plan to use this feature ## Learn About Lists {% embed url="" %} ## Walkthrough {% tabs %} {% tab title="Simple" %} #### Sorting and Filtering Lists **1.)** Drag and drop a list to your app **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](/component-basics/inserting-dynamic-text)) #### Lists of Lists {% endtab %} {% tab title="Video" %} {% embed url="" %} {% endtab %} {% endtabs %} ## Example ![](/files/-LiURQqbmJBkbt_ruokV) 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 * [Social Media List](/how-to/how-to-set-up-a-social-media-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. ## Help {% embed url="" %} ### Pagination Custom lists can be paginated. Watch this video to learn more. {% embed url="" %} ### Learn More You can learn more about lists in our [Lists Course](https://appacademy.adalo.com/course/lists) from [The Adalo App Academy](https://appacademy.adalo.com/). # Sorting and Filtering Lists To change the way data is displayed in a list. If you want to make it so that your app only displays a particular subset of your data, you can create a data filter. For example, let's take the app we've previously been working on, which allows you to browse vacation spots. Suppose you input all of your data into a Trips Collection with many Properties, one of which is a True/False criteria describing whether or not the trip is public. Let's say for your app, you only want to display trips that are public. You also want to sort the trips from low cost to high cost. ![Steps 4 and 5](/files/-Lihtriuk_VEm6KcKRLZ) 1. Insert a list 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) After filtering, only the trips that had been tagged as public showed up in the preview. # Creating Custom Lists If you want increased customization, use simple components to build your own lists and buttons. *Skill Level: Intermediate* ## Before You Begin * Should have knowledge of [Databases](/database) * Should have knowledge of [Lists ](/component-basics/connecting-lists-and-forms-to-a-database) {% tabs %} {% tab title="Simple" %} Custom Lists give you access to add Adalo Components to your list items. Want to add a toggle? You can.\ Want to add an image to your custom list? Go for it!\ Want total power to take over the world? It's on our roadmap. 🚀 {% endtab %} {% tab title="In-Depth" %} ### Custom Lists ![](/files/-LiilsISjp8qYMyp4HGN) To create a custom list, instead of using one of the pre-made list components, build a screen by dragging in the list option from the simple components 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](/component-basics/inserting-dynamic-text)) ![](/files/-LiimHA-5b0QmNsvds8V) {% endtab %} {% tab title="Video" %} {% embed url="" %} Learn about Custom Lists in roughly two minutes. {% endembed %} {% embed url="" %} {% endtab %} {% endtabs %} # Lists of Lists *Skill Level: Intermediate* ## Before You Begin * It is not recommended to use Lists of Lists with External Collections. * Using Lists of Lists may decrease performance if loading large amounts of data from a collection. *** Adalo offers the powerful capability to create a List within a List. For example, in a trip planning app, you might want a screen that lists the days of the trip, and under each day, a list of that day’s activities. ![](/files/-Lml0uZ_Kx_NCWIU1Bzt) To create this list within a list, it's best to start at the base level and then build up. In this example our database has three collections: Trips, Days, and Activities. Days have a relationship property to Trips, and Activities have a relationship property to Days. 1. Add a Simple List to your screen 2. Set the List to be a list of Activities 3. Add a Text component above the Simple List that will serve as the Day header 4. Add an Add Activity button to the bottom of the Activities List 5. Now select the Simple List, the header Text, and the button components 6. In the Left Panel, click the "Make List" button 7. In the Left Panel, set the new list to be a list of Days 8. Set the Filter to be Current Trip Days 9. Now click into the header Text, and set the Magic Text to be Current Day Name 10. Now click into the Simple List and set its filter to be Current Day Activities ![](/files/-Lml202p4rjZPfheZjJ8) # Buttons Buttons are among the most versatile and customizable components in Adalo. They allow your users to Create and Update, or Navigate through your Adalo app with ease. ## Button Settings Each button you place in Adalo can optionally have text and/or an icon. You can easily remove the icon if you require a text-only button or choose whatever icon is appropriate for your use case. Similarly, if you remove all of the text from the button, the icon will be centered so you can have an icon-only button. Make sure to add click actions to your buttons so they perform a function. Buttons can be used to link to new screens, update records, perform custom actions, etc. ### Button Styles Buttons are completely customizable and can be styled to match your app's unique visual theme. There are four types of buttons: Text, Outlined, Contained, and Custom. You can see examples of each below. Custom gives you the greatest amount of freedom to control every aspect of your button.

Button Styles

You can also set your text and icon size, add a shadow, change your rounding and opacity, enable a hover effect, and enable/disable automatic uppercase text. Note that the hover effect is automatic based on the colors you've chosen. You cannot customize the effect beyond enabling or disabling it. Hover effects will only apply to buttons when viewed on desktop devices on the web.

Button text size options

## Setting Additional Button States To show different buttons based on various scenarios, enabled Additional State 1 and/or Additional State 2. It's important to understand when each state will show. Here's the breakdown of how it works: * The settings in the "Button" accordion will show by default. * Additional State 1 will override the default button styles if the logic you set evaluates to True when the user views the screen * Additional State 2 will override BOTH the default state and Additional State 1 if the logic you set evaluates to True when the user views the screen.

Buttons can have three unique states

Let's look at an example. Below, I have my default state, an additional state if the class is full, and an additional state if the user is already enrolled in the class. In this case, if the class is full and the user is enrolled, the "Enrolled" state will show since it is in Additional State 2, which overrules Additional State 1.

Setting up a button state

# Toggles Toggles can be used to control T/F Properties or Relationships or records in your Adalo Collections. ![](/files/-LmjB2rbl7wgvneJH9vg) ### Overview Toggles are a type of button that let your users quickly update data in your app. There are two common uses for toggle: * **Update a True/False property of a record** * e.g. if your Users collection has an "Is Admin" property or if your Trips collection has an "Is Draft" property * Clicking the toggle will update whether the Trip the user is viewing is a draft or not. * **Update the relationship between two records** * e.g. if your Trip collection has a relationship property called "Travel Party" that relates to multiple user records * Clicking the toggle can update whether the Logged In User is a member of the Travel Party or not ### Adding a Toggle 1. Click the "+" button in the left toolbar to open the add panel. 2. Scroll down and the expand the "Buttons" category 3. Click and drag the Toggle on to one of your screens 4. In the left panel configure the Toggle Settings 1. Select what should be toggled. You can select any True/False property for any available record on the screen, or any Relationship property that connects the available records. 5. Select the icons and colors for the toggle when it's True and When it's false. By default, the icons are for selected and empty checkboxes. ![](/files/-LmjAL101m5YuA_ZLNRc) ### Toggles in Lists Toggles can also be added to items in Custom Lists. 1. Click the "+" button in the left toolbar to open the Add Panel 2. Scroll down and expand the "Lists" category 3. Select "Custom List" and drag it on to your screen 4. In the left edit panel for the custom list, select which collection this is a list of 5. Scroll down and open the "Components" category of the list components settings 6. Click Add Component 7. In the Add Panel, scroll down and expand the "Buttons" category. 8. Click and drag the toggle into the first list item on your screen. 9. Configure the toggle as described above. You can toggle a True/False Property of the list item, or your can toggle whether the list item has a relationship to another available record on your screen. For example, if you are viewing a Trip, and the Custom List is a list of users, you can Toggle whether the user is a member of the Trip's Travel Party. ![](/files/-LmjE8o7eOqNl5y9qsKk) # Forms and Fields Forms and Fields are used to Collect and Update Data within Adalo. {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/-Li8qX2csEPm2GAiMQ7o" %} [Forms](/component-basics/forms-and-fields/how-to-create-and-edit-forms-and-fields) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/wcy0M26xSU1nSwb3fV5Z" %} [Text Input](/component-basics/forms-and-fields/text-input) {% endcontent-ref %} {% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/4ICmGdhoTwaqrL0xF98P" %} [Image Picker](/component-basics/forms-and-fields/image-picker) {% endcontent-ref %} # Forms Forms allow you to gather information from your users into the database. *Skill Level: Beginner* ## Before You Begin * Should have knowledge about [Databases](https://help.adalo.com/database) ## Walkthrough {% tabs %} {% tab title="In-Depth" %} ### Forms Forms are the primary way your users can create and edit records in your app's database. For example, if a user needs to create a new trip, you can send them to a screen with a form where they can fill out all the details of the trip such as name, description, date, etc. When you create a form, you will set which collection the form is for and whether the form is creating a new record or editing an existing record. If you select an Edit Form, then the fields on the form will be pre-populated with the current values, so the user can decide which need to be changed. ### Form Fields ![](/files/-LinYgu-dUiVe9AEDI6n) Each piece of information collected on a form is a field. A field saves data into a property in the collection you choose. By default, all collection properties are added to the form, except for relationship properties. You can drag the fields to re-arrange their order on the form. Clicking the trash can icon will remove any field you do not wish to include on the form. In the "Set Automatically" section, you can automatically set data that you don't want your users to manually fill out. * For example, in the app shown above, a user can plan a new trip using a form. All fields are visible in this case except for the trip creator and the privacy of the trip, which are automatically set. ### Submit Button You can customize the text of the form's submit button as well as edit its styles. It is also very common to add an Action to the submit button to link the user back to the screen they came from. {% endtab %} {% tab title="Video" %} {% embed url="" %} {% endtab %} {% endtabs %} {% hint style="warning" %} If using the User 'Password' field, it must be required or you will get an 'Action cannot be completed' error if it is left blank. As a best practice, we recommend using a separate flow when allowing a User to update their Password. {% endhint %} ### Watch a Video Watch a short video explaining how to create custom forms in the Adalo builder. {% embed url="" %} ## Help You can get a better understanding on how to set up forms with the [Forms course](https://appacademy.adalo.com/course/forms) made by Paul Okoduwa for the [Adalo App Academy](https://appacademy.adalo.com/homepage).
If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! # Text Input The Text Input Component allows users to enter data into your app. You can use the Text Input Component for many things including Custom Forms, Chat Boxes, or creating Custom Filters. ### Adding the Text Input Component Select the Text Input Component from the left panel under ***Forms & Fields*** and drag onto your screen where you can rename it for easy identification when using.
### Set up your Component #### Input Type Select the Input Type based on the use of the component.
The Input Type limits the characters and adjusts the keyboard based on your selection depending on the Device/Browser. Keyboard type is automatic and cannot be changed. * Normal - Accepts all characters. * Lowercase - Only accepts lower case characters. * Password - Masks input for user passwords. * Email - Shows email characters on Keyboard. * Number - Accepts integers, comma (as decimal), decimal, and dash. **(Will not accept both "," and ".")** #### Placeholder Add a placeholder. This gives your user a hint of what should be entered.
#### Default Value Enter the default value. This can be entered manually or pulled from MagicText depending on your use case.
### Edit the style of your Text Input You can edit the style similar to that of other components with a few specific options.
#### Max Length Max length will limit the number of characters that can be input by the user. After the limit is reached, no additional characters can be entered. #### Auto-Focus Auto-Focus will automatically select the text input for typing when the User navigates to the screen. This should only be selected for 1 Input Component per screen. ## Learn More * Text Input does not currently support right to left typing for languages in iOS Native Apps. * Use the Text Input to create a Custom Form for uploading data into your Adalo Collection. * Text Inputs will clear automatically after the data is used in an action. If the Data is not used in a subsequent action, it will remain until the device cache is cleared or the text is deleted manually. * If using Text Inputs to filter lists, you should only use each input 1 time to ensure it works as expected. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well! Looking for more features? Check out additional components available for purchase in the Adalo Component Marketplace! # Image Picker The Image Picker component lets users upload or capture images directly inside your Adalo app. You can use it for profile photos, product images, receipts, or any feature that needs user-supplied pict ### How It Works The Image Picker opens your device’s file picker or camera, depending on the **build type**, **operating system**, and **browser**. Once a user selects or captures an image, the file is stored in your database or used in your app flow. {% hint style="success" %} Camera and Gallery Permissions are prompted initially with no additional setup needed. {% endhint %} *** ### Expected Behavior Across Platforms Because the Image Picker relies on the device and browser APIs, its behavior varies: #### iOS * **Native App (App Store / TestFlight build)**:\ ✅ Users can select from **Camera** or **Photo Library**. * **PWA (installed or Web)**: ✅ **Safari (iOS)**: Users can select photo from **Photo Library, Camera, or Files** ✅ **Chrome (iOS)**: Users can select photo from **Photo Library, Camera, or Files** #### Android * **Native App (Play Store / APK build)**:\ ✅ Users can select from **Camera** or **Gallery**, using system camera APIs. * **PWA (installed via Chrome / other browsers)**:\ ⚠️ Users usually **only see Gallery (Photos or Albums)**\ The Camera option does **not appear.**\ ⚠️ Browser behavior may also differ by version (e.g., Chrome vs. Samsung Internet). *** ### Limitations & Workarounds * On **Android PWAs**, users cannot directly access the Camera inside the Image Picker. Instead, they should: 1. Take a photo with the Camera app. 2. Select it from the Gallery when uploading in your PWA. * If your app requires frequent camera use, we recommend distributing it as a **native build** rather than relying on the PWA version. --- [Next Page](/llms-full.txt/1)