In modern enterprise applications, users expect fast, flexible, and intelligent ways to search and filter business data. In SAP Fiori Elements, delivering such experiences is not only possible but also efficient—thanks to its model-driven approach. Whether you're working with List Reports, Object Pages, or Analytical Lists, implementing complex search and filtering functionality is crucial for delivering value to end users.
This article explains how to build and enhance complex search and filter capabilities using SAP Fiori Elements with minimal coding, focusing on annotation-based configurations and custom logic where needed.
SAP Fiori Elements applications offer a Smart Filter Bar, which automatically renders search fields based on metadata and annotations. This component enables both free-text search and field-specific filters, supporting various data types and operators.
There are two primary types of filters:
Begin by creating or enhancing a CDS view that supports filtering. Use annotations to expose fields in the Smart Filter Bar.
@AbapCatalog.sqlViewName: 'ZV_ORDER'
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Sales Order Data'
define view ZC_SalesOrder
as select from SEPM_SalesOrder as so
{
key so.SalesOrder,
so.Customer,
so.CreatedBy,
so.LifecycleStatus,
so.GrossAmount,
so.CurrencyCode
}
Apply filter-relevant annotations:
@UI.selectionField: [{ position: 10 }]
@Consumption.filter: { mandatory: false }
Customer,
The Smart Filter Bar is auto-generated based on OData metadata and UI annotations. However, it can be customized using the manifest.json or through Local Annotations in annotation.xml.
Example (annotation.xml):
<Annotation Term="UI.SelectionFields">
<PropertyPath>Customer</PropertyPath>
<PropertyPath>LifecycleStatus</PropertyPath>
</Annotation>
Enable dropdowns and value helps by associating the filter fields with value help CDS views (via associations) or annotations like:
@Consumption.valueHelpDefinition: [{ entity: { name: 'ZC_CustomerVH', element: 'CustomerID' } }]
Customer,
This enhances usability and ensures users select valid filter values.
In real-world applications, filters may require additional logic, such as:
You can pre-fill filter values using BAdIs like UI5_DEFAULT_FILTER_VALUES or annotations:
@UI.selectionField.defaultValue: 'RELEASED'
LifecycleStatus,
Use the CDS view’s WHERE clause or implement filtering logic in a custom handler if using a custom OData service.
Example: Restricting results by logged-in user:
where CreatedBy = $session.user
Enable free-text search by setting the @Search.defaultSearchElement annotation. This tells the Smart Filter Bar which fields should be included in the global search.
@Search.defaultSearchElement: true
@Search.fuzzinessThreshold: 0.8
Customer,
This integrates with Enterprise Search and SAP HANA’s fuzzy search capabilities when applicable.
Here are additional ways to improve the search/filtering experience:
@UI.selectionField.group.To handle a complex scenario like filtering sales orders by a date range, multiple lifecycle statuses, and customer regions, you can:
Add range-enabled date fields using annotations:
@UI.selectionField: [{ position: 30 }]
@Consumption.filter: { selectionType: #INTERVAL }
CreatedAt
Enable multi-value filter for status:
@Consumption.filter: { multipleSelections: true }
LifecycleStatus
Use value help association for Customer Region from Business Partner CDS.
Building complex search and filtering functionality in SAP Fiori Elements is largely declarative, driven by annotations and metadata. With proper CDS design and thoughtful use of annotations, developers can deliver highly effective and user-friendly search experiences.
Key Takeaways:
@UI.selectionField and @Consumption.filter annotations for filter setup.By mastering these techniques, SAP developers and consultants can significantly enhance the user experience and functional reach of their Fiori Elements apps, aligning with modern usability expectations and business needs.