Placing Key Figures in the Header Area

Objective

After completing this lesson, you will be able to populate the object page header with the most important data

The Object Page Header

The object page displays the detailed information about an object. It can contain multiple sections such as tables, charts, and forms.

The top section of the object page is called the object page header. It can consist of a title, a description, an image, some actions, and contains a number of header sections known as facets. Header facets are containers. You can add different types of micro charts, progress indicator, rating indicator and key figures into the header facets. For more information about header facets, see Header Facets.

The key figures are represented by the @UI.DataPoint annotation. Usually, the data point is a number but can also be a text, for example, a status value. For more information about data points, see Data Points.

Add Travel Status, Total Price, and the Deduct Discount Action to the Header Area

In this exercise, you will learn to configure the key figures and actions in the header area of the object page. You can use either the guided development aid named Add a Header Facet Using Data Points or the Page Editor for configuring the header facets by using data points.

Usage Scenario

The user must be able to execute the action Deduct Discount on the object page similar to the list report. They must see the two key figures Total Price and Travel Status prominently on the object page header.

Task Flow

You will first add the action Deduct Discount to the object page header. You may have already created and implemented this action in your CAP service, and used it in the list report table toolbar in one of the previous exercises. You can use the Page Editor to configure it.

Next, you can learn to add two key figures Total Price and Travel Status as the data point header sections. The Page Editor can also help you to achieve this.

Prerequisites

You have completed the exercise Create Multiple Table Views Using Single Table Mode in the unit Using Multiple Views in the List Report (lesson: Configuring Multiple Views Using Single Table Mode). Alternatively, you can check out its solution branch: solution/create-multiple-table-views-single-table-mode.

Watch the Simulation and Perform the Steps

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.

ExerciseStart Exercise

Steps

  1. Add the action Deduct Discount.

    1. Open your CAP project in SAP Business Application Studio.

    2. In the Explorer view, select Projects\fiori-elements-v4-cap-advanced\app\travel_processor\webapp.

    3. Right-click on webapp.

    4. Select Show Page Map. The Page Map-travel appears.

    5. Select the Edit icon of the object page. The page map of TravelObjectPage appears.

    6. Under Header, select Actions.

    7. Under Actions, select the Add icon. The Add Actions dialog appears.

    8. From the Actions drop-down, choose TravelService.deductDiscount.

    9. Select Add. The action deductDiscount is added.

    10. In the right pane, under Label, enter the label name Deduct Discount.

    11. Select the globe icon corresponding to the label name.

    12. Select Apply. The label text is added to the i18n.properties file.

  2. Add the data point header Travel Status.

    1. Switch back to the SAP Business Application Studio. The Page Editor is still open.

    2. Under Header, select Header Sections.

    3. Select the Add icon.

    4. Choose Add Data Point Section. The Add Data Point Section dialog appears.

    5. From the Value Source Property drop-down, choose TravelStatus_code.

    6. Select Add.

    7. In the right pane, under Label, enter the label name Travel Status.

    8. Select the globe icon corresponding to the label name.

    9. Select Apply. The label text is added to the i18n.properties file.

    10. Under Criticality, from the drop-down, chose criticality.

  3. Add the data point header Total Price.

    1. Switch back to the SAP Business Application Studio. The Page Editor is still open.

    2. Under Header, select Header Sections.

    3. Select the Add icon.

    4. Choose Add Data Point Section. The Add Data Point Section dialog appears.

    5. From the Value Source Property drop-down, choose TotalPrice.

    6. Select Add.

    7. In the right pane, under Label, enter the label name Total Price.

    8. Select the globe icon corresponding to the label name.

    9. Select Apply.

Result

You have learned to visualize the key figures as data point sections in the object page header. You have also added the application-specific action to the header.

Note

Next Steps

For more information, see

Log in to track your progress & complete quizzes