使用扩展点

学习目标

  • 集成无法通过注解提供的前端组件。

扩展点

SAP Fiori elements 框架基于 SAPUI5 技术。您可能熟悉 SAPUI5 中的 模型-视图-控制器（Model View Controller） 概念。

在 视图 中，您可以定义要在 UI 中使用的 UI 控件。

控制器 包含定义模型和视图如何交互的方法。

模型 保存数据，并提供从数据库检索数据以及设置和更新数据的方法。

因此，在 freestyle SAPUI5 应用中，您必须定义视图，并在控制器中实现所需的方法，例如，当用户选择按钮时该按钮的事件处理程序。

SAP Fiori elements 框架会在运行时基于预定义的 floorplan、您的应用特定元数据、注解以及可选配置生成视图。因此，在标准的 SAP Fiori elements 应用中，开发环境里的项目中没有任何静态视图或控制器。

使用扩展点时，必须将静态 XML 片段添加到项目的 *webapp/ext* 文件夹中。如有需要，还可以添加控制器。Page Editor 可以生成这两个文件，包括尚不存在的 *ext* 文件夹。

扩展点是 SAP Fiori elements 框架提供的容器，用于挂接到标准的 SAP Fiori elements 运行时。在这里，您可以使用标准 SAPUI5 编程模型添加特定的 UI 控件或行为。

在自定义扩展中，您可以提供 SAP Fiori elements 未提供的功能，例如流程图或地图。

注意

优先使用标准的 SAP Fiori elements 功能。仅当所需功能并非开箱即用时，才将自定义扩展作为最后手段。扩展会增加复杂性：它们会增加初期开发工作量和长期维护开销，并可能引入 UI 不一致。遵循标准模式可确保更好的用户体验和更易维护的应用。

注意：您可以在 基于列表的页面的扩展 下找到列表报表的所有 SAP Fiori elements 扩展点，在 对象页的扩展 下找到对象页的所有扩展点，其中包含文档和示例代码。

向 Manage Travels 应用的对象页上的表添加自定义列

如果标准 floorplan 不能完全满足需求，您可以使用 SAP Fiori elements 提供的扩展点。在那里您可以添加自己的代码。

在本练习中，您将向子对象页上的 Booking Supplements 表添加一个自定义列。它将帮助用户选择何时供应其飞行餐食。为此，您将创建一个自定义列，并向其中添加 SegmentedButton 控件。

有关更多信息，请参阅 API 参考 sap.m.SegmentedButton - API 参考 - Demo Kit - SAPUI5 SDK (ondemand.com)。

任务流程

您首先会向 CAP 数据模型添加一个新属性，以确保 UI 端的选择会持久化到后端。然后，您将使用 Page Editor 在 UI 中添加一个自定义列。

接下来，您将添加 SegmentedButton 控件。最后，您将在控制器扩展中实现一个方法，用于更新这个新属性。

有关更多信息和示例，请参阅 sap.m.SegmentedButton - 示例 - Demo Kit - SAPUI5 SDK (ondemand.com)。

前提条件

您已完成单元 在对象页上应用动态字段控制并校验用户输入（课程：校验用户输入）中的练习 在对象页上为字段 Agency 添加校验。或者，您可以检出其解决方案分支：solution/add-validation-for-field-agency-on-op。

观看模拟并执行步骤

本练习包含一个展示所有步骤的模拟。您可以使用自己的试用账户跟随该模拟进行操作。

Exercise：Start Exercise（SAP 官方交互式练习）

步骤

  1. 向 Booking 实体添加一个新属性，用于持久化餐食时间的选择。

  2. 打开 *db/schema.cds* 文件。

  3. 在文件末尾添加以下代码片段：

entity MealOptionDeliveryPreference: CodeList { key code : String enum { SoonAfterTakeoff = 'S'; Midflight = 'M'; Late = 'L'; } default 'M' };

  1. 向 BookingSupplement 实体添加一个新属性 DeliveryPreference，它是指向先前定义的 MealOptionDeliveryPreference 实体的关联。它将持久化用户的选择。

DeliveryPreference : Association to MealOptionDeliveryPreference;

  1. 在 *db/data* 文件夹中创建新文件 *sap.fe.cap.travel-MealOptionDeliveryPreference.csv*，并向其中添加以下代码片段：

