Name	Name	Last commit message	Last commit date
parent directory ..
images	images
README.md	README.md

Exercise 6 - Flexible Programming Model: Extending the Object Page with a Custom Section and Building Blocks

In this exercise, we will combine UI5 freestyle controls with Fiori elements building blocks in a custom section.
With the table building block, we get the same behaviour and looks of the replaced table section.

Exercise 6.1 Remove existing Section via Page Map

The Page Map provides several ways of configuring the app and also allows to add and remove UI elements.
(1) In the SAP Business Application Studio, click the corresponding tile on the Application Information tab.

(2) On the Page Map tile Object Page, click Configure Page .

(3) In the Page Editor for the object page, expand Sections and delete section My Itinerary by clicking .

(4) Confirm by clicking .

In the preview browser tab of the app, verify that the object page booking table section is not visible anymore.

Exercise 6.2 Adding a Custom Section via Page Map

(5) In the Page Editor, click in the top right corner of area Sections.

(6) In the combo box, select .

In the dialog Add Custom Section, enter My Itinerary as title.
(7) On the right end of the Title input field, click icon .

(8) In the dialog, click .

(9) Enter CustomSection as Fragment Name.

(10) Open the drop-down Anchor Section.

(11) Select .

With the Section Position set to After, this defines where the custom section should be located on the Object Page.

(12) Set Generate Event Handler (Controller) to true and confirm dialog by clicking Add.

Exercise 6.3 Replace Generated XML Fragment Content

(13) On section My Itinerary, click Navigate to source code .

(14) This will open up generated file CustomSection.fragment.xml.

Replace the content of file CustomSection.fragment.xml with the following xml snippet:

<core:FragmentDefinition
 xmlns:core='sap.ui.core'
 xmlns='sap.m'
 xmlns:l='sap.ui.layout'
 xmlns:macros='sap.fe.macros'
>
<VBox core:require="{handler: 'sap/fe/cap/managetravels/ext/fragment/CustomSection'}">  
 <MessageStrip
   text='All bookings for travel {TravelID} got confirmed by the agency.'
   showIcon='true'
   class='sapUiSmallMarginBottom'>
 </MessageStrip>     
 <l:Grid hSpacing='1' containerQuery='true'
   defaultSpan='L12 M12 S12'>
  <l:content>
  <macros:Table metaPath='to_Booking/@com.sap.vocabularies.UI.v1.LineItem'
     id='bookingTable'/>
  </l:content>
 </l:Grid>
</VBox>
</core:FragmentDefinition>

(15) The xml fragment combines a SAPUI5 MessageStrip control with the building block Table from namespace sap.fe.macros.
Only two properties are defined:

the table control identifier
metaPath defining the relative path from the current page's context (entity Travel) to the LineItem annotation of the associated entity Booking
(via association 'to_Booking/@com.sap.vocabularies.UI.v1.LineItem')

Exercise 6.4 Testing the Table Building Block

Switch to the preview browser tab of the app.
The object page now shows the custom section with the message strip control and table building block.
We will now check whether it behaves exactly as the original booking table from the object page section that was replaced.

(16) Click Edit .

We can see that the table building block follows the edit state of the page.
Let us check whether the edit flow is also working as expected.
(17) Open the input help for field Flight Number by clicking .