SAP Fiori Elements simplifies app development by automatically generating UIs based on metadata annotations, following SAP Fiori design principles. While it excels at standard navigation patterns—such as navigating from a list report to an object page—real-world business processes often demand more complex navigation scenarios. These scenarios may involve multi-level navigation, cross-app navigation, or contextual data transfers. Handling such navigation efficiently is essential for delivering seamless user experiences in enterprise applications.
This article explores how to manage complex navigation scenarios within the SAP Fiori Elements framework.
By default, Fiori Elements supports common navigation flows:
These navigations are driven by annotations and manifest configurations, leveraging semantic object navigation and routing.
Multi-Level Navigation
Navigating through several layers of related objects, e.g., Customer → Sales Order → Invoice → Payment.
Cross-App Navigation
Jumping from one Fiori Elements app to another distinct app, possibly with different data models.
Contextual or Parameterized Navigation
Passing complex filter criteria or multiple parameters to the target app for contextual display.
Conditional Navigation
Navigation based on runtime conditions, such as user roles or data values.
SAP Fiori Elements relies on the Semantic Object and Action model for navigation. By defining semantic objects and mapping actions in the manifest or annotations, you can enable cross-app navigation.
Example in CDS annotations:
@UI.lineItem: [{ type: #FOR_ACTION, dataAction: 'toSalesOrder' }]
@ObjectModel.semanticKey: 'SalesOrderID'
define view Z_SalesOrder as select from ...
In the manifest.json, map the semantic object and action to target intents.
For scenarios where the default navigation isn’t sufficient, you can define custom navigation actions:
Example in manifest.json under routing:
"targets": {
"DetailObjectPage": {
"type": "Component",
"name": "sap.suite.ui.generic.template.ObjectPage",
"options": {
"settings": {
"navigation": {
"toInvoice": {
"route": "InvoiceObjectPage",
"parameters": ["InvoiceID"]
}
}
}
}
}
}
The SAP Fiori Launchpad provides the CrossApplicationNavigation service to navigate between apps dynamically:
this.getOwnerComponent().getService("CrossApplicationNavigation").toExternal({
target: {
semanticObject: "SalesOrder",
action: "display"
},
params: {
"SalesOrderID": ["12345"]
}
});
You can call this from a custom controller extension or an action handler.
Advanced routing configurations enable passing complex parameters and handling deep linking:
Handling complex navigation scenarios in SAP Fiori Elements requires a balanced approach of leveraging annotations, routing configurations, and occasionally, custom code. Understanding semantic object navigation, manifest routing, and SAP Fiori Launchpad services empowers developers to create rich, user-friendly applications that seamlessly guide users through intricate business processes.
By adhering to SAP’s navigation standards and best practices, you can deliver intuitive and efficient Fiori apps even in complex enterprise landscapes.