In this exercise, you will fill the subobject page, that you created in the previous exercise, with the data relevant to the booking. For now, only the technical ID is displayed on the page since the subobject page is not configured. You will add the following to the page:
- Booking ID as the page title.
- Airline logo as an image.
- Data point sections displaying the name of the airline, departure time, departure airport, arrival time, and destination airport.
Prerequisites
You have completed the exercise Configure Navigation to the Subobject Page in the unit Getting an Overview of the Navigation Concept in SAP Fiori Elements Apps (lesson: Configuring Internal Navigation).
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.
Steps
Open SAP Business Application Studio.
Right-click on the travels project of your EXPLORER.
Choose the Show Page Map option from the subsequent menu.
Set the booking ID and the airline logo as the page title.
Select the edit icon for the Travel_BookingObjectPage of the Page Editor.
Select the Header option for the object page. The right-hand side pane opens where you can manage different settings for the header.
Enter Booking as the Type Name. This is the name of the subobject page.
Select the global icon from the Type Name field.
Select Apply from the subsequent popup.
Select the dropdown from the Title field.
Choose BookingID from the list.
Select the dropdown from the Image field from the right-hand side pane.
Choose _Carrier/AirlinePicURL from the list.
Switch to the app preview in your browser. You can see that the airline logo and the booking ID have been added to the header of the subobject page.
Add data point sections displaying the name of the airline, departure time, departure airport, arrival time, and destination airport to the header.
Select the add option from the Header Sections of Travel_BookingObjectPage in Page Editor.
Choose Add Data Point Section from the list.
Select the dropdown icon for the Value Source Property field within the Add Data Point Section dialog box.
Choose the following properties from the _Connection list:
- AirlineID_Text
- DepartureTime
- DepartureAirport
- ArrivalTime
- DestinationAirport
Select Add from the Add Data Point Section dialog box. You can see that all the selected properties are listed within the Header Sections.
Select AirlineID_Text from the list.
Enter Airline as the label within the Label field on the right-hand pane.
Select the global icon from the Label field.
Select Apply from the subsequent popup.
Select Departure Time from the Header Sections list.
Enter Departure Time as the label within the Label field on the right-hand pane.
Select the global icon from the Label field.
Select Apply from the subsequent popup.
Select Departure Airport from the Header Sections list.
Enter Departure Airport as the label within the Label field on the right-hand pane.
Select the global icon from the Label field.
Select Apply from the subsequent popup.
Select Arrival Time from the Header Sections list.
Enter Arrival Time as the label within the Label field on the right-hand pane.
Select the global icon from the Label field.
Select Apply from the subsequent popup.
Select Destination Airport from the Header Sections list.
Enter Destination Airport as the label within the Label field on the right-hand pane.
Select the global icon from the Label field.
Select Apply from the subsequent popup.
You have now created the header sections and have maintained their labels.
Select the Edit in source code icon for the Header row of Travel_BookingObjectPage.
You can see that the Page Editor has added UI.HeaderInfo annotation for the header.
Select the Header Sections row from the Page Editor.
Select the Edit in source code icon for the Header Sections.
You can see that the Page Editor has added UI.HeaderFacets records for the five data point sections. Each of them references a corresponding UI.DataPoint annotation.
Scroll down to see the corresponding UI.DataPoint annotations.
Switch to the app preview in your browser. You can see that the five data point sections have been added to the subobject page header.
Select the right chevron to expand the object page.
Select the left chevron to expand the subobject page.
Select the full screen icon from the subobject page to expand it. You have observed the responsive behavior of the subobject page. As the list report is not visible now, the title of the subobject page gets displayed.
Result
You successfully configured the subobject page header using the Page Editor. You can also configure the subobject page using the guided development guides Configure object page header and Add a header facet to an object page using data points.
Note
You can find the solution for this exercise on GitHub.