Screens

Screens are the foundation of an app— generating and organizing different screens allows you to start building a custom user experience.

Adalo apps automatically start with Signup, Login, and Home screens

Creating a New Screen

There are two ways you can create a screen.

  1. From the Add Panel

    1. Click the "+" button in the left toolbar

    2. Select the Add Screen Tab

    3. You can then select a Screen Template for your new screen

  2. From a Link Action

    1. Select a component on an existing screen

    2. In the left panel, click "Add Action"

    3. Choose Link, then "New Screen..."

    4. A Modal will appear where you can set the name from your new screen and choose a Screen Template

Editing a Screen

  • To Edit a screen, click on its title on the canvas. The screen's properties will be visible in the left panel

    • Set the Screen's Name

      • Naming screens is an important step of creating your app— make sure your screen labels are clear and differentiated

    • Set the Navigation Type

      • Normal - This is what nearly all screens in your app should be set to

      • Welcome Screen - This is the first screen your users will see if they are not logged in or haven't created an account yet.

      • Home Screen - The is the screen you users will start on if they've already created an account on your app and are still logged in

    • Add Screen Actions

      • Most screen will not need screen actions, but there are certain cases where they can be very useful.

      • If you need to have a record automatically created without your user clicking or tapping anything, you can do this with a screen action. You can create one screen action to automatically create the record and another screen action to automatically link them to another screen.

    • Edit Screen Styles

      • Screen background color

      • Screen size

      • Status Bar text color (mobile only)

      • Reverse scroll

        • This is a common option for chat or messaging screens where you want the bottom of the list to be visible when the user gets to the screen and they need to scroll up to see earlier messages

  • To Resize a screen

    • Click the screen's name on the canvas and use the yellow drag handles on the corners of the screen to resize it.

  • To Move a screen

    • On the canvas, click and hold the name of the screen, then move your mouse to where a new spot on the canvas. It can be helpful when building an app to keep your screens organized into related groups so you can easily find each screen to make edits.

  • To Delete a screen by selecting the screen's title and pressing 'Delete' or backspace on your keyboard