SAP Fiori Elements is a powerful framework that accelerates the development of SAP Fiori applications by providing pre-built templates and reusable components. Among these, the Object Page template is widely used to present detailed information about a business object in a structured and user-friendly manner. This article explores how to create Object Pages using Fiori Elements, enabling rapid development while adhering to SAP Fiori design principles.
An Object Page is a detailed page designed to display all relevant information about a single object—such as a sales order, purchase requisition, or customer—in a clear, organized layout. It typically contains:
Ensure your OData service exposes the relevant entity set representing the business object and includes UI annotations such as:
@UI.LineItem for table columns@UI.FieldGroup for grouping fields in sections@UI.HeaderInfo for header data@UI.Facets to define sections and subsections on the Object PageExample snippet of annotations in CDS or metadata:
<Annotations Target="YourEntityType">
<Annotation Term="UI.HeaderInfo">
<Record>
<PropertyValue Property="TypeName" String="Sales Order"/>
<PropertyValue Property="Title" Path="SalesOrderID"/>
<PropertyValue Property="Description" Path="CustomerName"/>
</Record>
</Annotation>
<Annotation Term="UI.Facets">
<Collection>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label" String="General Information"/>
<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#GeneralInfo"/>
</Record>
</Collection>
</Annotation>
</Annotations>
The app automatically supports navigation from a list to the object page by configuring routes in the manifest.json. You can customize routing if needed.
Imagine you want to create an Object Page for sales orders showing header info, items table, and attachments.
Creating Object Pages with SAP Fiori Elements dramatically speeds up the development process by leveraging metadata-driven UI generation. This approach not only reduces manual coding effort but also guarantees consistency with SAP Fiori design guidelines, improving user satisfaction. By properly annotating your OData services and using SAP Fiori Tools, developers can deliver powerful, extensible object-centric applications with ease.