In this exercise, you will add a table displaying the bookings of a travel. It will be displayed in a separate section underneath the General Information section on the object page.
Prerequisites
You have completed the exercise Edit Table Columns of the List Report in the same unit (lesson: Adding and Editing Table Columns of the List Report Table).
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.
Enter Bookings as a section in the object page.
Select the edit icon from Object Page to open the Page Editor.
Select the add icon from Sections.
Choose Add Table Section from the dropdown list.
Add Bookings as the Label in the subsequent Add Table Section dialog.
Select the global icon within the Label field.
Select Apply from the subsequent popup.
Select the dropdown for the Value Source field.
Select the _Booking option.
Select Add from the Add Table Section dialog. You can now see Bookings added as a section after General Information in the Page Editor.
Choose the fields that you want to display as the table columns in the Bookings section.
Expand the Bookings section within the Page Editor.
Expand Table within the Bookings section.
Select Columns.
Select the add icon from the highlighted Columns row.
Select Add Basic Columns from the list.
Select the following columns that can be displayed in the Bookings section:
- BookingID
- BookingDate
- CarrierID
- ConnectionID
- CustomerID
- FlightDate
- FlightPrice
Select Add from the dialog box. You can see all the selected columns are now added within Bookings.
Look up the generated annotations for the Bookings section and the table that you have configured in the previous steps.
Select the Bookings section from the Page Editor.
Select the Edit in source code icon to open the annotation.xml for the Bookings section. You can see that a new record of the @UI.Facets annotation has been added to display a new section.
The annotation is of type UI.ReferenceFacet. The label references the generated entry in the i18n file. The target references @UI.LineItem, with the qualifier as i18nbookings annotating the Booking entity.
Press CTRL+ LEFT MOUSE CLICK on the UI.LineItem to navigate to the UI.LineItem definition.
Switch to the app preview in your browser. You can see the Bookings section under the General Information section. The Bookings section contains the table with the columns that you have configured.
Display the customer’s last name along with the Customer ID.
Switch to SAP Business Application Studio.
Select the Customer ID column from the Page Editor.
Select the dropdown for the Text from the right-hand side pane.
Select _Customer/LastName option from the list. You have now updated the Customer ID column to display the customer's last name.
Change the column label from Customer ID to Customer.
Enter Customer in the Label field on the right-hand side pane for the Customer ID column.
Select the global icon from the Label field.
Select Apply from the subsequent popup. You have now changed the column label from Customer ID to Customer.
Change the column label from Airline ID to Airline.
Select the Airline ID column from the Page Editor.
Enter Airline in the Label field on the right-hand side pane of the selected column.
Select the global icon from the Label field.
Select Apply from the subsequent popup. The column label is now changed to Airline.
Display the airline name in addition to the airline abbreviation
Select the dropdown within the Text field from the right-hand side pane.
Select _Carrier/Name from the list.
Select the Edit in source code icon for the Text field to open the annotation.xml file. You can see that a corresponding Common.Text annotation has been added for CarrierID to the local annotation file.
Switch to the app preview in your browser. You can see that the airline name is now displayed in addition to the abbreviation. The column name is now changed to Airline. Also, along with the Customer ID, the customer's name is also displayed. The column title has been updated to Customer.
Remove the Customer ID from the Customer column.
Switch to SAP Business Application Studio.
Select the Customer column.
Select the dropdown of the Text Arrangement field from the right-hand side pane.
Choose the Text Only option from the list.
Select the Edit in source code icon. You can see that the UI.TextArrangement annotation with TextOnly has been added to Customer ID. This means that only the customer's name is displayed and the ID remains hidden.
Switch to the app preview of your browser. You can see that the customer ID is now hidden.
Add a picture of the airline logo in a new column at the beginning of the bookings table.
Switch to SAP Business Application Studio.
Select Columns from the Page Editor.
Select the add icon from the highlighted row.
Select Add Basic Columns from the list.
Select the dropdown from the Columns field of the Add Basic Column dialog box.
Choose AirlinePicURL from the list.
Select Add from the Add Basic Column dialog box. You can see that a new field Airline Logo has been added to the Columns list.
Select the Move up icon for the Airline Logo row to move the column up in the list of columns.
Keep moving the column up the list until Airline Logo is at the top of the Columns list.
Select the Edit in source code icon for Airline Logo. You can see that the record for the Airline Logo has been added to UI.LineItem.
Switch to the app preview of your browser. You can see that the Airline Logo column is displayed.
Switch to SAP Business Application Studio.
Select the Airline Logo column from the Page Editor.
Remove Airline Logo from the Label field on the right-hand side pane for the column.
Switch to the app preview of your browser. You can see that the Airline Logo column title is now removed.
Choose the Show More per Row icon to view all the relevant details for the Bookings.
Result
You successfully added the bookings table to the object page of the Manage Travels app using the Page Editor. You can also do this using the guided development guide Add and Edit Table Columns.
Note
You can find the solution for this exercise on GitHub.