使用微型图表丰富对象页面页眉

学习目标

  • 将子弹微型图表和进度指示器配置为对象页面页眉部分。

使用场景

用户必须能够在对象页面页眉中看到每次差旅的进度指示器，类似于列表报表中的那样。此外，用户必须能够在子对象页面的页眉中看到每次预订的附加费总额。

任务流程

在本练习中，您将首先把差旅的进度指示器添加到页眉部分。您可能已经在 CAP 服务中创建并实现了用于计算和更新差旅进度的方法。在先前的某个练习中，您已将进度指示器添加为表列。在这里，您将使用 Page Editor 将其作为页眉部分添加到差旅对象页面。您也可以使用名为 Add a header facet using Data Points 的引导式开发辅助功能。

接下来，您将添加一个子弹微型图表。该子弹微型图表将作为子对象页面中的页眉部分，显示每次预订的附加费总额。您可以使用 Page Editor 添加该子弹微型图表。

前提条件

您已完成单元 塑造对象页面的页眉区域 中的练习 将差旅状态、总价和扣除折扣操作添加到页眉区域（课程：在页眉区域放置关键指标）。或者，您可以检出其解决方案分支：solution/put-travel-status-total-price-deduct-discount-to-header-area-op。

观看模拟并执行步骤

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

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

步骤

  1. 将进度指示器添加到页眉。

  2. 在 Business Application Studio 中打开您的 CAP 项目。

  3. 在 Explorer 视图中，选择 *Projects\fiori-elements-v4-cap-advanced\app\travel_processor\webapp*。

  4. 右键单击 webapp。

  5. 选择 Show Page Map。将出现 Page Map-travel。

  6. 选择对象页面的 Edit 图标。将出现 TravelObjectPage 的 Page Map。

  7. 展开 Header Sections。您可以看到可用的页眉部分：Travel Status 和 Total Price。

  8. 选择与 Header Sections 对应的 Add 图标。

  9. 选择 Add Progress Section。将出现 Add Progress Section 对话框。

  10. 从 Value Source Property 下拉菜单中，选择 Progress。

  11. 选择 Add。

  12. 在右侧窗格中的 Label 下，输入标签名称 Progress of Travel。

  13. 选择与标签名称对应的地球图标。

  14. 选择 Apply。标签文本会被添加到 i18n.properties 文件中。

  15. 将子弹微型图表添加到子对象页面的页眉。

  16. 切换回 SAP Business Application Studio。Page Editor 处于打开状态。

  17. 选择 Page Map 以返回 Page Map。

  18. 选择子对象页面的 Edit 图标。将出现 BookingObjectPage 的页面图。

  19. 选择与 Header Sections 对应的 Add 图标。

  20. 选择 Add Micro Chart Section。将出现 Add Chart Header Section。

  21. 从 Chart Type 下拉菜单中，选择 Bullet。

  22. 选择 Add。

  23. 从 Value 下拉菜单中，选择 TotalSupplPrice。

  24. 在 Maximum Value 下拉菜单中，输入值 120。

  25. 选择 Add。

  26. 在右侧窗格中的 Label 下，输入标签名称 Total Supplements。

  27. 选择与标签名称对应的地球图标。

  28. 选择 Apply。标签文本会被添加到 i18n.properties 文件中。

  29. 选择 Edit in source file。layout.cds 文件会打开。

  30. 将 TargetValue: 100 属性添加到 @UI.DataPoint 注解中。

  31. 为 CriticalityCalulation 添加值 DeviationRangeLowValue: 20 和 ToleranceRangeLowValue: 75。

结果

您已学会将进度指示器添加到 Travel 对象页面的页眉部分。您还学会了将子弹微型图表添加到 Booking 对象页面（子对象页面）的页眉部分。

注意

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

  • 解决方案分支是 solution/add-bullet-micro-chart-and-progress-indicator-to-op 。

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

后续步骤

有关更多信息，请参阅

  • Header Facets

  • Progress Indicator Facet

  • Micro Chart Facet