Routing and navigation are fundamental concepts in building single-page applications (SPA) with SAP UI5. They enable developers to create seamless, user-friendly experiences by managing the transitions between different views or pages without requiring full page reloads.
This article introduces the basics of routing and navigation within SAP UI5 applications, explaining what they are, why they matter, and how to implement them effectively.
Routing in SAP UI5 refers to the mechanism of mapping URLs (or hash fragments) to views within an application. It allows the application to:
In essence, routing helps create a navigation structure that users expect from modern web apps, making the app feel responsive and intuitive.
SAP UI5’s routing is built on the Router class, which manages navigation between views based on configuration defined in the app’s manifest.json file.
product/{productId}, where {productId} is a dynamic parameter.In the manifest.json, you define routing as follows:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "myApp.view",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide"
},
"routes": [
{
"pattern": "",
"name": "home",
"target": "home"
},
{
"pattern": "detail/{productId}",
"name": "detail",
"target": "detail"
}
],
"targets": {
"home": {
"viewName": "Home"
},
"detail": {
"viewName": "Detail"
}
}
}
#), the Home view is displayed.#detail/123 displays the Detail view and passes the parameter productId with value 123.To navigate between routes in your controller:
this.getOwnerComponent().getRouter().navTo("detail", {
productId: "123"
});
This changes the URL and displays the Detail view with the specified product ID.
In the Detail controller, you can access the parameter:
onInit: function() {
this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) {
var productId = oEvent.getParameter("arguments").productId;
// Use productId to bind data or perform logic
}
Routing and navigation are essential for creating smooth, intuitive SAP UI5 applications. They allow developers to manage multiple views effectively, support deep linking, and enhance the overall user experience.
By mastering routing, you can build scalable and maintainable SAP UI5 applications that feel modern and responsive, meeting the expectations of today’s users.