SAP Fiori Elements accelerates application development by providing a framework for building consistent and UI-rich SAP Fiori apps with minimal coding. One of the powerful features it supports is multiple views, which allows users to switch between different perspectives of the same data. This improves user efficiency and ensures a tailored user experience without reinventing the core logic or duplicating datasets.
In this article, we explore how multiple views work within SAP Fiori Elements, how they can be implemented, and their role in enhancing business processes across the SAP landscape.
Multiple views refer to the ability to present the same dataset in different visual or logical formats within a single SAP Fiori Elements application. For example, in a sales order application, users may want to see orders as a list, grouped by customer, or visualized as a chart.
Multiple views typically include:
These are seamlessly integrated into the app using Fiori Elements’ metadata-driven architecture.
Working with multiple views is crucial for:
SAP Fiori Elements uses annotations and manifest.json configurations to define and control views. Here's how you can implement multiple views:
The foundation of any Fiori Elements app is the Core Data Services (CDS) views on the backend. Ensure your CDS views are annotated with UI-specific metadata such as:
@UI.presentationVariant@UI.selectionPresentationVariant@UI.lineItem@UI.chartThese annotations define how data should be presented.
SelectionPresentationVariant AnnotationTo allow multiple views, define SelectionPresentationVariants that combine different filters and presentation configurations. This helps group multiple views under one logical dataset.
@UI.selectionPresentationVariant: [
{
qualifier: 'Default',
selectionVariant: 'DefaultFilter',
presentationVariant: 'TableView'
},
{
qualifier: 'ChartView',
selectionVariant: 'DefaultFilter',
presentationVariant: 'ChartPresentation'
}
]
manifest.jsonIn the application descriptor (manifest.json), define the multiple views using the quickVariantSelectionX settings under the pages configuration.
"quickVariantSelectionX": {
"showCounts": true,
"variants": {
"0": {
"key": "table",
"annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#TableView"
},
"1": {
"key": "chart",
"annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#ChartPresentation"
}
}
}
This enables a segmented button or tab selector in the UI, allowing users to toggle between views.
| Benefit | Description |
|---|---|
| Improved UX | Delivers role-tailored, intuitive views for different user needs. |
| Code Efficiency | No need for multiple apps or redundant logic. |
| Standardization | Maintains UI consistency using SAP’s best practices. |
| Extensibility | Views can be extended or modified without disrupting core logic. |
Working with multiple views in SAP Fiori Elements empowers developers and business users alike by providing flexible, dynamic, and role-specific visualizations of enterprise data. With minimal development effort and maximum consistency, it aligns with SAP’s vision of a clean core and intelligent UX. Organizations implementing SAP Fiori Elements with multiple views benefit from better data insights, faster user adoption, and streamlined business processes.