2-Level Side Menu Configuration

In the previous 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 m

Purpose

The 2-Level Menu plugin is a full view navigation menu that allows nested items. It is written in React Native and is supported for both android and iOS platforms on all device sizes (iphone 5 and above, ipads, android smartphone and tablet fragmented device sizes). The 2 Level Menu allows many customizing possibilities, including RTL mirroring.

Step by Step Customization

1. Any new UI Builder app will have the Side Menu plugin by default. To change it to the 2-level Menu plugin, delete the existing Side Menu (or any other if used) and choose the 2-level Menu from the presented modal:

2. Click on the 2-level Menu plugin to customize it.

3. Left Pane -

On the left pane, you will add the menu items that you’d like in your menu. These are the current types of menu items that can be added, as seen when opening the modal from the ‘Add Item’ button on the bottom left pane.

a) Home Screen - Add first a screen, and assign it as ‘Home’ to view any UI on your app. The Home screen of the app is defined in the Screens Section by a switching ‘on’ the ‘Home’ toggle in any one of the existing screens. Only one Home Screen is available in an app.

   i- Note that if you have indicated a ‘Home’ Screen to a screen that is not in your Menu items, your app will not show anything / crash. Be sure to have the indicated ‘home’ screen in the Navigation Menu items too.

b) Order - You may order your menu items according to the order you’d like them to appear in your app.

4. Canvas -

The canvas on the center shows a preview of the 2-level menu in a certain configuration. Note that there are many custom parameters that could create a different style for the menu, that is not previewed here, only on your app. Please mind the preview is not interactive with each change done on the right Inspector.

5. 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:

Rules

1. Screen Transitions - The transition in which the menu will appear once tapping on the menu button from the navbar.

Styles

1. Background Type - You could choose to have an image or a color background for the menu.

a) 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.

b) Image - If you want a background image, upload an image in the specified size: W 500px x H 890px. The aspect ratio of the image is 16:9 and it should not exceed 400k approximately, in order for the image to load quickly.

2. Alignment - Choose between Left and Center alignment. There are style differences between the two, such as the length of the separator line, the indication of a selected item. We recommend not to use icons for menu items on the Center style.

Left Align:

Center Align:

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

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

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

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

7. iOS Font - The fonts used both for non selected and selected titles. The fonts available are system fonts and fonts that were uploaded in the General Settings of the app.

8. Android Font - Same as #7, but for Android.

9. iOS Font Size - Applied both on iPhone and iPad.

10. Android Font size - Applied both on Smartphone and Tablet.

11. Header - The header is differentiated from the menu items, as it is a header to them, when used. It is customizable in color, iOS font and size, Android Font and size. It is not clickable.

12. Separation line Color: You can choose to show a separation line or not, by applying opacity to the chosen color. As mentioned, its length varies between the two styles.

ASSETS

1. Arrow - The arrow is used for the nested menu item. It is used both for indicating a nested menu, as well as the ‘back’ button from a nested menu view. The uploaded asset size is as indicated: W 144px x H 144px. This is a 3x asset.

2. Close Button - Is seen on the top right hand of the menu to close it. Size of button: W 114px x H 144px. This is a 3x asset.

Item Configuration

1. Each menu item is added by clicking the ‘add item’ button on left pane.

2. Each menu item can be renamed on the top right inspector.

3. Each menu item, except the header can receive an icon. The icon is sized W 168px x H 168px (3x).

4. The current menu items that can be added to the 2-level menu:

   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 default ‘EPG’. Style and Assets are configured in the app version Styles and Assets sections.

   d) Settings - This Settings screen is the default ‘Settings’. Style and Assets are configured in the app version Styles and Assets sections.

   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.

   f) Header - The header can be used to title a few other menu items. You can give it a different font and size to differentiate it from the rest of the menu items. It is positioned in the bottom of its container to space it from the menu item above it.

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

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

2. In case of moving an existing app (UI Builder / Template) which is using the legacy side menu, to the UI builder’s 2-level 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 2-level 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 mirrored in its configuration.

1. Text - RTL alignment

2. Mirror Styles:

   a) Transitions: Screen `Sliding from Left` will `Slide from Right` and vice versa.

   b) Alignment:

     i- Right Align, title will be aligned right on the screen and icons will be positioned to their right.

     ii- Center Align, icons will be positioned to the titles’ right.

3. The nested menu item will be mirrored, and be pushed from left to right.