Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Fukuhara
Advisor
Advisor
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.

 
2 Comments