添加自定义微型图表

学习目标

  • 创建一个自定义微型图表，用于显示在后端计算的值。

你可能希望快速概览某位乘客的所有预订。这些信息应以视觉上吸引人的方式呈现在 Display Customers 应用的对象页面页眉中，位于 Contact Details 分区旁边。用户将一目了然地看到有多少预订的状态为 “open”、“canceled” 或 “new”。

为此，你可以使用比较微型图表。

任务流程

首先，你将在后端实现一个方法，用于计算具有不同状态的预订数量。然后，你将在前端创建一个本地 JSON 模型，以从后端检索相应的数字。接着，你将在 Contact Details 分区旁边添加一个自定义页眉分区。请注意，这必须手动完成。最后，你将创建微型图表本身。

前提条件

你已完成单元 探索 SAP Fiori Elements for OData V4 编程模型的灵活性 中的练习 向 Display Customers 应用的对象页面添加消息条（课程：使用控制器扩展）。或者，你可以检出其解决方案分支：solution/add-message-strips。

观看模拟并执行步骤

本练习包含一个模拟，它会展示所有步骤。你可以使用自己的试用账户跟随该模拟。

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

步骤

  1. 在后端实现该方法。

  2. 你在上一个练习中已经定义了 BookingData 类型。现在，你将更改该类型以反映不同的预订状态。

  3. 打开 SAP Business Application Studio 并选择 *schema.cds*。将以下代码片段添加到 BookingData 类型：

type BookingData: { TotalBookingsCount: Integer; NewBookingsCount: Integer; AcceptedBookingsCount: Integer; CancelledBookingsCount: Integer; }

  1. 打开 *travel-service.cds*。你可以看到上一个练习中创建的 getBookingDataOfPassenger 函数的定义。你在本练习中也会使用它。

  2. 打开 *travel-service.js*。它包含上一个练习中 getBookingDataOfPassenger 函数的实现。你将在本练习中增强它。

  3. 将以下代码片段添加到 *travel-service.js*（覆盖上一个练习中的现有代码）：

/** * Function import handler: getBookingDataOfPassenger * @param CustomerID * @returns BookingData */ this.on('getBookingDataOfPassenger', async (req) => { const { CustomerID } = req.data const allCustomerBookings = await SELECT `BookingStatus_code as status`.from (Booking) .where `to_Customer_CustomerID = ${CustomerID}` const bookingData = { TotalBookingsCount: 0, NewBookingsCount: 0, AcceptedBookingsCount: 0, CancelledBookingsCount: 0 } allCustomerBookings.forEach((booking) => { bookingData.TotalBookingsCount++ switch (booking.status) { case 'N': bookingData.NewBookingsCount++ break case 'B': bookingData.AcceptedBookingsCount++ break case 'X': bookingData.CancelledBookingsCount++ break default: break } }) return bookingData; });

这会增强 getBookingDataOfPassenger 方法，使其在后端计算不同预订状态的数量。 2. 在前端创建一个 JSON 模型。

  1. 由于你已调整了后端函数，现在还必须调整调用该函数的前端方法。在 SAP Business Application Studio 中打开 *PassengerOPExtend.controller.js*，并按如下方式编辑代码：

