使用构件块

学习目标

  • 使用 SAP Fiori 元素提供的构件块，以最少的自定义编码扩展应用

构件块

构件块是在 SAP Fiori 元素框架中持续实施的可重用代码段。如果使用它们，则可以确保应用遵循 SAP Fiori 设计指导原则，并且构件块将自动支持草稿处理或副作用等标准功能。它们由元数据驱动，就像平面布置一样。

构件块也可以在平面布置之外使用。您可以在自定义应用程序或自定义扩展中使用它们。

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

检查所有可用 Building Block 的列表：Building Block 概览

您还可以检查 sap.fe.macros，这是 SAP Fiori 元素提供的构件块库。

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

向自定义部分添加字段构件块

在本练习中，您将向*"行程*"自定义部分添加信息消息。该消息将显示在地理地图上方。为其使用字段构件块。

前提条件

您已完成在同一单元（课程：使用扩展点）中将自定义部分添加到对象页面练习。

观看模拟并执行步骤

此练习包含指导您完成详细步骤的模拟。模拟后可以找到所有步骤。您可以遵循模拟并使用自己的试用账户执行步骤。

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

步骤

  1. 打开 SAP Business Application Studio。

  2. 从 travels 项目的 webapp/ext 文件夹中选择 GeoMap.fragment.xml 。

  3. 在 VBox 控件中添加以下示例代码以添加信息消息：

<HBox class="">
<Text text="The bookings were confirmed on" class="sapUiTinyMarginEnd"/>
<macros:Field readOnly="true" metaPath="CreatedAt" id="custom-flightdate"/>
<Text text="by" class="sapUiTinyMarginBeginEnd"/>
<macros:Field readOnly="true" metaPath="AgencyID" id="custom-airline"/>
</HBox>

  1. 缺少新添加的 UI 控件的标识。从代码中选择 <HBox 行。

  2. 从所选 <HBox 行中选择快速修复图标。

  3. 从列表中选择"为整个文件生成 ID"选项。为新添加的 UI 控件生成标识。

  4. 切换到浏览器中的应用预览。

  5. 在对象页面中选择 路线 选项卡。您可以看到信息消息已添加到自定义部分。

结果

您已成功将信息消息添加到行程自定义部分。该消息显示在地理地图上方。您为其使用了字段构件块。