Routing and navigation are fundamental aspects of building enterprise-grade SAPUI5 applications. Effective routing allows users to move seamlessly between views, supports bookmarkable URLs, and enables deep linking — all essential for modern single-page applications (SPA). SAPUI5 provides a powerful Routing API that developers can leverage to handle navigation efficiently and elegantly.
This article provides an in-depth explanation of UI5 Routing and Navigation concepts and guides you through their implementation.
Routing in SAPUI5 manages navigation between different UI views and controls the browser history and URL hash. It enables:
The Router is the central component that listens to changes in the URL hash and determines which view to display.
A Route defines a specific pattern to match against the URL hash. Each route maps to a target view and optionally extracts parameters.
Targets define the actual views or controls that are displayed when a route is matched.
The UI5 XML, JS, or JSON view that is rendered as a response to navigation.
The manifest.json file is the central configuration file for UI5 apps, and routing is defined under the "sap.ui5" section.
Example:
{
"sap.ui5": {
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "my.app.view",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide"
},
"routes": [
{
"name": "home",
"pattern": "",
"target": "home"
},
{
"name": "detail",
"pattern": "detail/{productId}",
"target": "detail"
}
],
"targets": {
"home": {
"viewName": "Home",
"viewLevel": 1
},
"detail": {
"viewName": "Detail",
"viewLevel": 2
}
}
}
}
}
pattern: URL hash pattern. {productId} is a dynamic parameter.controlId: The ID of the UI container where views will be placed (usually app).transition: Animation when navigating.In your root view (usually App.view.xml), add a sap.m.App or sap.m.NavContainer with the matching ID:
<mvc:View controllerName="my.app.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App id="app" />
</mvc:View>
In the Component.js file, initialize and start the router:
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
}
This makes the router listen to URL changes and start routing.
To navigate between views in your controller:
this.getOwnerComponent().getRouter().navTo("detail", {
productId: "12345"
});
"detail" is the route name.{ productId: "12345" } contains dynamic route parameters.In the target view controller (e.g., Detail.controller.js), you can retrieve route parameters:
onInit: function() {
var oRouter = this.getOwnerComponent().getRouter();
oRouter.getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
var sProductId = oEvent.getParameter("arguments").productId;
// Use sProductId to bind data or perform logic
}
This allows dynamic content loading based on URL parameters.
Use the history API for back navigation:
onNavBack: function() {
var oHistory = sap.ui.core.routing.History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getOwnerComponent().getRouter().navTo("home", {}, true);
}
}
This ensures graceful handling if there is no history.
manifest.json for consistency.Routing and navigation are key pillars of SAPUI5 application architecture. By leveraging the powerful UI5 routing API, developers can create intuitive, bookmarkable, and SPA-like user experiences that align with enterprise requirements.
Understanding routing fundamentals, combined with proper implementation, empowers you to build scalable and maintainable SAPUI5 applications with seamless user navigation.