将关键指标放置在页眉区域

学习目标

用最重要的数据填充对象页面页眉。

对象页面页眉

对象页面显示有关某个对象的详细信息。它可以包含多个部分，例如表、图表和表单。

对象页面的顶部区域称为对象页面页眉。它可以由标题、描述、图像、一些操作组成，并包含若干称为 facet 的页眉部分。页眉 facet 是容器。你可以将不同类型的微型图表、进度指示器、评分指示器和关键指标添加到页眉 facet 中。有关页眉 facet 的更多信息，请参阅 Header Facets。

关键指标由 @UI.DataPoint 注解表示。通常，数据点是一个数字，但也可以是文本，例如状态值。有关数据点的更多信息，请参阅 Data Points。

将 Travel Status、Total Price 和 Deduct Discount 操作添加到页眉区域

在本练习中，你将学习在对象页面的页眉区域中配置关键指标和操作。你可以使用名为 Add a Header Facet Using Data Points 的引导式开发辅助工具，也可以使用页面编辑器通过数据点来配置页眉 facet。

使用场景

用户必须能够像在列表报表中一样，在对象页面上执行 Deduct Discount 操作。他们必须能在对象页面页眉中醒目地看到 Total Price 和 Travel Status 这两个关键指标。

任务流

你将首先把 Deduct Discount 操作添加到对象页面页眉。你可能已经在 CAP 服务中创建并实现了该操作，并在之前的某个练习中将其用于列表报表表工具栏。你可以使用页面编辑器来配置它。

接下来，你将学习如何添加 Total Price 和 Travel Status 这两个关键指标作为数据点页眉部分。页面编辑器也可以帮助你实现这一目标。

前提条件

你已完成单元在列表报表中使用多个视图中的练习使用单表模式创建多个表视图（课程：使用单表模式配置多个视图）。或者，你也可以查看其解决方案分支：solution/create-multiple-table-views-single-table-mode。

观看模拟并执行步骤

本练习包含一个模拟，会引导你完成下面描述的所有步骤。你可以跟着模拟并使用自己的试用账户执行这些步骤。

练习：开始练习（SAP 官方交互式练习）

步骤

添加 Deduct Discount 操作。
在 SAP Business Application Studio 中打开你的 CAP 项目。
在 Explorer 视图中，选择 *Projects\fiori-elements-v4-cap-advanced\app\travel_processor\webapp*。
右键单击 webapp。
选择 Show Page Map。出现 Page Map-travel。
选择对象页面的编辑图标。出现 TravelObjectPage 的页面映射。
在 Header 下，选择 Actions。
在 Actions 下，选择添加图标。出现 Add Actions 对话框。
从 Actions 下拉列表中，选择 TravelService.deductDiscount。
选择 Add。操作 deductDiscount 被添加。
在右侧窗格中，在 Label 下输入标签名称 Deduct Discount。
选择与标签名称对应的地球图标。
选择 Apply。标签文本被添加到 i18n.properties 文件中。
添加数据点页眉 Travel Status。
切换回 SAP Business Application Studio。页面编辑器仍然处于打开状态。
在 Header 下，选择 Header Sections。
选择添加图标。
选择 Add Data Point Section。出现 Add Data Point Section 对话框。
从 Value Source Property 下拉列表中，选择 TravelStatus_code。
选择 Add。
在右侧窗格中，在 Label 下输入标签名称 Travel Status。
选择与标签名称对应的地球图标。
选择 Apply。标签文本被添加到 i18n.properties 文件中。
在 Criticality 下，从下拉列表中选择 criticality。
添加数据点页眉 Total Price。
切换回 SAP Business Application Studio。页面编辑器仍然处于打开状态。
在 Header 下，选择 Header Sections。
选择添加图标。
选择 Add Data Point Section。出现 Add Data Point Section 对话框。
从 Value Source Property 下拉列表中，选择 TotalPrice。
选择 Add。
在右侧窗格中，在 Label 下输入标签名称 Total Price。
选择与标签名称对应的地球图标。
选择 Apply。

结果

你已经学会了在对象页面页眉中将关键指标可视化为数据点部分。你还将应用特定的操作添加到了页眉。

注意

你可以在 GitHub 上找到本练习的解决方案。

解决方案分支是 solution/put-travel-status-total-price-deduct-discount-to-header-area-op 。

你可以在 GitHub 上查看与上一个分支相比的代码更改。

后续步骤

有关更多信息，请参阅

Object Page Elements
Displaying Actions on the Object Page
Setting Up the Object Page Header
Object Page Floorplan