Screens, Layouts and Navigation

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

Studio provides different layouts, screens, and navigation options for designing simple or complex MicroApps.

Typically we can identify the following features in Studio that enable you to easily design apps the way you want:

1. Screens
2. Layouts
3. Navigation

Screens

The different types of screens are the basic containers that you would be using to build your apps. Screens are basically containers where you would add layouts and controls and workflows to integrate tasks as a means to achieve certain actions. It can be a combination of some or all the different types of screens listed below.

  1. Page or Screen

  2. Menu

  3. Popup

  4. Tray

  5. Panel

  6. Form Multi-row

  7. Form Repeat

1. Page or Screen

This screen type occupies full screen on all Mobile, Web & Desktop clients. Please refer below image as a sample illustration. Note that Under Properties > Info Tab, the screen type is selected as Screen. You can add different controls on the Screen to design your apps.

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 or right sliding drawer on Mobile devices (Android & iOS) and remains open on the Web devices if it has been configured accordingly using the Sticky Menu Property for the specific Screen. Please refer to the below images for a sample illustration. It appears differently on the different scren types

image

Mobile (Android / iOS)

image

Web / Tablet (Landscape)

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

image

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

For a detailed understanding of the Menu screen type and its functionality, you can refer to this article here.

3. Popup

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

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

4. Tray

The Tray type of screen is similar to menus. While Menus are typically common across multiple screens within the Apps, the Trays can be triggered to appear on some actions like the click of Screen’s right or left icon. However, the difference mainly lies in the action it performs. The Menus are typically used for navigation from one to other pages while trays would be opened on the click event of a form control. Also, menus would typically cover a part of your page e.g 30% or so while trays will have max-width defined up to even 100%. Though either of them can be changed to cover larger areas, their basic appearance and functionality can be different to a certain extent.

For a detailed understanding of the Tray screen type and its functionality, you can refer to this article here.

5. 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. Columns on phone
  2. Columns on phone landscape
  3. Columns on tablet
  4. Columns on desktop

panel columns configuraton1

For each of the column widths on the different devices, the panels will appear as follows:
1. Columns on phone - potrait view

2. Columns on phone landscape view

3. Columns on tablet

4. Columns on desktop

6. Form multi-row

The Form MultiRow control is a Container control that lets you create a group of controls that can be input multiple times in the microapp by the user by using the add more button. The type of control is “section_repeat”.

The values from the form multi-row are stored iteratively as multiple rows in your sheets. It also enables you to arrange controls in several columns for the different screen sizes that your apps are permitted to be used. The Section box configuration and the Child as Column Configuration allow you to arrange the controls within the Form Multirow in the necessary hierarchy. You can set the number of columns for controls inside each form group for different screen sizes. You can select a value for 1 to 5 and that will configure the number of columns.

The Form Multi Row is typically useful where you have multiple rows of data to be added for the common field or row and want to add it in an iterative manner to your sheets.

For a detailed understanding of the Form Multirow control and its functionality, you can refer to this article here.

7. Form Repeat

The Form Repeat control is a Container control that allows you to add multiple controls. It is similar to Form MultiRow control with the only difference being the output. The output can be directly stored to a JSON column in the sheet in a single Row instead of iterating as we do for the MultiRow control.

The Type of this control for creating your layouts is a “ dhq_form_json ” type.

Similar to Form multirow control, it enables you to arrange controls in several columns for the different screen sizes that your apps are permitted to be used. The Section box configuration and the Child as Column Configuration allow you to arrange the controls within the Form Repeat in the necessary hierarchy. You can set the number of columns for controls inside each form group for different screen sizes. You can select a value for 1 to 5 and that will configure the number of columns.

Columns at 641 - 768 screen size with 3 column

image

This data would be stored as a JSON object in your JSON type column in your sheet.

Form repeat is typically useful when you want to add multiple rows of data for the same key and to store it as a JSON object.

For a detailed understanding of the Form Repeat control and its functionality, you can refer to this article here.

Layouts

We have seen a few controls that enable you to create meaningful and simplify cs complex forms. When designing forms you have to be aware of the user experience on desktop screens, mobile landscape and portrait screen, or even a tablet screen. Studio provides the Layouts feature in the Controls section. There are different layouts that allow you to design your forms in a multi-column format like One Column, Two Column up to Four Columns, as well as Left Sidebar and Right sidebar layouts. Other controls can be added to the layouts to enable you to make even a complex application easy to use on any kind of device.

Under the Layouts, you can see a container called as Layout, and then there are some more layouts from One Column up to Four Columns. These are the columnar layouts.

Layout: The Layout is a container to which you can add the other Columnar layouts like the One Column layout, the Two Column layout, and so on. The Layout container is of type “layout”.

Columnar layouts: The Layout as we have seen earlier is a major container to which you can add different columns. Studio provides you with several columnar layouts from one column to four columns. These columnar layouts are of type “columns”.

The Columns property of the columnar layouts enables you to define the number of columns for the different devices.

Thus the layout control and the columnar layouts are essentially containers for your other controls. For a detailed understanding of the layout and the columnar layout refer to this article here.

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