Layouts and Navigation

This article with walk you through different types of page layouts and navigation;

Layouts

Following are the different layouts that you can use to build your apps.

  1. Page
  2. Menu
  3. Popup
  4. Panel
  5. Section Repeat

1. Page

This screen type occupies full screen on all Mobile, Web & Desktop clients. Please refer below image for sample illustration.

Note that Under Property > Info Tab, the Page type is selected as Page .

2. Menu

This Screen type is used to serve as a Menu to help navigate between multiple pages. This screen type can be opened and closed as a left sliding drawer on Mobile devices (Android & iOS) and remains open on the Web devices. Please refer below image for sample illustration.

Mobile (Android / iOS) / Tablet (Portrait)

Web / Tablet (Landscape)

Under Property > Info Tab, the Page type is selected as Menu :


Tip - Use Header - Left Icon, Navigation property to open Menu screen

3. Popup

This Screen type is used to serve as a Popup to notify the user or for displaying confirmation dialog before performing some action OR navigating to other screens. Please refer below image for sample illustration.

Under Property> Info Tab, the Page type is selected as Pop-Up :

4. Panel

Panel control is used when you want to group controls together for applying various Rules and Validation at once or it can be used when you want a different control layout depending on the screen size.
Currently, Panel supports 4 different Column width Configurations under the Properties tab as listed below -

  1. 320px - 640px
  2. 641px - 768px
  3. 769px - 1024px
  4. 1025px and above

As shown below, we have used 2 panels in a Screen where Panel1 is configured to have 2 columns for all different sizes, and Panel2 is configured to have 4 columns for screen width greater than 768px and 3 columns for width less than or equal to 768px.

Panel 1 Column Configuration

Panel2 Column Configuration

As you can see from the below Screenshot, the device with width less than 769px, Panel1 has 2 columns and Panel2 has 3 columns, with the 4th control going to next row.

Page width < 769px
image

Also, for devices having screen width greater than 768px, Panel1 has 2 columns and Panel2 has 4 columns as shown in the screenshot below.

Page width > 768px

5. Section Repeat

Section Repeat control is used when you want to repeat the same set of controls multiple times on a screen. Currently, only 1 Section Repeat Control can be added per screen. For example - you want to show an Inventory list to the user or Inventory review screen where you can use Section Repeat control.
For more information on Section Repeat control, you can refer Section Repeat Tutorial and Apply Formula to Section Repeat.

Navigation

The following are the different navigations that can be needed when building your apps.

  1. Navigate to Screen
  2. Navigate to URL
  3. Exit App

1. Navigate to Screen

Some controls which support this navigation type allow you to navigate to other screens on user click action. This navigation can be configured in the builder as Action to open any screen with any screen type - Page/Menu/Popup (With/Without) Validation.

2. Navigate to URL

Some controls which support this navigation type allow you to navigate to other webpages on user click action. This navigation can be configured as Action in the builder to open any Webpage.

3. Exit App

Some controls which support this navigation type allow you to exit this MicroApp and open Main App’s Home screen. This navigation can be configured as Action to exit this MicroApp.

You can check under property section for each control whether Navigation Action is available to configure Navigation Action and Below is the list of few controls which support various Navigation actions -

  1. Header - Left Icon | Right Icon | Secondary Left Icon | Secondary Right Icon
    Supports - Navigate to Screen, Navigate to URL & Exit App

  2. Action Button
    Supports - Navigate to Screen, Exit App

  3. Submit Button
    Supports - Navigate to Screen

  4. Navigation Menu | Grid Menu | Menu List | Menu Bar
    Supports - Navigate to Screen

  5. Navigation Button
    Supports - Navigate to Screen, Navigate to URL

  6. All List Controls - Advanced List | Carousal | Detail Card | List | Leaderboard | User List | Product List | Club List | Mini Card | Banner
    Supports - Navigate to Screen, Navigate to URL