Extend SideNavigation to allow Multi Levels in SAPUI5 – A Step by Step Tutorial – Part 1

SAPUI5 Standard Controls are quite appealing in appearance and functionality. But sometimes you may need functions which are beyond the standard functionality. SideNavigation is one of these controls. It has a nice look and feel and a nice sliding effect. But it allows only two cascading levels, which is not enough in much cases.

So, in this blog post we will extend SideNavigation control to make it allow multi levels (as many as you want). This blog post consist of three parts. In Part 1 we will explore the standard SideNavigation control and create a two level menu programmatically. I Part 2 we will extend NavigationListItem to make the SideNavigation multi level. In Part 3 we will adjust the look and feel of our extended control and add some additional functionality.

You can clone the entire project from GitHub SideNavigationExtend .

This is what we will get at the end of this tutorial:

The outline will be:

Part 1:

1. The Key Point

2. Create SAPUI5 Application Project

3. Adjust the Resource Roots

4. Create the standard SideNavigation

Part 2:

5. Extend NavigationListItem Control

Part 3:

6. Adjust XNavigationListItem

7. Fine-tune Look and Feel

8. Adjust Button Tap Event for Final Level

We have lots of things to do, so lets start 🙂

1. The Key Point

SideNavigation has NavigationList as its aggregation. This aggregation has 0..1 cardinality, which means there is at most one NavigationList in a SideNavigation. (multiple: false)

And NavigationList has NavigationListItem as aggregation which has 0..n cardinality. (multiple: true)

Finally, NavigationListItem has NavigationListItem (itself) as aggregation. In the SAPUI5 API Reference it says this aggregation is 0..n. This means you can place as many NavigationListItem as you want inside a NavigationListItem, and it is true. But the strange thing here is the API Reference does not specify the level. How deep can we go by placing NavigationListItem inside NavigationListItem. This is not stated, and in fact the answer is two levels. We can only create two level menus with standard SideNavigation. (You will see the reason when we extend the renderer.)

You can see the documentation here: SideNavigation API Reference

In the image below, you can see the Standard Structure of SideNavigation and the structure we will achieve after we extend the control.

So now, we know where the key point is (NavigationListItem), we will concentrate on this. More precisely, we will extend NavigationListItem to allow multiple aggregation level to itself.

2. Create SAPUI5 Application Project

To begin with, lets create a project in SAP Web IDE. Right click on the Workspace and select Project From Template. Select SAPUI5 Application from the template list and click Next. Enter the Project Name as “SideNavigationExtend” and Namespace as “sap.demo” and click Next. (We will use this namespace quite a lot.)

In the next screen select JavaScript as View Type and “App” as View Name.

Click on Finish to create your UI5 Application. Web IDE will create all the necessary structure for you.

In the webapp folder create a folder as “controls”. We will keep the extension files in this folder.

Why jsview?

We chose JavaScript (jsview) instead of XML view, because we will create SideNavigation and its childs programmatically.

3. Adjust the Resource Roots

We will edit the resourceroots in the index.html, App.view.js, App.controller.js, Component.js and manifest.json files. (I don’t know the reason, but Web IDE concatenates the Project Name into the namespace. That’s why we change it. If your version does’t do this, you can skip this section.)

Open index.html file. Change the “sap.demoSideNavigationExtend” to “sap.demo” in the data-sap-ui-resourceroots inside the script tag in the head area of html page.

old: data-sap-ui-resourceroots='{“sap.demoSideNavigationExtend”: “”}’

new: data-sap-ui-resourceroots='{“sap.demo”: “”}’

And change “name : “sap.demoSideNavigationExtend”” attribute to “name : “sap.demo”” in the new sap.ui.core.ComponentContainer constructor.

Open App.view.js file. Change “sap.demoSideNavigationExtend.view.App” to “sap.demo.view.App”.

Open App.controller in the webapp->controller folder. Here, change “sap.demoSideNavigationExtend.controller.App” to “sap.demo.controller.App”. And “sap.demoSideNavigationExtend.controller.App” to “sap.demo.controller.App”.

Open Component.js file. Change “sap/demoSideNavigationExtend/model/models” to “sap/demo/model/models” and “sap.demoSideNavigationExtend.Component” to “sap.demo.Component”.

Open manifest.json file. Change “sap.demoSideNavigationExtend” to “sap.demo” in the “sap.app” section. Change “viewName”: “sap.demoSideNavigationExtend.view.App” to “viewName”: “sap.demo.view.App” in the “sap.ui5” section. Finally change “bundleName”: “sap.demoSideNavigationExtend.i18n.i18n” to “bundleName”: “sap.demo.i18n.i18n” in the “models” object.

