配置微图表以可视化关键指标

学习目标

  • 可视化客户定义的关键指标和阈值的语义着色表示。

微图表

您可以在列表报表和对象页的表格单元格中，将多个数据点可视化为微图表。它们是非交互式的。您可以通过简单而紧凑的方式显示数据的变化。您可以从不同类型的微图表中进行选择，例如面积图、子弹图、折线图、径向图和堆积条形微图表。

不同微图表的示例

在表格列中使用时，微图表不会显示任何标题、描述、度量标签或页脚。默认情况下，微图表的大小为“XS”。您可以通过向 manifest.json 文件添加相应的设置来更改大小。有关详细信息，请参阅向表格添加微图表。您可以使用 SAP Fiori tools 创建包含微图表的新列。您可以选择使用引导式开发（Add a Smart Micro Chart to a Table 指南）或页面编辑器（Page Editor）。

向表格列添加子弹微图表

您可能希望在不导航到每个预订详细信息页面的情况下，概览每个预订的附加项总金额。为此，您可以使用子弹微图表。

微图表显示在对象页的预订表中。它具有预定义的目标值和两个阈值。其条形图将根据每个预订的值显示不同的颜色。这样无需导航到子对象页，即可快速概览每个预订的值。

任务流程

首先，您将在 Booking 实体中引入并实现一个名为 Total Amount of Supplements 的新属性。

然后，您将使用应用程序建模器向 Booking 表添加一个包含子弹微图表的新列。

最后，您将更新包含初始应用数据的 .csv 文件，以包含该新属性，并为现有预订添加相关的值。

前提条件

您已完成单元 配置表格列的内容 中的练习 向表格添加进度指示器列（课程：创建进度指示器的可视化表示）。或者，您可以检出其解决方案分支：solution/add-progress-indicator-to-table-column。

观看模拟并执行步骤

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

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

步骤

  1. 打开所选差旅的对象页。

  2. 切换到 SAP Business Application Studio，并将以下代码段添加到 Booking 实体定义中（*db/schema.cds* 的第 37 行）：

TotalSupplPrice : Decimal(16, 3);

这会将一个新属性 TotalSupplPrice 添加到实体 Booking 中。它显示预订中所有附加项的总价。 3. 打开 *srv/travel-service.js*，实现一个名为 _update_totals_supplement 的方法；它将更新 TotalSupplPrice 属性：

/**
* Update the Booking's TotalSupplPrice
*/
this._update_totals_supplement = async function (booking) {
const { totals } = await SELECT.one `coalesce (sum (Price),0) as totals` .from (BookingSupplement.drafts) .where
`to_Booking_BookingUUID = ${booking}`
return  UPDATE (Booking.drafts, booking) .with({TotalSupplPrice: totals})
}

  1. 更新 *travel-service.js* 中的方法 this.after ( 'UPDATE', 'BookingSupplement.drafts')：

/**
* Update the Travel's TotalPrice when a Supplement's Price is modified.
*/
this.after ('UPDATE', 'BookingSupplement.drafts', async (_,req) => { if ('Price' in req.data) {
// We need to fetch the Travel's UUID for the given Supplement target
const { booking } = await SELECT.one `to_Booking_BookingUUID as booking`
.from (BookingSupplement.drafts).where({BookSupplUUID:req.data.BookSupplUUID})
const { travel } = await SELECT.one `to_Travel_TravelUUID as travel` .from (Booking.drafts)
.where `BookingUUID = ${booking} `
await this._update_totals_supplement (booking)
return this._update_totals4 (travel)
}})

  1. 使用页面编辑器向对象页上的表格添加一个包含子弹微图表的新列。

  2. 选择 webapp > Show Page Map ，然后单击以下项上的铅笔图标 Object Page 。

  3. 展开 Bookings > Table > Columns 并选择加号图标以添加新列。选择 Chart Column 和 Bullet 作为图表类型。

  4. 选择 TotalSupplPrice 作为 Value 并输入 120 作为 Maximum Value 。选择 Add 。

  5. 请注意，已添加新列 TotalSupplPrice 。将其标题更改为 Supplements ，然后选择地球图标以将该文本添加到 i18n.properties 。

  6. 选择 Edit in source file 以检查由页面编辑器生成的注解。

  7. 您可以看到生成的注解 @UI.DataPoint 和 @UI.Chart 。按下面代码段所示添加这些值：

annotate TravelService.Booking with @(
UI.DataPoint #TotalSupplPrice: {
Value                 : TotalSupplPrice,
MinimumValue          : 0,
MaximumValue          : 120,
TargetValue           : 100,
Visualization         : #BulletChart,
//  Criticality : TotalSupplPrice, // it has precedence over criticalityCalculation => in order to have the criticality color do not use it
CriticalityCalculation: {
$Type                 : 'UI.CriticalityCalculationType',
ImprovementDirection  : #Maximize,
DeviationRangeLowValue: 20,
ToleranceRangeLowValue: 75
}
},
UI.Chart #TotalSupplPrice    : {
ChartType        : #Bullet,
Title            : 'total supplements',
AxisScaling      : {$Type: 'UI.ChartAxisScalingType', },
Measures         : [TotalSupplPrice, ],
MeasureAttributes: [{
DataPoint: '@UI.DataPoint#TotalSupplPrice',
Role     : #Axis1,
Measure  : TotalSupplPrice,
}, ],
}
);

  1. 打开 *sap.fe.travel-Booking.csv*。该文件包含实体 Booking 的初始应用数据。由于您已向该实体添加了新属性 TotalSupplPrice，您还需要用新列 TotalSupplPrice 更新该文件。该列将包含现有预订的值。

  2. 从 GitHub 仓库的 db/data/sap.fe.cap.travel-Booking.csv 复制并替换 *sap.fe.cap.travel-Booking.csv* 文件。该文件包含带有更新值的 TotalSupplPrice 列。

  3. 切换回应用窗口并检查结果。

  4. 选择一条差旅以导航到其对象页。

  5. 您可以在 Bookings 表中看到新列。它将以子弹微图表的形式显示每个预订的附加项总和。

结果

您已经学习了如何向表格列添加并配置子弹微图表。

注意

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

  • 解决方案分支是 solution/add-bullet-micro-chart-to-table 。

  • 在 GitHub 上可以获取该分支与上一个练习的直接比较。