SAP Fiori Elements empowers developers to build consistent, data-driven applications with minimal coding by leveraging predefined templates and metadata annotations. However, many business scenarios require adding custom actions or buttons to extend standard functionality and tailor apps to specific user needs. This article guides you through the process of creating custom actions and buttons in SAP Fiori Elements apps.
Custom actions in SAP Fiori Elements are user-triggered operations beyond standard CRUD functionalities (Create, Read, Update, Delete). These actions can perform specific business logic, trigger backend processes, or navigate users to different screens. Buttons linked to these actions enhance UI interactivity and streamline workflows.
There are two main types of custom actions in SAP Fiori Elements:
Actions must first be declared in the OData service metadata (EDMX) as Function Imports (for bound or unbound actions) or Actions in OData V4.
Example of an OData V2 Function Import:
<FunctionImport Name="ApproveOrder" ReturnType="Edm.Boolean" EntitySet="Orders" m:HttpMethod="POST" />
For OData V4, define an action bound to an entity:
<Action Name="Approve" IsBound="true">
<Parameter Name="bindingParameter" Type="Namespace.Order" />
</Action>
The backend logic implementing the action must also be developed.
Use annotations to expose these actions in the SAP Fiori Elements UI. This is done in CDS views or an annotation file (XML or JSON).
Example annotation snippet for Object Page actions:
<Annotations Target="Namespace.OrderType">
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataFieldForAction">
<PropertyValue Property="Action" String="Namespace.Approve" />
<PropertyValue Property="Label" String="Approve Order" />
<PropertyValue Property="RequiresContext" Bool="true" />
</Record>
</Collection>
</Annotation>
</Annotations>
In some cases, additional configurations in manifest.json may be required, especially for complex actions or navigation triggered by custom buttons.
While many actions work out-of-the-box, sometimes you need to extend or customize the frontend behavior.
Component.js or ControllerExtension.js).Example in a controller extension to handle a custom button press:
onApproveOrder: function () {
// Custom logic or call backend action
}
After implementation, test your app in SAP Fiori Launchpad or standalone to verify:
Creating custom actions and buttons in SAP Fiori Elements apps enables you to extend the standard templates to meet specific business requirements efficiently. By defining backend actions, annotating the data model, and optionally customizing the frontend, you can seamlessly integrate bespoke functionalities while maintaining the consistency and scalability benefits of SAP Fiori Elements.