code;name;descr S;SoonAfterTakeoff;Delivery as early as possible after the take-off M;Midflight;Not too early not too late L;Late;Late in the flight while still allowing you to finish the meal or drink before the landing

  1. 使用 Page Editor 向子对象页上的 Booking Supplements 表添加一个自定义列。

  2. 打开 travel_processor 应用的 Page Editor。

  3. 选择 Booking Object Page > Booking Supplements > Table > Columns > Add Custom Column。

  4. 将 Serving Time of Meals 添加到新列的标题文本中。

  5. 选择地球图标并选择 Apply 以添加本地化。

  6. 将 ServingTimeOfMeals 添加到 Column Fragment Name。

  7. 从 Anchor Column 下拉菜单中选择 Product Price。

  8. 在 Generate Event Handler Controller 中选择 True。

  9. 新的自定义列 Serving Time of Meals 已被添加到 Columns 部分。

  10. 将自定义列内容的 XML 代码添加到 *app/travel_processor/webapp/ext/fragment/ServingTimeOfMeals.fragment.xml*。此文件由 Page Editor 生成，并包含一些初始 XML 代码。

  11. 用以下代码片段替换该 XML 代码：

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"> <SegmentedButton core:require="{handler: 'sap/fe/cap/travel/ext/fragment/ServingTimeOfMeals'}" id="SB1" selectionChange="handler.onSelectionChange" enabled="{ui>/isEditable}" selectedKey="{= ${DeliveryPreference_code}}"> <items> <SegmentedButtonItem id="_IDGenSegmentedButtonItem1" text="{i18n>early}" key="S" /> <SegmentedButtonItem id="_IDGenSegmentedButtonItem2" text="{i18n>mid}" key="M" /> <SegmentedButtonItem id="_IDGenSegmentedButtonItem3" text="{i18n>late}" key="L" /> </items> </SegmentedButton> </core:FragmentDefinition>

如您在 API 文档中所见，sap.m.SegmentedButton 控件有一个类型为 sap.m.SegmentedButtonItem 的聚合 items。后者派生自 sap.ui.core.Item，您可以使用它的任何构件，例如属性。在上面的代码片段中，您使用了它的 key 和 text 属性。 您可以在 XML 片段中使用 sap.m.SegmentedButton 的 selectionChange 事件，并将其绑定到您将在自定义控制器中实现的方法。该方法将在 UI 端的选择发生变化后更新后端中的属性。 您可以看到 XML 片段中使用了 sap.m.SegmentedButton 的两个属性：enabled 和 selectedKey。sap.m.SegmentedButton 的 selectedKey 属性绑定到您在后端引入的 DeliveryPreference_code 的值。它影响分段按钮的哪个键被选中。 Enabled 是以下对象的另一个属性： sap.m.SegmentedButton 。在上面的代码片段中， enabled 控件属性绑定到以下模型属性的值： ui 模型的属性 isEditable 。 Ui 模型是一个包含 UI 信息的 SAPUI5 JSON 模型。它由 SAP Fiori elements 管理。您不能更改它的值，但可以从自定义片段和自定义控制器中访问它，也可以评估它的公共属性 isEditable 。如果它被设置为 true ，则应用处于编辑模式。在这种情况下，分段按钮处于启用状态。 5. 在文件资源管理器中，打开 *app/travel_processor/webapp/i18n/i18n.properties* 文件，并粘贴您先前添加到 XML 片段中的三个 SegmentedButtonItems 的文本。

#XCOL: Custom column header text servingTimeOfMeals=Serving Time of Meals #XTIT: Delivery preference of the Meal during the flight deliveryPreference=Delivery Preference #XTIT: Early time of meal delivery during the flight early=early #XTIT: Mid time of meal delivery during the flight mid=mid #XTIT: Later time of meal delivery during the flight late=late

  1. 打开 *app/travel_processor/webapp/ext/fragment/ServingTimeOfMeals.js* 并粘贴以下代码片段：

sap.ui.define([ "sap/m/MessageToast" ], function(MessageToast) { 'use strict'; return { onSelectionChange: function(oEvent) { var sNewDeliveryPreferenceCode = oEvent.getParameter("item").getKey(); var oSegmBtn = oEvent.getSource(); oSegmBtn.getBindingContext().setProperty("DeliveryPreference_code", sNewDeliveryPreferenceCode); } }; });

一旦分段按钮的选择发生变化，就会调用 onSelectionChange 方法。 7. 切换到应用。您可以在 Booking Supplements 表中看到一个新列。它在显示模式下为只读。

  1. 导航到对象页以切换到 Edit 模式。

  2. 在对象页的右上角选择 Edit。

  3. 在 Bookings 表中选择第一行。

  4. 为第一餐选择“early”，为第二餐选择“late”。

  5. 在子对象页的右下角选择 Apply。

  6. 在对象页上选择 Save。

  7. 在 Bookings 表中选择第一行。请注意，您的餐食时间选择已被保存，并且您已向子对象页的表添加了一个自定义列。 Page Editor 通过选择一个锚点元素并相对于它（之前或之后）定位您的自定义元素，帮助您在页面上定位自定义控件。Page Editor 会将相应的设置添加到 manifest.json 文件中。下面的代码片段由 Page Editor 生成。

"controlConfiguration": { "to_BookSupplement/@com.sap.vocabularies.UI.v1.LineItem": { "columns": { "ServingTimeOfMeals": { "header": "{i18n>servingTimeOfMeals}", "position": { "anchor": "DataField::Price", "placement": "After" }, "template": "sap.fe.cap.travel.ext.fragment.ServingTimeOfMeals" } } } }

结果

您已学习如何在 SAP Fiori elements 应用中使用扩展点。

注意

  • 您可以在以下位置找到本练习的解决方案： GitHub 。

  • 解决方案分支是 solution/add-custom-column-to-table-on-op 。

  • 您可以在以下位置找到该分支与前一个分支的直接比较链接： GitHub 。

后续步骤

有关更多信息，请参阅

  • 示例：在列表报表中向响应式表添加列

  • 表的扩展点