Skip to Content
Technical Articles
Author's profile photo Yohei Fukuhara

Basic Routing(Navigation) of SAPUI5

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.

 

Assigned tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Leo Li
      Leo Li

      my # url is correct ,but just the view does not nav to ,can you help me here ? thank you so much.

      https://amedpwa-a698d6f0c.dispatcher.hana.ondemand.com/index.html?hc_reset#/DPWHeaderSet(Mandt='001',Dpwnumber='0002')

      Author's profile photo Yohei Fukuhara
      Yohei Fukuhara
      Blog Post Author

      I'm sorry that I don't have enough time to check your issue.

       

      Regards,

      Yohei