Multi-Level Menu Control for UI5
Enhance your Control-Lib!
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.
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.
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.
- menu.css: Styles for the menu control
- app.css: Common styles for the application
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.
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!