Subject: SAP-HANA-Live | SAP Domain
In SAPUI5 application development, especially when building applications that consume real-time data from SAP HANA Live, effective navigation and routing mechanisms are crucial to create smooth, user-friendly experiences. Navigation enables users to move between different views or pages, while routing manages URLs and application states, facilitating bookmarkable and shareable links.
This article explains the core concepts, setup, and implementation of navigation and routing in SAPUI5 applications to build scalable and maintainable UI5 apps that complement SAP HANA Live backend services.
SAPUI5 applications are often Single Page Applications (SPAs) where the page content changes dynamically without full reloads. Navigation and routing:
The Router maps URLs (hash fragments) to views and manages navigation inside the app.
Routes define patterns and targets (views) they map to, supporting parameter passing.
Targets are the actual UI5 views to be loaded or displayed.
Programmatic control to trigger navigation between routes.
Routing configuration happens in the manifest.json file of your SAPUI5 project.
manifest.json Snippet:{
"sap.ui5": {
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "my.app.view",
"controlId": "app",
"controlAggregation": "pages",
"async": true
},
"routes": [
{
"name": "master",
"pattern": "",
"target": "master"
},
{
"name": "detail",
"pattern": "detail/{productId}",
"target": "detail"
}
],
"targets": {
"master": {
"viewName": "Master",
"viewLevel": 1
},
"detail": {
"viewName": "Detail",
"viewLevel": 2
}
}
}
}
}
{productId}).To navigate between views programmatically, get the router instance and call the navTo method.
onItemSelect: function(oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
var productId = oEvent.getSource().getBindingContext().getProperty("ProductID");
oRouter.navTo("detail", {
productId: productId
});
}
In the target view’s controller, handle the route pattern matched event to fetch parameters and load data accordingly.
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) {
var productId = oEvent.getParameter("arguments").productId;
this._bindView(productId);
},
_bindView: function(productId) {
var oView = this.getView();
oView.bindElement({
path: "/Products('" + productId + "')"
});
}
When building SAPUI5 apps that consume live data from SAP HANA Live:
Implementing navigation and routing in SAPUI5 applications is essential to building responsive and user-centric frontends that harness real-time data capabilities of SAP HANA Live. Understanding the router configuration, route definitions, and programmatic navigation empowers developers to deliver sophisticated SAPUI5 apps with seamless user journeys and powerful data insights.