Using Building Blocks

After completing this lesson, you will be able to:

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.

Create a Table Using the Table Building Block in the Display Customers App

You may use a custom section when some parts of your UI cannot be built using annotations.

In this exercise, you want to display customer's own bookings as an object page table, in the Display Customers app. Additionally, a message strip should be displayed above the table (this will be implemented in the next exercise). Thus, you will create a custom section using the Page Editor and add a table building block to it.

Task Flow

You will first use the Page Editor to create a custom section on the app's object page. Then, you will add a custom table building block to it.


You have completed the exercise Add a Custom Column to the Table on the Object Page of the Manage Travels App in the unit Discovering the Flexible Programming Model of SAP Fiori Elements for OData V4 (lesson: Using Extension Points). Alternatively, you can check out its solution branch: solution/add-custom-column-to-table-on-op.

Watch the Simulation and Perform the Steps

This exercise contains a simulation displaying all the steps. You can follow the simulation with your own trial account.


  1. Start the preview for the Display Customers app. Select the first customer in the table.

    You will add a table building block with customer's own bookings to the object page. The table will be added into a custom section. The custom section will be placed after the General Information section.

  2. In SAP Business Application Studio, create a custom section by using the Page Editor.

    1. Right click on the customer folder.

    2. Select the Show Page Map option to open the Page Editor.

    3. Edit the passenger object page by clicking on the pencil icon.

    4. Click on the plus icon in Section.

    5. Choose Add Custom Section.

    6. Add Own Bookings to the Custom Section Title.

    7. Click on the globe icon to add localization, and select Apply.

    8. Add bookings to the fragment name.

    9. Expand the Anchor Section dropdown and choose General Information.

    10. Select the Add button.

    You can see that a custom section called Own Bookings has appeared under Sections of the object page.

  3. Expand customer>webapp>ext in the file explorer. You can see that the Page Editor has generated the ext folder which includes the Bookings.fragment.xml file.

  4. Open the Bookings.fragment.xml file. You can see some pre-generated xml code in the file.

    Add the following code snippet to it:

    Code snippet
    <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros">

  5. Switch to the app window to see the new table.

    • Select the first customer from the table.
    • Navigate to the object page. You can see the custom section Own Bookings containing a Bookings table.
    • Select the Own Bookings tab.

    You can see that you can navigate to the custom section by selecting Own Bookings in the anchor bar. Note that the table building block looks and behaves identical to an annotation-based table.


In this exercise you have created a custom section with the help of the Page Editor and added the table building block to it.


Log in to track your progress & complete quizzes