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.

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.

Prerequisites

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 Flexibility of the Programming Model for 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.

ExerciseStart Exercise

Steps

  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
    1
    <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros"> <macros:Table metaPath="to_Booking/@com.sap.vocabularies.UI.v1.PresentationVariant" header="Bookings" personalization="Column" readOnly="{ui>/isEditable}" id="OwnBookingsTable" > </macros:Table> </core:FragmentDefinition>

  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.

Result

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

Note

Next Steps

For more information, see:

Learning

SAP FacebookSAP YoutubeSAP LinkedIn