Adalo Resources
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.
    From the Add Panel
      Click the "+" button in the left toolbar
      Select the Add Screen Tab
      You can then select a Screen Template for your new screen
    From a Link Actionโ€‹
      Select a component on an existing screen
      In the left panel, click "Add Action"
      Choose Link, then "New Screen..."
      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 - This is the screen your 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
Last modified 3mo ago