Creating Pages

A page is the building block of a mobile app. It is used to display or collect information. In the case of the latter, it is called a form. Miracle Mobile Platform allows you to create your own set of pages as well as add default app pages.

Through MiracleStudio, you can select and define the most suitable type for the pages you include in your app. There are two sets of pages you can add to your app: Custom Pages and Default App pages.

Custom Pages on the platform are categorized into two types: Container Pages and Content Pages.

Container Pages

Pages under this category cannot be viewed, which is why they do not have controls added to them. Their main function is to act as containers of sub-pages, arranging them and displaying them in an order respective to their type. The following are the Container Pages offered through our platform.

  • Navigation Container – This type of container acts as a navigation stack, sorting its sub-pages as well as the other pages they navigate to. It adds a top navigation bar to each page displayed on the app. Therefore, users can go back easily by pressing their devices’ Back Keys or tapping the back button on the navigation bar.
  • Tabbed Container – This container arranges sub-pages in a tabbed format, i.e. each page appears as a tab on top. Users can simply tap the tab’s button to access that page’s content.
  • Carousel Container – This type of container displays sub-pages as a carousel slider. Users can swipe left or right to navigate through these pages. As a carousel container only supports the ability to scroll from one page to another using swipe gestures, it does not add specific UI elements to the screen.

Content Pages

Content pages are the simplest type of pages. The only UI elements they include are the controls added through the designer view. The following are the Content Pages you can create through MiracleStudio.

  • Login Page – A login page allows you to customize the app’s content according to user roles and increases the security of the data stored by the app. It is the first page that will appear to users of the app. After successfully logging in, users will be sent to the home screen, to the categories they are allowed to access and/or interact with.
  • Navigation Content – These pages are to be added to a Navigation Container.
  • Tabbed Content – These content pages will be added to a Tabbed Container.
  • Carousel Content – These pages will be included in a Carousel Container.

To create a custom page, use the steps below.

  1. Select ‘Pages & Forms’ and click the ‘Create New Page’ button at the top right corner.
  2. Enter the following fields:
    • Display Name – This is what users will see while interacting with the app.
    • Internal Name – This is used internally within the application. It should not include spaces or special characters (except for dashes ‘-‘ and underscores ‘_’). It should also not begin with a number.
    • Page Type – From login pages to content pages and all the way to container pages, you can define the page type suitable for the page’s purpose.
    • Categories – The page you are creating can be used by a category or multiple categories. So, select the category/categories you wish to include the page in.
    • Background Image – Select from the assets already added to the app or include another by pressing the Media Gallery button followed by Add Assets.
    • Background Color – Choose a background color using the color selector.
  3. Click the ‘Advanced Button’ to view the following options and customize them accordingly.
    • Preload – Checking this option will ensure that the page is preloaded before it is opened. Therefore, it is feasible for pages that are highly likely to be accessed. Keep in mind that the more pages you preload, the more the time the app will take to start.
    • Active – Checked by default, this option allows the app to access the page. You can uncheck it while the page is under construction or if you do not wish to use the page, but do not want to delete it yet.
    • Show Loader – Checking this option will show a Load Progress Indicator while the page is loading. This is useful for large pages that need more time to be properly loaded. It also assures users that the page is loading rather than causing them to suspect that the app is malfunctioning.
    • Confirm on Page Close – Choosing this option will allow the app to confirm with the user before they close a page. This feature is especially needed for long forms or those that require sensitive data.
  4. ‘Permissions’ is also under the Advanced section. Through it, you can determine who can view this category and/or interact with it. You can either list the users by name or by their roles.
  5. Scroll up to save the properties of your new page.

Miracle Mobile Platform provides the following customizable default app pages to give your app a more professional touch.

Intro Carousel Pages

Intro Carousel pages are displayed when the app runs on a user’s mobile device for the first time after being installed. Shown only once in an application’s lifetime, these pages aim to inform and educate users about the app they will be using while configurations, application definitions, and media assets load from the Miracle Cloud.

Intro Carousel pages are tightly coupled with the Miracle App Shell. Therefore, you cannot configure these on your own using MiracleStudio. If you wish to customize your app’s carousel pages, contact us to create a custom app shell for you.

Categories Page (Home Screen)

If you did not configure a page to be your default landing page, the Category Screen will be the first page users see after logging into the app. It is where all the categories you created will appear. Depending on your app’s configuration, clicking a category will either open a list of pages or forms under that category or directly open a specific page.

You can customize the following aspects of the Categories Screen:

  • Appearance of Categories (list view or grid view)
  • Category Image, Background Color, Font, and Header Background

Category Pages and Forms List

Another valuable feature Miracle Mobile Platform offers is allowing users to download application data on first click instead of downloading all forms and pages at the time of login. This ensures a better, quicker user experience and saves mobile device data consumption. Pages that are yet to be downloaded from the cloud appear in a list and are denoted by a cloud icon.

If you wish to customize this page, you can define the text color, font and background color properties.

Application Settings Screen

The Application Settings screen is one of the system screens used in all Miracle Apps. Its main purpose is to configure and locally store device configuration settings. However, users can also access it to update their application from the cloud or to pre-download pages and forms for faster use.

Data Sync Screen

Another system screen, Data Sync lists down the entities configured in MiracleStudio. Through this page, users can sync their data to and from the cloud. They can also find out when the entities were last updated and decide whether to upload or delete the submitted items that are still in the Pending Queue.

Pending Queue

Accessible through the Data Sync screen, the Pending Queue screen lists down the forms that had been submitted through the app, but are yet to be synced to the cloud or backend ERP via a connector. While the queue has been designed to process forms automatically after a certain period of time, users can directly submit them through this page. Users can even cancel their forms’ submission altogether. You will not be able to customize this page as it uses the generic customization settings for background image, color, and text color.

Form Drafts

The Form Drafts page is where forms that were saved as drafts will appear. Users can choose whether to further edit these forms before submitting them or simply delete them. You will not be able to customize this screen as the Form Drafts page uses visual styles from the generic settings for App Shell UI.

Notifications

The Notifications List Page displays the notifications generated for the user. While the page itself uses generic settings, you can configure the text, action, and other aspects of notifications via the admin panel.