Appery.io Screen Layouts

Adding a predefined screen layout saves your development time: the app page(s) will instantly get the needed UI.

Introduction

Appery.io Screen Layouts are ready-to-go-with pages (some are also provided with the integrated services) that are available to all Appery.io users in the screen layout selector window accessed from under the CREATE NEW > Page dialog and can be further customized according to your personal preferences.

Adding Screen Layouts

To create a new Ionic 5 app page (CREATE NEW > Page) with the predefined UI, select the needed layout from the list of out-of-the-box Appery.io screen layouts, name your page and decide if you need to define your routing now (this can also be done later).
Now, confirm your choice by clicking Create Page:

As many screen layouts as needed can be added to the app.

👍

The Appery.io team regularly releases new public screen layouts. To review the available layouts from Appery.io, in the Project view, click CREATE NEW > Page or browse the Screen Layout category of Catalog of Appery.io plugins.

Signup Screen Layout Sample App

Creating New Ionic 5 App

Let's now create a new Ionic 5 app with the predefined signup screen UI.

  1. Inside the platform, go to the Apps tab (if you are not there already).
  2. Click Create new app.
  3. For the app name, enter SignUpApp.
  4. Select the Ionic 5 > Ionic 5 Blank template and click Create:

In a few seconds, the App Builder for Ionic 5 will load.

Adding Signup Screen Layout

Now, let's add the Signup screen layout to your app.

  1. In the Project view, click CREATE NEW > Page:
  1. After you confirm creating a new page, the Signup page with the predefined signup UI will instantly appear under the Pages folder:
  1. Open the Project > Routing tab and set the default route to the Signup page:

You are now free to proceed with modifying the page/app according to your needs but you can already check what it looks like.

🚧

Important Note!

After adding the screen layout your app is not yet fully functioning until the corresponding logic/design has been added and this needs to be done separately.

Testing

To preview the page, click the TEST button in the App Builder Toolbar to launch the app in the browser: