Routing and navigation are fundamental aspects of building modern SAP Fiori applications. They define how users move between views and interact with different parts of an app, ensuring a smooth and intuitive user experience. In the context of SAP Business Application Studio (BAS), developers use SAPUI5 frameworks to implement efficient routing and navigation patterns.
This article provides an overview of routing concepts in Fiori applications, how to implement them using BAS, and best practices to create seamless navigation flows.
Routing in SAP Fiori refers to the mechanism that controls navigation between different views (screens) within a single-page application (SPA). It manages:
This enables users to navigate intuitively without page reloads, preserving the SPA experience.
The manifest.json file contains the routing configuration under the "sap.ui5" section. Example:
"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"
},
"detail": {
"viewName": "Detail"
}
}
}
Create XML views (e.g., Home.view.xml, Detail.view.xml) corresponding to the targets.
this.getRouter().initialize();
This activates routing when the app launches.
Use router API to navigate:
this.getRouter().navTo("detail", {
productId: 1234
});
This navigates to the detail route passing a product ID.
Attach route matched event in your controller to read parameters:
this.getRouter().getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
_onObjectMatched: function(oEvent) {
var productId = oEvent.getParameter("arguments").productId;
// Load data based on productId
}
Routing and navigation are critical to the success of SAP Fiori applications. SAP Business Application Studio offers developers a powerful environment to implement these concepts efficiently using SAPUI5 routing APIs and manifest-driven configuration.
By following best practices and leveraging BAS tools, developers can build user-friendly, scalable Fiori applications with seamless navigation and responsive UX.