Navigation is a critical aspect of any enterprise application, and in SAP Fiori Elements, it plays a key role in guiding users through a streamlined and intuitive workflow. Unlike freestyle SAPUI5 applications where developers manage routing manually, SAP Fiori Elements provides a framework-driven approach to navigation, enhancing consistency and reducing development effort.
This article explains how navigation works in SAP Fiori Elements apps and outlines best practices for configuring it effectively.
SAP Fiori Elements uses annotations and manifest configurations to define navigation behavior. This model-driven approach allows for quick setup while maintaining flexibility for different business scenarios.
There are primarily two types of navigation in SAP Fiori Elements:
The manifest.json file is central to defining the structure and navigation of a Fiori Elements app. It includes:
pages section under sap.ui.generic.app."sap.ui.generic.app": {
"pages": {
"ListReportPage": {
"entitySet": "Products",
"component": {
"name": "sap.suite.ui.generic.template.ListReport"
},
"pages": {
"ObjectPage": {
"entitySet": "Products",
"component": {
"name": "sap.suite.ui.generic.template.ObjectPage"
}
}
}
}
}
}
Annotations help determine how the app should behave when users interact with certain UI elements.
Example:
<Annotation Term="com.sap.vocabularies.UI.v1.Identification">
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Value" Path="ProductID"/>
<Annotation Term="com.sap.vocabularies.Common.v1.SemanticObject" String="Product"/>
<Annotation Term="com.sap.vocabularies.Common.v1.SemanticObjectAction" String="display"/>
</Record>
</Annotation>
In cross-app scenarios, navigation is defined using semantic objects and actions that are mapped to target apps in the Fiori Launchpad. This enables deep linking and reuse of context across applications.
For example:
ProductdisplayUsers can navigate from a sales order app to a product details app by clicking on a product name, as long as both apps support the relevant semantic object/action combination.
Use Semantic Objects Consistently: Ensure that both the source and target apps use the same semantic object/action naming to enable FLP-based navigation.
Use pages Hierarchy for Internal Navigation: Define child pages (e.g., Object Pages) within the parent page configuration for seamless in-app navigation.
Leverage Annotations: Let OData annotations drive navigation behavior rather than hardcoding links in the UI.
Keep URLs Clean: SAP Fiori Elements apps use deep linking (hash-based routing), so structure routes cleanly for bookmarking and sharing.
Test with FLP Configuration: Always validate navigation flows in the context of the Fiori Launchpad to ensure all target mappings and semantic actions work as expected.
Setting up navigation in SAP Fiori Elements apps is significantly simplified thanks to the metadata-driven approach. By combining smart annotations, manifest configurations, and FLP intent-based navigation, developers can build apps that are both powerful and user-friendly with minimal code. A well-structured navigation setup not only improves the user experience but also accelerates development and maintenance in large-scale enterprise environments.