Navigation is a fundamental aspect of any application, enabling users to move smoothly between different views, tasks, or related information. In SAP Fiori apps, implementing efficient and intuitive navigation is essential for delivering a seamless user experience. SAP Fiori applications, built on SAPUI5, offer several navigation patterns and APIs to manage transitions within single apps or across multiple apps in the SAP Fiori Launchpad.
This article explores the key concepts, types, and best practices for implementing navigation in SAP Fiori apps.
SAP Fiori apps generally follow a modular architecture with multiple views representing different screens or tasks. Navigation in SAP Fiori can be categorized into two main types:
In-app navigation is typically managed using the SAPUI5 Router, a core component of the SAPUI5 framework responsible for mapping URLs (hash-based routing) to specific views.
In the application descriptor (manifest.json), routes are defined with URL patterns linked to targets (views).
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "my.app.view",
"controlId": "app",
"controlAggregation": "pages",
"async": true
},
"routes": [
{
"pattern": "",
"name": "main",
"target": "main"
},
{
"pattern": "detail/{productId}",
"name": "detail",
"target": "detail"
}
],
"targets": {
"main": {
"viewName": "Main",
"viewLevel": 1
},
"detail": {
"viewName": "Detail",
"viewLevel": 2
}
}
}
In the controller, navigation is triggered by calling the router’s navTo method, passing the route name and any required parameters.
this.getOwnerComponent().getRouter().navTo("detail", {
productId: selectedProductId
});
In the target view’s controller, parameters are accessed during route matched events to load data accordingly.
this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
_onObjectMatched: function (oEvent) {
var productId = oEvent.getParameter("arguments").productId;
// Load data based on productId
}
Cross-app navigation enables users to jump between different SAP Fiori apps seamlessly, maintaining context and ensuring consistent user flows.
To navigate from one Fiori app to another, use the CrossApplicationNavigation service:
var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
oCrossAppNavigator.toExternal({
target: {
semanticObject: "Product",
action: "display"
},
params: {
productId: "12345"
}
});
navBack() to improve user experience.Navigation is critical to the usability and effectiveness of SAP Fiori applications. By using SAPUI5 Router for in-app navigation and the CrossApplicationNavigation service for cross-app transitions, developers can deliver intuitive, scalable, and user-friendly experiences. Proper planning and adherence to SAP Fiori design principles ensure that navigation flows are seamless, consistent, and aligned with users’ needs.