In this exercise, you will edit the table columns of the list report. You will do the following:
- Remove the Time Stamp column.
- Move the Overall Status column infront of the Booking Fee column.
- Add a new Description column and placing it after the Travel ID column.
Prerequisites
You have completed the exercise Enable Initial Load for the List Report Table in the unit Configuring General Settings of List Reports and Object Pages (lesson: Configuring Initial Load Setting for Your App).
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 from List Report to open the Page Editor.
Expand Columns. You can see all the columns that are currently available in the list report table.
Remove the Time Stamp column.
Select Time Stamp from the Column list. In the right-hand side pane, you can see the settings for the Time Stamp column that you can configure.
Select the delete icon from the highlighted Time Stamp column. The Delete confirmation dialog pops up.
Select Delete from the Delete confirmation dialog. The column is deleted.
Move the Overall Status column before the Booking Fee column.
Select the Move Up icon for the Overall Status column. The column moves up and is placed before Total Price.
Select the Move Up icon again for the Overall Status column. It is now placed before the Booking Fee column.
Select the Edit in source code icon to open the annotation.xml. You can see that the @UI.LineItem record for OverallStatus has been moved up and placed before BookingFee.
Add a new Description column and place it after the Travel ID column.
Select the Columns option from the Page Editor. The Columns row gets highlighted.
Select the add icon from the end of the highlighted row.
Choose Add Basics Columns from the dropdown list. The Add Basic Columns dialog opens.
Select the dropdown for the Columns field.
Choose Description from the list.
Select Add. The Description column is added at the bottom of the list.
Move the Description column up by using the Move Up icon.
Keep moving the column up using the same icon until the Description column is placed directly after the Travel ID column.
Select the Edit in source code icon to open the annotation.xml for the Description column. You can see that the @UI.LineItem record for Description has been added on the second position.
Switch to the app preview in your browser. You can see that a new column Description has been added after the Travel ID column. You can also see that the Overall Status column has been placed before the Booking Fee column.
Select the Show More per Row icon from the table toolbar. You can see that Time Stamp has been removed from the table columns.
Result
You successfully added and edited certain columns of the list report table 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.