SAP Fiori Elements enables developers to build enterprise-ready SAP Fiori applications with minimal coding by leveraging metadata-driven templates and annotations. One critical aspect of delivering a seamless user experience in these applications is navigation and routing—guiding users through various screens, views, and detailed information in a smooth and intuitive way.
This article explores the fundamental concepts, configurations, and best practices for navigation and routing within SAP Fiori Elements applications, helping developers and architects ensure their apps offer consistent and efficient workflows aligned with user expectations.
In traditional UI5 applications, navigation and routing are explicitly coded by developers. However, in SAP Fiori Elements, navigation is largely controlled by the framework using:
This combination allows apps to support standard navigation patterns out of the box, while still offering extensibility for custom scenarios.
SAP Fiori Elements uses semantic objects and actions for intent-based navigation, enabling apps to link to related apps or details dynamically.
The manifest.json file defines the navigation routes, targets, and views within the app. Typical routing configuration includes:
Example snippet:
"routing": {
"routes": [
{
"pattern": "",
"name": "ListReport",
"target": "ListReport"
},
{
"pattern": "detail/{SalesOrderID}",
"name": "ObjectPage",
"target": "ObjectPage"
}
],
"targets": {
"ListReport": {
"type": "Component",
"id": "listReport",
"name": "sap.suite.ui.generic.template.ListReport"
},
"ObjectPage": {
"type": "Component",
"id": "objectPage",
"name": "sap.suite.ui.generic.template.ObjectPage"
}
}
}
Fiori Elements apps typically follow a master-detail navigation pattern:
Navigation between these is handled by:
@UI.navigationProperty annotation in CDS views to specify related entities.manifest.json routes and targets carefully, ensuring consistency.CrossApplicationNavigation service.Navigation and routing are fundamental to building user-friendly SAP Fiori Elements applications that reflect business processes accurately. By leveraging semantic objects, routing configurations, and annotations, developers can create apps that provide smooth transitions between views, maintain state across sessions, and integrate seamlessly with the SAP ecosystem.
Mastering these concepts not only enhances user experience but also reduces development effort and ensures long-term maintainability of Fiori Elements apps.