Enhance your Control-Lib!

Intro

Today i want to show you a new custom control for UI5-applications. I let myself inspired by codrops once again (see Multi-Level Push Menu).

The idea is to create a responsive and multi-level menu, which is useful for visualize complex nested menu structures with many navigation items. This requirement will hit you, if you have to implement e.g an online store. And because place in UIs is very valuable, especially in mobile applications, this menu works with layered menu levels to provide a clear and smart user interface.

To get a better impression, please check out the following links.

View Demo

Get Source Code

Now i will explain you the details of my implementation. Your best be would be to have a look at the sources at github at the same time.

Implementation

Styles

After creating a new project in eclipse, i usually do similar steps to implement a custom control. If i want to port an existing control to UI5(like in this case), i transfer all CSS to a new file at first. In the case at hand, this file is menu.css. All other styles, which are not related to the control, are broken down in other files.

1. menu.css: Styles for the menu control
2. app.css: Common styles for the application
3. icon.css: Styles for CSS-icons, which can be used to beautify menu items

UI5 Controller and View

The basic structure of the UI5 application is very simple. As you can see in the following screenshot, we have just a controller and the corresponding (JS-)view.

1. app.controller.js: This file contains central navigation handling. When you click on a menu item, a custom event is fired by the control which can be processed in any part of your project, preferably in your application controller like in this case.
2. app.view.js: The menu structure, menu control and all other parts of the view are created here.

Multi-Level Menu Control

Now comes the really interesting part! All parts of the new control are placed in special directories (Screenshot). These directories are nothing more than an implementation of a namespace, so i can work with the UI5-statements jQuery.sap.require and jQuery.sap.declare.

1. resources/neko/control/MultiLevelMenu.js: This file contains the core logic. A big part of this JavaScript from the original codrops project was transferred in this file. Although, i had to change a few things, so we can use it easier in our UI5 environment.

1. I removed the framework classie.js and implement all class-based JavaScript manipulations via jQuery.
2. I removed modernizr.js, because no fallback for older browsers is implemented. That means, you can use this control only in current Chrome, Firefox, Safari and IE11. The usage of 3D Transforms (CSS) to create the transitions prevents a support in older browsers like IE9 (see browser support).
3. The original coding is working with many native JavaScript statements. That's of course not bad, but because we are using jQuery in UI5-projects anyway, i changed some coding parts into more compact jQuery statements.

2. resources/neko/renderer/MultiLevelMenu.js: This file contains logic for rendering the a bit complex and nested markup. I'm using here a so called render-class, which is an UI5 functionality for transferring all render-related code in a separate instance. This is very great to get a better overview in your actual control implementation.
3. resources/neko/element/MultiLevelMenuItem.js: Here we have a template for our menu-items. It is an extension of the standard UI5-Menu-Item and allows to create nested structures via submenues.

Usage

The Multi-Level Menu Item is at first a container control. That means, that all content, which you are going to display has to placed in this control (like sap.ui.ux3.Shell). Besides, you have to provide a valid (nested) menu structure, which is built out of the mentioned custom element above.

Besides, you can choose our of two display types. The first one (overlap) shows always the hierarchy of the menu level in the form of a scale, so it's very easy to go from a very deep level to one of the top levels. The second one (cover) show only the current menu level. If you want to give the user the possibility to navigate back to superior levels, you can activate back-links when creating the control. (This is also possible for the menu-type overlap).

I hope, this post and the corresponding source code will be useful for you. Thanks for reading!