Custom Controller in SAPUI5: Step 1

In the blog, I’d like to share with you how to modify the standard side navigation behavior by using custom controller.

When I expand standard side navigation, it looks like:

In our custom controller, it will looks like this:

You can see, it’s a big change. In the expanded state, there will be a overlay panel to show detail info. In the standard controller, the sub items is nested in its parent.


Before starting, if you want to extend a controller, normally you need to modify controller.js file and controllerRender.js file.

  • The controller.js take reponsible for properties, aggregations, event handlers and so on.
  • The controllerRender.js take charge of building html element and css class. It renders the controller.

If you are the first time to touch the topic, I recommend you to read the tutorial firstly

In this blog, we focus on the controller.js.

1. Define custom controller

], function (SideNavigation, SideMenuRender, SideMenuList, Image, Fragment) {
	"use strict";
	return SideNavigation.extend("SimpleDemo.container.SideMenu", {
		metadata: {
			aggregations: {
  1. The sideNavigtion is base controller, we will create our own custom controller by extending SideNaviagtion.
  2. The parameter in extend(“”) is the path for your custom controller.

In the project, the structure looks like:

So, now I name my custome controller “SideMenu”.


2. What’s aggregation?

Since I plan to add more elements like image or panel in the side menu. we can add our own aggregation in our custom controller.

In the aggregation, you can define which controller can be nested in the custom controller.

metadata: {
			aggregations: {
				image: {
					type: "sap.m.Image",
					multiple: false
				panel: { type: "sap.ui.core.Control", multiple: false },
				items: { type: SideMenuList, multiple: true, singularName: "item" },
			events: {
		init: function () {
			this.setAggregation("image", new Image({
				src: "{/ProfileImage}",
				// width: "84%"
				width: "45px"
			}).addStyleClass("sapUiSmallMarginBottom sideMenuImage"));
			var ofooter = new sap.tnt.NavigationList();
			ofooter.addItem(new sap.tnt.NavigationListItem({
				icon: "sap-icon://menu2"
			this.setAggregation("footer", ofooter);

			var that = this;
				name: "SimpleDemo.fragments.ItemPanel",
				controller: this
			}).then(function (oPanel) {
				that.setAggregation("panel", oPanel);

Then, in the function “init”. I set these aggregation by code.

Of course, you can define them in the XML view. Just different view to implement the aggregation.

3. Modify the prototype method

In our case, we need to extend the original method like “_itemSelectionHandler” in SideNavigation. Because when one item is selected, there will be a new panel not expand itself. The way is to overwrite its prototype directly in the init method.

				name: "SimpleDemo.fragments.ItemPanel",
				controller: this
			}).then(function (oPanel) {
				that.setAggregation("panel", oPanel);

			SideNavigation.prototype._itemSelectionHandler = function (event) {
				var item = event.getParameter('item');
				if (item.getKey() !== "workArea") {
						item: item
					SideMenuRender.hasItemPanel = false;
				} else {
					//Register event click outside side menu
					this.delegate = {
						onclick: this.closeItemPanel.bind(this)
					if (SideMenuRender.hasItemPanel) {
						//When user just click the second item but not navigation
					} else {
						SideMenuRender.hasItemPanel = true;

			SideNavigation.prototype.onAfterRendering = function () {


			SideNavigation.prototype.onBeforeRendering = function () {


OK, until now. The modification in controller.js is complete. We added our own aggregation and overwrited some original method to fulfill our specific requriement.

5. Render

The method “render” is mandatory in custom controller. It is used to create html element for controller and assign CCS properties.

In this case, we need the render class to render the panel and control its position and layout.


Simple tutorial in Demo Kit

OpenUI5 Source code

openui5/src at master · SAP/openui5 · GitHub

Next blog ‎

Original Article:

Related blogs


Please enter your comment!
Please enter your name here