Using Trays

When you are designing applications there are different components that can be used to make the entire application interactive as well as easy to navigate and use on any device. You might have already used the menus that are typically used across multiple forms to enable ease of navigation. Studio also provides the Trays type of screens that are similar to the menus for navigation but enable you to add controls for simple input actions and not just for triggering navigation. For example, the filter trays that appear on the Online Shopping Apps. Note that they appear like menus but have various controls like dropdown lists, radio buttons, action buttons and so on that are used to apply filters.

This Screen type is used to serve as a Tray to help undertake actions linked to the base page. You would be opening the tray usually with the click of one of the controls of the base forms. You would navigate back to the base screen once the respective action on the tray is performed.

Adding Trays

Under the Studio console you can find the Screens > Add screen. Now here, select Tray. This adds the Tray type of screen. The Tray screen is added.

add tray1

You can now add the necessary controls from the Controls section.

Under the Info tab, there are two important properties that are defined for the Trays 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, right, top, or bottom.
  2. Width: Specifies the percentage of the area occupied by the Tray on the base screen.
  3. Max width: You can specify the maximum percentage width the tray can occupy compared to the base screen.

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 settings.

  • 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, subheading and so on for the Tray.

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 resetting 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 tray items

Now that you have seen how to add the Tray page which is the container for the other controls, you simply need to choose them and arrange them to your Tray.

For this example of an online shopping app, let us add a filter tray. We will add a few controls to the tray as seen in the illustration here.

Each of the controls would have their own properties that you need to set depending upon your scenario. Thus your tray is now ready.

Add a Tray to your page

Now that you have a Tray ready you can add it to your pages. Let us take the Sample screen for online shopping here to which we want to add the Tray.

To this screen, we would add a Left Icon which would be a Filter Icon and add the Tray name to navigate to for this Left icon. So now whenever you click on the Left icon, the tray is opened, where you can make your selection and then move to the next step.

The Trays and menus are similar. However, the only difference lies in specifying the width, and max-width the tray covers your base screen. Unlike Menu it cannot be added as a sticky menu but needs to be added as a page to Navigate to on the base screen. It could be from the left / right icons or even triggered as a control action, for example on click of Action button. You would often go back to the base screen on the completion of the action on the trays.

Thus you can now effectively make use of trays to achieve different operations and actions linked to the base screen using the Trays type of screen.