Save all these files. Now we adjusted our namespace. To check if your app is up and running, run index.html file. You should see the Shell in the browser. If you don’t see this, open Developer Tools of your browser (I prefer Google Chrome and press on F12 to open Dev Tools). And check Dev Tools Console to see what the error is.

4. Create the standard SideNavigation

Before extending the control, lets create the standard SideNavigation and its childs first. See the sample in SDK: SideNavigation Sample

First add the sap.tnt library into the bootstrap in index.html file: data-sap-ui-libs=”sap.m, sap.tnt” (We need to do this, to be able to use sap.tnt controls.)

In our App.view.js file, in createContent function:

We will create a SideNavigation, and a NavigationList first. Then we wil use a for loop to create the NavigationListItem’s for first level (level 0, zero based).

Here is the code:

sap.ui.jsview("sap.demo.view.App", {

	getControllerName: function() {
		return "sap.demo.controller.App";
	},

	createContent: function(oController) {

		/* SideNavigation */
		var oSideNavigation = new sap.tnt.SideNavigation("sideNavigation");
		/* NavigationList */
		var oNavigationList = new sap.tnt.NavigationList("oNavigationList");

		/* NavigationListItem Level 0 */
		for (var i = 0; i <= 4; i++) {
			var oNavigationListItem = new sap.tnt.NavigationListItem("", {
				text: "Level 0 - Item " + i,
				icon: "sap-icon://globe",
				expanded: true
			});
			oNavigationList.addItem(oNavigationListItem);
		}
		
		oSideNavigation.setItem(oNavigationList);

		var oPage = new sap.m.Page({
			title: "{i18n>title}",
			content: [
				oSideNavigation	
			]
		});

		var app = new sap.m.App("myApp", {
			initialPage: "oPage"
		});
		app.addPage(oPage);
		return app;
	}
});

Run the index.html file and you should see the exact same screen as below:

(If you did everything correct and still cannot see this, make sure you clear your browser’s cache.)

Now that we know how to create NavigationListItem inside the loop, let’s extend the loop with one more level. (To create Second Level: Level 1 items.)

So our for loops will look like this:

/* NavigationListItem Level 0 */
for (var i = 0; i <= 4; i++) {
	var oNavigationListItem = new sap.tnt.NavigationListItem("", {
		text: "Level 0 - Item " + i,
		icon: "sap-icon://globe",
		expanded: true
	});
	
	/* NavigationListItem Level 1 */
	for (var j = 0; j <= 2; j++) {
		var oNavigationListItemSub = new sap.tnt.NavigationListItem("", {
			text: "Level 1 - Item " + j,
			icon: "sap-icon://dimension",
			expanded: true
		});
		oNavigationListItem.addItem(oNavigationListItemSub);
	}
	
	oNavigationList.addItem(oNavigationListItem);
}

And here is the result with two levels down: (Note that we added icon: “sap-icon://dimension” to the nested items, but it didn’t render.)

But it looks a bit short in size 🙁 Let’s make it full height with a css class. Open the style.css file in the css folder, inside the webapp folder. And add the below class declaration:

/* SideNavigation */
.fullHeight {
	height: 100%;
}

Since we have a css class now, we can add it to our SideNavigation:

oSideNavigation.addStyleClass("fullHeight");

And this is the full height SideNavigation with two levels:

Now let’s try to add a new level NavigationListItem, namely third level (lavel 2 since it is zero based). This means adding a new for loop inside the second loop:

/* NavigationListItem Level 0 */
for (var i = 0; i <= 4; i++) {
	var oNavigationListItem = new sap.tnt.NavigationListItem("", {
		text: "Level 0 - Item " + i,
		icon: "sap-icon://globe",
		expanded: true
	});
	
	/* NavigationListItem Level 1 */
	for (var j = 0; j <= 2; j++) {
		var oNavigationListItemSub = new sap.tnt.NavigationListItem("", {
			text: "Level 1 - Item " + j,
			icon: "sap-icon://dimension",
			expanded: true
		});
		
		/* NavigationListItem Level 2 */
		for (var k = 0; k <= 2; k++) {
			var oNavigationListItemSub2 = new sap.tnt.NavigationListItem("", {
				text: "Level 2 - Item " + k,
				icon: "sap-icon://paper-plane",
				expanded: true
			});
			oNavigationListItemSub.addItem(oNavigationListItemSub2);
		}
		
		oNavigationListItem.addItem(oNavigationListItemSub);
	}
	
	oNavigationList.addItem(oNavigationListItem);
}

You will see that it won’t render Level 2. You will only see Level 0 and Level 1 items.

So far we created the standard SideNavigation and see that it doesn’t go deeper more than two levels. This is due to the NavigationListItem and now it’s time to extend this control.

In the next part of this tutorial we will extend the NavigationListItem to make the SideNavigation a beautiful multi level menu control.

Next: Part 2