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:
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.
Page or Screen
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.
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
Mobile (Android / iOS)
Web / Tablet (Landscape)
Under Property > Info Tab, the Screen type is selected as Menu :
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.
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 :
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.
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 -
- Columns on phone
- Columns on phone landscape
- Columns on tablet
- Columns on desktop
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
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.
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.
The following are the different navigations that can be needed when building your apps.
- Navigate to Screen
- Navigate to URL
- 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 -
Header - Left Icon | Right Icon | Secondary Left Icon | Secondary Right Icon
Supports - Navigate to Screen, Navigate to URL & Exit App
Supports - Navigate to Screen, Exit App
Supports - Navigate to Screen
Navigation Menu | Grid Menu | Menu List | Menu Bar
Supports - Navigate to Screen
Supports - Navigate to Screen, Navigate to URL
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
Now we have seen the different types of screens and forms that we have created within an app, you would be using them to build large and complex apps with different functionalities and users. You would thus be using multiple types of resources and packaging them to be launched to the Marketplace. To make it simpler you can create Folders within your App and arrange the screen within the folders. Folders can typically be based on functionality, version numbers, and so on.
To create folders in your Apps, you can go to the Screens > +Add and under Options, click Folders. The folder gets added.
Now you can drag your screens and drop them to the appropriate folder. Similarly, you can also move the screens / resource from one folder to another as well.
Add screens directly to the folder
You can directly add the different screens to the folder.
- Go to the Folder and click + (add) to see the list of screen Options that you can add.
- Select one of the screen types like Screen, Menu, etc. and it gets added to the Folder directly.
You can make changes to the folder name or even delete the folder using the Edit Folder option.
- To make changes click More options (three dots) for the respective folder.
- Under Edit Folder, make the necessary changes to the name and click Save.
- To Delete the folder, simply click Delete and the folder is deleted and the different screens inside the folder are brought to the outer level.
You can thus make use of the Folders to ensure a clutter-free and logically organized arrangement of your App resources.