Side Menu Configuration – Applicaster Support

In the previous articles, we have learned how to Configure the Navigation Bar for our app, and even how to set a different Navigation Bar per screen.

In the following article, we will learn how to configure the Side Menu navigation in the app.

Purpose

The Side Menu plugin is the navigation menu for any new app. It is written in Native code both on android and iOS platforms, and is supported in all device sizes (iphone 5 and above, ipads, android smartphone and tablet fragmented device sizes).

The Side Menu has a basic 1-level appearance (discussed in this article), and also a 2 level menu, in a form of a cascaded UI.

For more information on the 2-Level Side Menu click HERE.

The Side menu supports Right-to-Left (RTL) text mirroring.

Step by Step Customization

1) Navigations Tab -

Go to the Navigations tab (Note that the Side Menu Plugin, controlling the side menu, is added to all new apps by default).

2) In case there’s already a different menu configured and you would like to shift to a different type of Side Menu, you will need to delete the existing menu and choose the side menu from the presented modal.

For example: From a "2-level side /or/ from a "Bottom Tab Bar" menu-navigation, to a 1-level side menu

3) Once you've selected the relevant navigation, Click on it, in order to configure its' contents.

Once inside, you will see the Left-Pane, Preview-pane, and Right pane:

i- Left Pane - On the left pane, you will add the menu items that you’d like in your menu. The menu items that are available can be added by clicking the ‘Add Item’ button on the bottom part of left pane.

Home Screen -

Make sure your Home screen appears in the menu items of your navigation. Otherwise your app won’t show anything or crash.

Add a screen to the menu items, and target the ‘Home’ screen. The Home screen of the app is defined in the Screens Section by a switching ‘on’ the ‘Home’ toggle in any of the existing screens.

Note that only one Home Screen is available in an app. This is achieved by activating the "Home" toggle for any of the screens.

a. Note that if you have activated the "Home" toggle to a screen that is not part of your Side Menu items, the app will Not display this screen, and might even crash. Be sure to have the indicated ‘home’ screen in the Navigation Menu items too.

You may order your menu items according to the order you’d like them to appear in your app. Simply drag-and-drop, and then click on "Save".

ii- Preview/Canvas pane -

The canvas on the center shows a preview of the Side Menu in a certain configuration. Note that there are many custom parameters that could create a different preview for the menu. These will not be showcased in the preview, but rathe only in your app. Please mind the preview is not interactive and does not show each change done on the right Inspector. It is intended to show the availabilities of a certain screen and/or components.

iii- Right Pane -

The Inspector presents the general customizable parameters of the menu. When clicking on a menu item, it will present each item’s customizable parameters.

General Customization

Below is an explanation for each label within the Right Pane of the Selected Navigation:

STYLES

Background Color: The color you picked will be applied on the status bar till the bottom edge of the screen on iOS, and below the status bar on Android. Note the text and icons on iOS is defined in the app version settings (dark / light). On Android it is defined in the Styles section.

Item Background Color: The background color of a menu item.

Selected Item Background Color: Once a menu item is selected it can be assigned with a color.

Title Color: The font color of menu item, applied for both platforms on all devices.

Title Selected Color: The font color of a selected menu item, applied for both platforms on all devices.

iOS Font & Size - The fonts used for non selected titles. The fonts available are system fonts and fonts that were uploaded in the General Settings of the app. Applied both on iPhone and iPad.

iOS Selected Item Font & Size - The fonts used for selected titles.

Android Font & Size - Same as iOS, but for Android, applied both on Smartphone and Tablet.

Android Selected Font & Size - Same as iOS, but for Android

ASSETS

Arrow - The arrow is used to indicate the selected menu item. The uploaded asset size is as indicated: W 63px x H 63px. This is a 3x asset.

Expandable Icon: This icon is for the nested menu item. It is used for indicating a nested menu. Once tapped, the list of menu items that are nested are revealed. The uploaded asset size is as indicated: W 63px x H 63px. This is a 3x asset.

Expanded Icon: This icon is when the nested menu item is expanded. Once tapped, the expanded list of menu items will collapse and hide behind the nested menu title. The uploaded asset size is as indicated: W 63px x H 63px. This is a 3x asset.

Item Configuration

Each menu item is added by clicking the ‘add item’ button on left pane.
Each menu item can be renamed on the top right inspector.
Each menu item, except the header can receive an icon. The icon is sized W 168px x H 168px (3x).
1. The current menu items that can be added to the Side Menu are:
  a. Screen - The Screen item will offer a choice to target a screen from the existing ones. When choosing a connected screen, another dropdown is prompt to choose the feed which will populate the connected screen.
  b. URL - The URL item enables triggering a web link or a screen that is triggered via a URL Scheme:
  i. The web link will open up in the Applicaster web view.
  ii. The URL scheme screen, will open up the way the screen is defined to be displayed in the URL scheme itself. Note that if the screen is pushed, the current navigation bar will be apparent, and the button for that URL scheme screen will be active, hence a non desired loop behavior will occur. Avoid triggering a screen with a url scheme that is displayed in a push manner.
  c. EPG - This EPG screen is the single channel EPG. Style and Assets are configured as usual using the relevant keys in the SDK, programs are defined in Applicaster2 CMS.
  d. Settings - This Settings screen is the ’includes the option to connect social connectivity, legal terms, contact by mail, about the version and more. Style and Assets are configured as usual using the relevant keys in the SDK. Configuration is done in Applicaster2 CMS.
  e. Nested Menu - The nested menu allows to have a 2 level menu. It opens up in a new view. Returning to the 1st level menu is via a back button.

Build

Remember to build the version for any new plugin you add. To avoid building the version each time you swap between menu plugins, add the desired ones to your version by swapping them in the builder, or by adding them in the plugin section in zapp, and create a build, when they are all included. Then you could change and preview plugins without a build.

Existing apps: moving your app to the builder

All Existing UI Builder apps and Template apps that use the legacy side menu, will not be affected by this plugin. Configuration will not be done from the builder, but in Applicaster2 CMS and in Zapp SDK. In the app’s version settings, the UI Builder Root API will be unchecked.
1. In case of moving an existing app (UI Builder / Template) which is using the legacy side menu, to the UI builder’s side menu plugin, please do the following:
  a. Duplicate the versions (iOS and Android) of your app in which you would like to use.
  b. Go to the General Settings of your new version and check “Use UI Builder Root API”. That would enable the configuration of the new side menu plugin, and ignore for this version any configuration done in Applicaster2 CMS.

RTL

When an app is defined as a RTL (in general setting), the 2-level menu will be partly mirrored in its configuration.

Text - RTL alignment
Note that the Side Menu Drawer will still be opened on the left hand of the app.

2-Level Side Menu -

In this article, we have learned how to setup and configure the Side Menu in the app. The following article will explain how to do the same, but with a 2-level side menu.

For more information on setting up and configuring a 2-level side menu, click HERE.