Hi All,

I am writing this blog to describe routing(Navigation) of SAPUI5.

Please see my GitHub repository “YoheiFukuhara/sapui5-routing” for further detail.

Screen

My sample program works like this.  There are 2 routing from “View From” to “View To”.  One is without parameter and the other one is with parameter.

Application

Environment

• SAPUI5 version: 1.60.1
• IDE: Web IDE full-stack on SAP Cloud Platform

Code

Views

View are quite simple so I don’t explain anything.

Routing(manifest.json)

Routing is configured by “manifest.json” under “webapp” folder.

			"routes": [
				{
					"name": "TargetViewFrom",
					"pattern": "RouteViewFrom",
					"target": [
						"TargetViewFrom"
					]
				},
				{
					"name": "TargetViewTo",
					"pattern": "RouteViewTo",
					"titleTarget": "",
					"greedy": false,
					"target": [
						"TargetViewTo"
					]
				},
				{
					"name": "TargetViewToParameter",
					"pattern": "RouteViewTo/{parameter}",
					"titleTarget": "",
					"greedy": false,
					"target": [
						"TargetViewToParameter"
					]
				}
			],
			"targets": {
				"TargetViewFrom": {
					"viewType": "XML",
					"transition": "slide",
					"clearControlAggregation": false,
					"viewName": "ViewFrom"
				},
				"TargetViewTo": {
					"viewType": "XML",
					"viewName": "ViewTo"
				},
				"TargetViewToParameter": {
					"viewType": "XML",
					"transition": "slide",
					"clearControlAggregation": false,
					"viewName": "ViewTo"
				}
			}
		}
	},

TargetViewFrom: Back navigation from “ViewTo” to “ViewFrom”

TargetViewTo: Navigation from “ViewFrom” to “ViewTo” without parameter

TargetViewToParameter: Navigation from “ViewFrom” to “ViewTo” with parameter.  “patern” shows parameter id to be passed.

Controllers

ViewFrom.controller.js

The Navigation is implemented using Router function.  Passed parameter value with “TargetViewToParameter” is fixed value “test” here.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("test.routing-sample.controller.ViewFrom", {
		onPress: function (oEvent) {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("TargetViewTo", {} );
		},
		onPressWithParameter: function (oEvent) {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("TargetViewToParameter", { parameter: "test"} );
		}
	});
});

ViewTo.controller.js

/*eslint-disable no-console, no-alert */
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History"
], function (Controller, History) {
	"use strict";

	return Controller.extend("test.routing-sample.controller.ViewTo", {

		//Attarch event
		onInit: function () {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.getRoute("TargetViewToParameter").attachPatternMatched(this._onRouteMatched, this);
		},
		_onRouteMatched: function (oEvent) {
			
			alert(oEvent.getParameter("arguments").parameter.split(';'));

		},
		onNavBack: function (oEvent) {
			var oHistory = History.getInstance();
			var sPreviousHash = oHistory.getPreviousHash();

			if (sPreviousHash !== undefined) {
				window.history.go(-1);
			} else {
				var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
				oRouter.navTo("TargetViewFrom", true);
			}
		}
	});

});

Direct navigation using url

With this routing method, we can go to the view with parameter directly.  In my case, url is as follows.

https://<host>/index.html?hc_reset#/RouteViewTo/test

“RouteViewTo” part is routing pattern name and add parameter as “test” here.