SAP Fiori Elements enables rapid development of standardized, consistent, and scalable SAP Fiori applications by leveraging metadata-driven UI generation. At the heart of this approach lie annotations — metadata extensions that define how the UI should present and behave without the need for extensive custom coding.
Working effectively with annotations is essential for developers and consultants to customize and extend Fiori Elements apps, tailoring the UI and user experience to business requirements while maintaining SAP’s design principles.
This article explores the concept of annotations, their types, usage, and best practices for working with them in Fiori Elements.
Annotations are metadata definitions attached to an OData service that describe UI semantics, behaviors, and presentation logic. Instead of manually coding UI components, Fiori Elements reads these annotations and dynamically generates the UI accordingly.
Annotations define:
- Which fields to display and how (labels, formatting)
- Layout and sections of the UI pages
- Search and filter options
- Actions and navigation targets
- Validation rules and field semantics
By using annotations, developers can build apps faster and ensure consistency across applications.
Annotations in Fiori Elements primarily come in two forms:
- Embedded in the OData service metadata document (
$metadata)
- Use specific vocabularies and XML syntax defined by OData
- Common in older SAP Gateway services and many SAP standard services
- Defined within CDS views in SAP S/4HANA or SAP BW
- Written in ABAP CDS syntax
- Preferred for newer SAP systems and S/4HANA development
- Automatically exposed to OData services with annotations
SAP and OData define various standard vocabularies to cover UI semantics:
- UI Vocabulary: Controls UI layout, field groups, line items, facets, etc.
- Common Vocabulary: Defines common terms like addresses, emails, phone numbers.
- Communication Vocabulary: For email, phone, and communication-related data.
- Capabilities Vocabulary: Indicates service features like paging or sorting.
- Validation Vocabulary: Specifies field validations and constraints.
¶ 1. Annotation Maintenance
Annotations can be maintained in multiple ways:
- Embedded Annotations: Included in the OData service metadata directly (via CDS or SAP Gateway Service Builder).
- Annotation Files: External XML files referenced by the app, allowing UI customization without backend changes.
- Annotation Models: JSON or XML models loaded dynamically in the UI5 app.
- SAP Gateway Service Builder (SEGW): For editing OData V2 annotations.
- ABAP Development Tools (ADT): For creating and maintaining CDS annotations.
- Annotation Modeler in SAP Business Application Studio: Visual editor for external annotation files.
- SAP Web IDE: Provides wizards and editors to create and manage annotations.
Annotations control various aspects of app behavior:
- Object Page: Control sections, header fields, and related objects.
- List Report: Define table columns, filters, and sorting.
- Overview Page: Configure cards and KPIs.
- Actions: Define buttons and navigation links.
Example snippet in CDS:
@UI.lineItem: [{ position: 10, label: 'Product Name' }]
@UI.selectionField: [{ position: 10 }]
define view Z_Product as select from mara {
matnr,
maktg
}
This annotation displays maktg as a line item and selection field with custom labels.
- Use CDS Annotations Where Possible: For better integration and maintainability in S/4HANA.
- Separate UI Annotations from Business Logic: Use external annotation files for UI customizations to avoid backend impacts.
- Follow SAP Fiori Design Guidelines: Maintain consistent UI behavior and look.
- Reuse Standard Annotations: Leverage SAP-delivered vocabularies to reduce custom efforts.
- Version Control: Manage annotation files and CDS views under source control to track changes.
- Test Changes Thoroughly: Verify UI impact after annotation changes, especially in complex apps.
Annotations are the backbone of SAP Fiori Elements, enabling metadata-driven UI generation that significantly speeds up development while ensuring consistency. Mastering how to work with annotations—whether embedded in OData services, defined in CDS views, or maintained as external files—empowers developers and consultants to tailor Fiori apps precisely to business needs.
By adopting best practices and leveraging SAP tools for annotation management, organizations can build scalable, maintainable, and user-friendly Fiori applications that align with SAP’s Intelligent Enterprise vision.