sap.ui.define(['sap/ui/core/mvc/ControllerExtension',"sap/ui/core/message/Message","sap/ui/core/MessageType", "sap/ui/model/json/JSONModel", ], function (ControllerExtension, Message, MessageType, JSONModel) { 'use strict';

你已声明 sap.ui.model.json.JSONModel，并将在控制器扩展方法中使用它。 2. 将以下代码片段添加到 onAfterBinding。将其放在 oInfoMessage 的声明之后。

const oPassengerBookingsModel = new JSONModel({ totalBookingsCount: 0, newBookingsCount: 0, acceptedBookingsCount: 0, cancelledBookingsCount: 0 }); this.base.getView().setModel(oPassengerBookingsModel, "passengerBookingsModel");

这会创建一个 JSONModel，并使用给定的名称 "passengerBookingsModel" 将其添加到你的视图中。 3. 将以下代码片段添加到 onAfterBinding。将其放在 const oContext = oFunction.getBoundContext(); 这一行之后：

oPassengerBookingsModel.setProperty("/totalBookingsCount", oContext.getProperty("TotalBookingsCount")); oPassengerBookingsModel.setProperty("/newBookingsCount", oContext.getProperty("NewBookingsCount")); oPassengerBookingsModel.setProperty("/acceptedBookingsCount", oContext.getProperty("AcceptedBookingsCount")); oPassengerBookingsModel.setProperty("/cancelledBookingsCount", oContext.getProperty("CancelledBookingsCount"));

这会将 JSONModel 的属性绑定到函数导入返回参数对应的属性。 4. 按如下方式调整 onAfterBinding 的最后一个代码块：

if (oContext.getProperty("NewBookingsCount") > 0) { this.message = oBookingTableAPI.addMessage(oWarningMessage); oExtensionAPI.showMessages([oInfoMessage]); }

  1. 添加一个自定义页眉分区。

  2. 打开 *manifest.json*，并在 *"PassengerObjectPage"/"options"/"settings"/"content"* 下添加以下代码：

"header": { "facets": { "CustomHeaderFacetContentBased1": { "template": "sap.fe.cap.customer.ext.fragment.BookingStatus", "title": "{i18n>bookingStatus}", "visible": "true", "position": { "placement": "After", "anchor": "ContactDetails" } } } },

你已在 Contact Details 页眉分区旁边声明了一个新的自定义页眉 facet。 2. 打开 *i18n>i18n.properties*。在此，你可以向 UI 添加一些需要翻译的文本。 3. 添加以下代码片段：

#XTIT: Custom header title bookingStatus=Booking Status

这会添加自定义页眉分区的标题。 4. 创建微型图表。

  1. 右键单击 *fragment* 文件夹并选择 新建文件。

  2. 创建一个名为 *BookingStatus.fragment.xml* 的新文件，并为你的微型图表添加以下代码：

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros" xmlns:mc="sap.suite.ui.microchart"> <VBox id="BookingStatusOverview" displayInline="true"> <mc:ComparisonMicroChart size="S" maxValue="{passengerBookingsModel>/totalBookingsCount}"> <mc:data> <mc:ComparisonMicroChartData title="{i18n>bookingStatusNew}" value="{passengerBookingsModel>/newBookingsCount}" color="sapUiChartPaletteSemanticCritical" /> <mc:ComparisonMicroChartData title="{i18n>bookingStatusAccepted}" value="{passengerBookingsModel>/acceptedBookingsCount}" color="sapUiChartPaletteSemanticGood" /> <mc:ComparisonMicroChartData title="{i18n>bookingStatusCancelled}" value="{passengerBookingsModel>/cancelledBookingsCount}" color="sapUiChartPaletteSemanticBad" /> </mc:data> </mc:ComparisonMicroChart> </VBox> </core:FragmentDefinition>

你已添加一个sap.m.VBox。它是 sap.suite.ui.microchart.ComparisonMicroChart 的容器。有关更多信息，请查看 API reference。 3. 你已将微型图表数据绑定到JSONModel 的相应属性。你还为微型图表添加了三个标签文本。有关更多信息，请查看 API reference。 4. 你可能会看到微型图表及其数据项报错，提示缺少 ID。使用快速修复生成必要的 ID。 5. 最后，将三个标签文本添加到 *i18n.properties* 文件：

#XTIT: Custom header title bookingStatus=Booking Status #XTIT: Custom micro chart legend bookingStatusNew=New #XTIT: Custom micro chart legend bookingStatusAccepted=Accepted #XTIT: Custom micro chart legend bookingStatusCancelled=Cancelled

  1. 检查结果。

  2. 切换到应用窗口。

  3. 你可以看到对象页面页眉中新增了 Booking Status 分区，其中包含比较微型图表，位于 Contact Details 分区旁边。

结果

在本练习中，你了解了如何手动向对象页面添加自定义页眉 facet（分区）。你已扩展函数导入，以计算具有不同状态的预订数量。

注意

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

  • 解决方案分支是 solution/add-custom-micro-chart-to-object-page-header 。

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

后续步骤

有关更多信息，请参见：

  • 对象页面页眉 facet 的扩展点

  • sap.suite.ui.microchart.ComparisonMicroChart