Layouts

  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.

Under Property Tab, below Info Tab, Page type is selected as Page as shown below -

2. Menu

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

Mobile (Android / iOS) / Tablet (Portrait)

Web / Tablet (Landscape)

Under Property Tab, below Info Tab, Page type is selected as Menu as shown below -

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 user / showing confirmation dialog before performing some action OR navigate to other screen.. Please refer below image for sample illustration.

Under Property Tab, below Info Tab, Page type is selected as Pop-Up as shown below -

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 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 differnt sizes and Panel2 is configured to have 4 columns for screen width greater than 768px and 3 column for width less than or equal to 768px.

Panel1 Column Configuration

Panel2 Column Configuration

As you can see from the below Screenshot, 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


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 same set of controls multiple times in a screen. Currently, only 1 Section Repeat Control can be added per screen. For example - you want to show 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

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

1. Navigate to Screen

Some controls which supports this navigation type allows you to navigate to other screen 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 supports this navigation type allows you to navigate to other webpage on user click action. This navigation can be configured as Action in the builder to open any Webpage.

3. Exit App

Some controls which supports this navigation type allows 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 are 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
Did this answer your question?