SAP Fiori Elements streamlines application development by generating user interfaces based on metadata annotations. Among the powerful features of Fiori Elements are actions and filters, which provide users with intuitive ways to interact with data and customize views according to their needs.
This article explores how to implement and customize actions and filters in Fiori Elements apps, helping developers enhance user productivity and deliver more tailored user experiences.
Both these features are typically defined and controlled via annotations on the OData service or through manifest configurations, minimizing the need for manual UI coding.
Filters in Fiori Elements are generated automatically based on OData service metadata annotations, specifically the @UI.selectionField annotation in CDS views or OData metadata.
Example annotation in a CDS view:
@UI.selectionField: [{ position: 10 }]
@EndUserText.label: 'Material Number'
define field MaterialNumber : abap.char(18);
This tells Fiori Elements to include Material Number as a filterable field in the List Report or Overview Page.
Additional filter behavior can be controlled in the manifest.json under the sap.ui.generic.app section, such as setting filter visibility or binding filter values programmatically.
Fiori Elements support predefined actions like Create, Edit, Delete, and Save, which are automatically integrated if the backend service supports these operations.
To implement custom actions, you use @UI.lineItem and @UI.facet annotations alongside the OData service’s Action or FunctionImport definitions.
Example in OData V4 annotations:
<Annotations Target="YourEntitySet">
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataFieldForAction">
<PropertyValue Property="Action" String="YourCustomAction"/>
<PropertyValue Property="Label" String="Approve"/>
</Record>
</Collection>
</Annotation>
</Annotations>
Implementing actions and filters in SAP Fiori Elements empowers users with dynamic and efficient data interaction capabilities. By leveraging metadata-driven annotations, developers can minimize manual effort while delivering rich functionality that adheres to SAP Fiori UX standards.
Understanding how to define and extend these features is key to building responsive, user-centric Fiori Elements applications that enhance productivity and improve business processes.