使用构建块

学习目标

  • 使用 SAP Fiori elements 提供的构建块，以最少的自定义编码扩展你的应用。

构建块

构建块是 SAP Fiori elements 框架中一致实现的可复用代码片段。SAP Fiori elements floorplan 在内部由这些构建块组成。如果你使用构建块，就可以确保你的应用遵循 SAP Fiori 设计指南，并且草稿处理或副作用（side effect）等标准功能会由这些构建块自动支持。它们与 floorplan 一样，都是元数据驱动的。

你可以在扩展点中使用构建块来扩展标准 floorplan。你也可以通过组合构建块来创建自定义页面。

构建块不是 SAPUI5 控件，而是一组模板化指令，用于根据所绑定的数据结构创建特定的控件树。

请查看所有可用构建块的列表：构建块概览

你还可以探索 sap.fe.macros，这是由 SAP Fiori elements 提供的构建块库。

视频：本节含 SAP 官方视频（视频 ID 1_cbc3g2t7），需在 learning.sap.com 在线观看。

在 Display Customers 应用中使用表构建块创建表

当 UI 的某些部分无法使用注解构建时，你可以使用自定义部分。

在本练习中，你希望在 Display Customers 应用中，将客户自己的预订显示为对象页面表。此外，还应在表上方显示一条消息条（这将在下一个练习中实现）。因此，你将使用页面编辑器创建一个自定义部分，并向其中添加表构建块。

任务流

你将首先使用页面编辑器在应用的对象页面上创建一个自定义部分。然后，向其中添加一个自定义表构建块。

前提条件

你已完成单元探索面向 OData V4 的 SAP Fiori Elements 编程模型的灵活性中的练习向 Manage Travels 应用对象页面上的表添加自定义列（课程：使用扩展点）。或者，你也可以查看其解决方案分支：solution/add-custom-column-to-table-on-op。

观看模拟并执行步骤

本练习包含一个展示所有步骤的模拟。你可以在自己的试用账户中跟着模拟操作。

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

步骤

  1. 启动 Display Customers 应用的预览。在表中选择第一个客户。 你将向对象页面添加一个包含客户自身预订的表构建块。该表将被添加到自定义部分中。该自定义部分将放置在 General Information 部分之后。

  2. 在 SAP Business Application Studio 中，使用页面编辑器创建自定义部分。

  3. 右键单击 customer 文件夹。

  4. 选择 Show Page Map 选项以打开页面编辑器。

  5. 单击铅笔图标以编辑乘客对象页面。

  6. 单击 Section 中的加号图标。

  7. 选择 Add Custom Section。

  8. 向 Custom Section Title 中添加 Own Bookings。

  9. 单击地球图标以添加本地化，然后选择 Apply。

  10. 向 fragment name 中添加 bookings。

  11. 展开 Anchor Section 下拉列表并选择 General Information。

  12. 选择 Add 按钮。 你可以看到，一个名为 Own Bookings 的自定义部分已出现在对象页面的 Sections 下。

  13. 在文件资源管理器中展开 *customer>webapp>ext*。你可以看到页面编辑器生成了 *ext* 文件夹，其中包含 *Bookings.fragment.xml* 文件。

  14. 打开 *Bookings.fragment.xml* 文件。你可以看到文件中已有一些预生成的 xml 代码。 向其添加以下代码片段：

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros"> <macros:Table metaPath="to_Booking/@com.sap.vocabularies.UI.v1.PresentationVariant" header="Bookings" personalization="Column" readOnly="{ui>/isEditable}" id="OwnBookingsTable" > </macros:Table> </core:FragmentDefinition>

  1. 切换到应用窗口以查看新表。

  • 从表中选择第一个客户。

  • 导航到对象页面。你可以看到包含 Bookings 表的自定义部分 Own Bookings 。

  • 选择 Own Bookings 选项卡。 你可以看到，通过在锚点栏中选择 Own Bookings，即可导航到该自定义部分。请注意，表构建块的外观和行为与基于注解的表完全相同。

结果

在本练习中，你借助页面编辑器创建了一个自定义部分，并向其中添加了表构建块。

注意

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

  • 解决方案分支是 solution/add-table-building-block 。

  • 你可以在 Github 上找到该分支与上一个分支直接对比的链接。

后续步骤

有关更多信息，请参阅：

  • Video series on flexible programming model for SAP Fiori elements

  • The Table Building Block