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:

536536

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

Available Screen Layouts

Currently, the following screen layouts can be added to your app(s):

About Us

Select to add the screen layout with the predefined About Us page:

463463

🚧

Note!

If you are adding the layout to your app that already has some pages and would like to test how the added page(s) look(s) like, make sure to indicate the correct routing path under Project > Routing, then save and click TEST:

15861586

Camera

Screen layout with predefined camera functionality that includes the dedicated CameraScreen page and CameraService with the added Camera_Impl script;

15911591

🚧

Note!

To use the Cordova camera service, you need to run the app on the device.

To review how it works on the device you can select whether you would like to use our Appery.io Tester app or proceed with exporting your app for Android or iOS with further installing it on a device.

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

Chat

Add this screen layout to get the preset chat functionality to your app:

465465

Loading

Screen layout with loading functionality:

463463

Login

Select to add the screen layout with the predefined user login functionality:

463463

Messages List

Screen layout with the predefined List page:

463463

Products Details

Select this screen layout to add the preset ProductDetails page that contains the predefined Rating custom component:

463463

Products List

This screen layout is added with integrated Products screen that also contains the predefined Rating custom component. Also, it allows reordering how you would like to view the items together with marking them as favorites:

463463

Profile

The Profile screen layout comes with the preset Profile page combined with the predefined FileReadService functionality:

469469

QR Code Generator

To add the QR code generator functionality to you app, us the predefined QR Code Generator layout containing the QRCodeScreen and presetQRCode custom component:

463463

👍

Want to know more?

You might also like this tutorial that explains how you can create an Ionic 5 app with the QR code generator functionality from scratch.

QR Code Scanner

Select to add the screen layout with the dedicated QRCodeReader page and BarcodeScannerService with the added BarcodeScanner_Impl script.

🚧

Note!

If you are adding the layout to your app that already has some pages and would like to test how the added page(s) look(s) like, make sure to indicate the correct routing path under Project > Routing, then save and click TEST:

15911591

🚧

Note!

To use the Cordova camera service, you need to run the app on the device.

To review how it works on the device you can select whether you would like to use our Appery.io Tester app or proceed with exporting your app for Android or iOS with further installing it on a device.

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

Search

Add this screen layout to embed the ready-to-go search functionality into your app:

463463

Signup

Select to add the screen layout with the predefined user signup functionality:

467467

For more details of how to do it, please refer to this document section.

Slider

The Slider screen layout comes with the preset Slider page containing four slides:

463463

👍

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:
923923

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:
600600
  1. After you confirm creating a new page, the Signup page with the predefined signup UI will instantly appear under the Pages folder:
15991599
  1. Open the Project > Routing tab and set the default route to the Signup page:
15921592

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.

App Testing

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

500500