Using Menus

There are different screen types that we have seen. One of the functionalities that is commonly used for any app is the Menu. Menus generally make the apps more user-friendly. They are more flexible and provide users an easy way to navigate and interact within the application. The menu is usually available across multiple screens as well and presents easy navigation from any screen. It will provide a basic common hierarchical structure to navigate across screens.

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 you have set the Sticky Menu property for the respective menu.

image

Adding Menus

Under the Studio console you can find the Screens > Add screen and select Menu. This adds the Menu type screen.

add menu

You can then add the Menulist or Grid Menu from the Controls section.

Under the Info, there are two important properties that are defined for the Menus as follows:

  1. Open From: Specified the direction from where the menu is to be opened on the linked page. It can be from left or right.
  2. Width on Desktop: Specifies the percentage of the area occupied by the Menu on the Desktop view. For others it will be more than 50% space occupied by default.

Properties

Header properties

You can customize the look and feel for the menu with the respective header and footer settings in case you want the header of the menu to be displayed. Under Page, click Header to view the Header Properties.

  • Visibility: This is used to specify whether the header should be visible or not. Toggle ON to set it to visible.
  • Classic Header: This specifies the type of header, whether you want to keep it Classic type or any other way.
  • Border color: Choose the color or add the color code for the header borders.
  • Background color: Changes the background color of the header sections. You can select from the available list or choose a custom color.
  • Dark Theme: Enable or disable to select whether to take as a Dark theme.

Here you would also find the other properties to specify the Left icon , right icon, main heading, sub heading and so on for the Menu. You can make use of them as per your application.

Body properties

body settings

After the Header Settings you can move to the Body settings.

  • Control spacing: Is the space to be maintained between two controls added on the menu screen in pixel (px) and other options available…
  • Padding: Is the padding to be maintained from the page border in pixel (px) and other options available.
  • Background color: Is the theme color to be used for the body part of the control.

Footer Properties

This specifies the properties for the footer for the menu.

  • Visibility : Toggle on or Off to specify whether to display the footer or not.
  • Control spacing: Specifies the spacing between two controls in the footer section.
  • Background color: Enables you to change the background color of the footer sections
  • Border color: Enables you to change the color of the footer border.
  • Padding left / right: Is the padding to be maintained to the right and left in the footer elements.
  • Padding top / bottom: Is the padding to be maintained to the top and bottom within the footer elements.

Actions

These are the Page Actions on opening or closing or resting of the page.

page actions

You can have the steps that include either communication, navigation, submission or some other custom actions on either of the actions.

Adding a menu list

Now that you have seen how to add the Menu page which is the container for the menu items, you need to design a menu list that would reflect the actual navigation and links to the pages of your app.

So from Controls > Navigation, add Menu List or Grid Menu. For this example let us add a Menu List.

Refine the menu list as per your ap. Add the Item label, add the navigation Action, provide the page to Navigate to, Transition, Menu Image URL, Nav icon and whether to Reset Target Screen.

For a detailed understanding of the Menulist control, you can refer to this article here.

Add a menu to your base screen

Now that you have a menu ready you can add it to your pages. Let us take a sample screen here to which we want to add the menu.

Now go to the Sample screen Header properties. Here you can add the Left icon or Secondary Left icon to add a Menu icon that would open the Menu that you have added. Add Action as Navigate, and set the Navigate to as the respective Menu, with Menu_general for the sake of this example here.

This will allow you to open the Menu every time you click on the Menu icon.

Additionally, you can add the Menu under Page Info > Sticky Menu page and set the Transition as required. This adds the menu to the page in the Desktop and Tablet view.

Now when you run the Sample screen form on a Desktop, you would have a similar look and feel as seen in the Designer above.

You can thus make use of the Menus effectively for Navigation and use them across multiple screens of your application.