SAP Fiori Elements offers a powerful framework to rapidly develop SAP Fiori applications using predefined templates driven by metadata annotations. While many standard Fiori Elements apps are single-page, real-world business processes often require multi-page applications to provide detailed drill-down, master-detail navigation, or guided workflows.
This article explores how to create multi-page applications using SAP Fiori Elements, highlighting key techniques, templates, and best practices for building seamless, scalable, and user-friendly multi-page Fiori apps.
A multi-page application in SAP Fiori Elements refers to an app architecture where users navigate across several distinct but related pages. These pages often include:
Multi-page navigation improves user experience by organizing information hierarchically, enabling users to drill down from general to specific data.
This is the most common multi-page scenario.
Navigation is automatically handled by the framework, driven by OData entity relationships and annotations.
The Overview Page aggregates multiple cards, each representing different data or KPI views. Cards link to their respective detailed pages, allowing users to navigate into detailed apps.
Used often in task-based scenarios, where users see a list of work items and can drill down into details.
A multi-page app requires well-defined entity sets and associations in the OData service. For example, a SalesOrder entity with a one-to-many association to SalesOrderItems.
Use annotations to describe UI behavior:
@UI.selectionField and @UI.lineItem for list report.@UI.facet and @UI.fieldGroup for object page layout.@ObjectModel.association to link entities.manifest.jsonDefine pages and navigation targets:
"routing": {
"routes": [
{
"pattern": "",
"name": "ListReport",
"target": "ListReport"
},
{
"pattern": "SalesOrder/{SalesOrderID}",
"name": "ObjectPage",
"target": "ObjectPage"
}
],
"targets": {
"ListReport": {
"type": "Component",
"name": "sap.suite.ui.generic.template.ListReport"
},
"ObjectPage": {
"type": "Component",
"name": "sap.suite.ui.generic.template.ObjectPage"
}
}
}
This routing configuration enables smooth navigation between pages.
SAP Fiori Elements smart templates generate pages automatically from annotations, significantly reducing manual UI coding.
| Best Practice | Description |
|---|---|
| Maintain Clear Entity Relationships | Proper OData associations ensure seamless navigation. |
| Use Annotations Consistently | Accurate annotations enable automatic UI generation. |
| Keep Navigation Intuitive | Follow Fiori UX guidelines for predictable user flows. |
| Optimize Performance | Load data lazily on object pages to enhance responsiveness. |
| Leverage Extension Points | Customize pages without losing standard functionality. |
Creating multi-page applications with SAP Fiori Elements allows SAP developers to build scalable, easy-to-navigate, and business-centric user experiences with minimal coding. By combining well-designed backend services, rich annotations, and the powerful routing capabilities of Fiori Elements, multi-page apps support complex business scenarios while maintaining SAP’s UX consistency and best practices.
Multi-page SAP Fiori Elements applications are ideal for enterprises seeking efficient, user-friendly interfaces that guide users through hierarchical data exploration and complex business processes.