Getting an Overview of SAP Fiori Elements for OData V4

Getting an Overview of ABAP RESTful Application Programming Model

Configuring ABAP CDS Annotations in the Back End

Getting an Overview of SAP Fiori Tools

Understanding SAP Fiori Elements Floorplans

Configuring General Settings of List Reports and Object Pages

Configuring Tables

Getting an Overview of the Navigation Concept in SAP Fiori Elements Apps

Configuring Object Pages

Examining the Flexible Programming Model

Deploying an SAP Fiori Elements App

Using Building Blocks

Objective

After completing this lesson, you will be able to use building blocks provided by SAP Fiori elements to extend your apps with minimal custom coding.

Building Blocks

Building blocks are reusable pieces of code that are consistently implemented in the SAP Fiori elements framework. SAP Fiori elements floorplans consist internally of these building blocks. If you use building blocks, you can be sure that your app follows the SAP Fiori design guidelines and that standard features, such as draft handling or side effects, are automatically supported by these building blocks. They are metadata driven, just like the floorplans.

You can extend standard floorplans using building blocks in extension points. You can also create custom pages by combining building blocks.

Building blocks are not SAPUI5 controls, but rather a set of templating instructions that used to create a specific control tree, depending on the bound data structures.

See the list of all available building blocks: Overview of Building Blocks

You can also explore sap.fe.macros, a library of building blocks provided by SAP Fiori elements.

Add a Field Building Block to Your Custom Section

In this exercise, you will add an information message to the Itinerary custom section. The message will be displayed above the geo map. You will use a field building block for it.

Prerequisites

You have completed the exercise Add a Custom Section to the Object Page in the same unit (lesson: Using Extension Points).

Watch the Simulation and Perform the Steps

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

ExerciseStart Exercise

Steps

Open SAP Business Application Studio.
Select GeoMap.fragment.xml from the webapp/ext folder of your travels project.

Add the following sample code inside the VBox control to add an information message:

Code Snippet

123456
<HBox class="">
   <Text text="The bookings were confirmed on" class="sapUiTinyMarginEnd"/>
   <macros:Field readOnly="true" metaPath="CreatedAt" id="custom-flightdate"/>
   <Text text="by" class="sapUiTinyMarginBeginEnd"/>
   <macros:Field readOnly="true" metaPath="AgencyID" id="custom-airline"/>
</HBox>

The IDs for the newly added UI controls are missing . Select <HBox line from the code.
Select the Quick Fix icon from the selected <HBox line.
Select the Generate IDs for the entire fileoption from the list. The IDs get generated for the newly added UI controls.
Switch to the app preview in your browser.
Select the Itinerary tab from the object page. You can see that the information message is added to the custom section.

Result

You successfully added an information message to the Itinerary custom section. The message is displayed above the geo map. You used a field building block for it.

Note

You can find the solution for this exercise on GitHub.

Next lesson