¶ Using Filters and Sorting in SAP Fiori Elements
Subject: SAP-Fiori-Elements
Efficient data exploration is a cornerstone of effective SAP Fiori Elements applications. Filters and sorting capabilities empower users to quickly locate relevant information from large datasets, improving productivity and decision-making. SAP Fiori Elements provides standardized, metadata-driven mechanisms to implement filtering and sorting with minimal development effort while maintaining a consistent user experience.
This article explores how filtering and sorting work in SAP Fiori Elements, best practices to implement them, and how annotations drive their behavior.
¶ 1. The Role of Filtering and Sorting in Fiori Elements
- Filtering allows users to narrow down the dataset based on specific criteria (e.g., date ranges, status, categories).
- Sorting enables users to order data by one or multiple columns for easier analysis.
- Both features are vital in List Reports, Worklists, and Analytical apps, where users often handle extensive data tables.
SAP Fiori Elements leverages annotations embedded in CDS views or OData services to enable filters and sorting without custom UI coding.
- @UI.selectionField: Marks a property as filterable on the filter bar.
- @UI.lineItem: Defines columns shown in tables and sorting capability.
- @Consumption.filterable / @Consumption.sortable: Explicitly indicate whether a property can be filtered or sorted.
- @UI.presentationVariant: Controls default sorting order and visible columns.
Example snippet in CDS:
@UI.selectionField: [{ position: 10 }]
@Consumption.filterable: true
CustomerName: String;
@UI.lineItem: [{ position: 20 }]
@Consumption.sortable: true
OrderDate: Date;
- Automatically generated based on
@UI.selectionField annotations.
- Supports multiple filter types: text input, dropdowns, date pickers, ranges, multi-select.
- Provides Advanced Search and Save Filter Variants features.
- Supports Dynamic Filtering by leveraging backend logic for value help.
¶ b. Backend Filter Handling
- OData supports
$filter queries to push filtering logic to the backend for efficiency.
- Filters are applied during data retrieval to minimize front-end data load.
- Sorting is primarily defined by the
@UI.lineItem annotation and backend service support.
- Users can click on column headers in tables to sort ascending or descending.
- Default sorting can be configured using
@UI.presentationVariant annotation.
- Sorting is also pushed to the backend via OData
$orderby queries.
- Annotate Relevant Fields: Only annotate properties users need to filter or sort on to keep UI clean.
- Use Backend Filtering and Sorting: Push logic to the backend for performance, especially on large datasets.
- Provide Value Helps: For filters with predefined values, implement value helps or dropdowns to aid users.
- Default Sorting: Set a logical default sort order that aligns with typical user tasks.
- Test for Performance: Ensure filter and sort queries perform efficiently with real data volumes.
¶ 6. Extending Filters and Sorting
- Developers can add custom filters using extension points if standard annotations are insufficient.
- Custom logic can be implemented in the backend (ABAP or CAP) to support complex filter conditions.
- Use UI annotations to group filters or create dependent filters for better UX.
Filters and sorting are essential features in SAP Fiori Elements that significantly enhance user experience by enabling efficient data exploration. Leveraging metadata-driven annotations, developers can implement these features with minimal code while adhering to SAP Fiori design principles. Following best practices ensures performant and user-friendly applications suited for diverse business needs.
Further Reading: