Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

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. If you use them, you can be sure that your app follows the SAP Fiori design guidelines and that the standard features, like draft handling or side effects, will be automatically supported in your building blocks. They are metadata driven, just like the floorplans.

Building blocks can also be used outside of the floorplans. You can use them in your custom applications, or in your custom extensions.

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

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

You may also check 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.

Log in to track your progress & complete quizzes