Using Building Blocks

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.

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.

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

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12345678910
   <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.