SAP Fiori Building Blocks

Getting started with SAP Fiori Building Blocks

SAP Fiori Building Blocks are designed to extend Fiori elements applications based on OData V4. As part of SAP’s flexible programming model, they can also be used in custom SAPUI5 applications and custom extensions. The main purpose of Building Blocks is to visualise data quickly and efficiently.

Building Blocks are available from SAPUI5 version 1.96 and are part of the sap.fe.macros library.

What are SAP Fiori Building Blocks?

Unlike traditional SAPUI5 Controls, SAP Fiori Building Blocks act as templates or wrappers around UI5 Controls. Depending on the bound data and specified attributes, Building Blocks generate the appropriate UI controls to represent the data dynamically. They provide aunified interface that abstracts the underlying implementation, allowing developers to create reusable code components with less effort. This modular architecture improves maintainability and accelerates development. The SAP Fiori elements framework offers a predefined set of Building Blocks that developers can use to build application templates quickly. Explore the full list of SAP Fiori Building Blocks here:

https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/buildingBlocks/buildingBlockOverview

Example: Using the Field Building Block in SAP Fiori

A commonly used SAP Fiori Building Block is the Field block (sap.fe.macros.Field).

The property metaPath is mandatory and determines the target object for the Field.

The property readOnly, if set to true, prevents modification of the Field’s content.

Depending on the data element type (e.g., Time, Date, Currency), the Field block automatically adjusts its UI representation to match the appropriate format.

ABAP CDS View:

UI5xml:

Result in UI5 application:

Navigation Example in SAP Fiori Building Blocks

The macros’ library classes are designed to simplify navigation between data and the creation of actions in SAPUI5 applications. A Quick View link is automatically generated for a CDS property, if that property is a key field and the correct UI Facet annotations are defined:

ABAP CDS Views:

ABAP CDS Views Metadata Extension:

UI5 xml:

Resultin UI5 application:

Adapting Freestyle Apps with SAP Fiori Building Blocks

Youcan adapt a freestyle app to run within the SAP Fiori elements framework and use Building Blocks. To achieve this, your app should use the “Custom Page” template. For more information, refer to the official SAP documentation:

https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/buildingBlocks/guidance/guidanceCustomApps

Leveraging SAP Fiori Building Blocks accelerates the development of SAPUI5 applications, making it easier to create interfaces that align with SAP Fiori design guidelines. Additionally, standard functionalities like draft handling, side effects and navigation are built-in and require minimal manual implementation. Thanks to the flexible programming model, you can choose to develop your application entirely with the SAP Fiori elements framework or retain freestyle components where needed.