In this exercise, you will add a section to the subobject page body containing the plane details.
Prerequisites
You have completed the exercise Set Up the Subobject Page Header in the same unit (lesson: Configuring the Header Area of the Object Page).
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 webapp from your travels project.
Choose the Show Page Map option from the subsequent menu.
Select the edit icon for the Travel_BookingObjectPage within the Page Editor.
Select the Sections row.
Select the add icon for the Sections row.
Choose Add Identification Section from the list.
Enter Plane Details in the Label field of the Add Identification Section dialog box. Plane Details are added within the Sections row of the Page Editor.
Expand the Plane Details row.
Expand Form within Plane Details.
Select Fields.
Select the add icon for Fields.
Choose Add Basic Fields option from the list.
Select the dropdown icon for the Fields field within the Add Basic Fields dialog box.
Choose _Flight/PlaneType, _Flight/MaximumSeats, and _Flight/OccupiedSeats from the list.
Select Add from the Add Basic Fields dialog box. You can see that all the three fields have been added within Fields.
Select the Edit in source code icon for Maximum Capacity to open the file where the annotation has been added to.
You can see the UI.Identification records that have been added by the page editor for all the three fields.
Select the Plane Details row from within the Sections.
Select the global icon from the Label field of the right-hand side pane.
Select Apply from the subsequent popup.
Select the Edit in source code icon for the Plane Details row.
You can see the UI.Facets record that has been added by the Page Editor. It creates a new section. It references the UI.Identification annotation that defines the content of the section.
Scroll down to see the UI.Identification annotation definition for all the three fields.
Switch to the app preview in your browser. You can see the section in the subobject page body containing plane details.
Select the right chevron to expand the object page.
Select the full screen option for the subobject page to expand it. You have observed the responsive behavior of your app, particularly the full screen mode of the subobject page.
Result
You successfully added a section to the subobject page body using the page editor. You can also add a new section using the guided development guide Add a new section to an object page.
Note
You can find the solution for this exercise on GitHub.