创建进度指示器的可视化呈现

学习目标

在表格列中显示进度指示器。

进度指示器的可视化呈现

你可以在列表报表和对象页面上将内容可视化为表格。根据你的用例，可以使用不同类型的表格。默认且推荐的表格类型是响应式表格，因为它受所有设备支持。对于基于聚合的服务，默认表格类型是分析表格。有关表格类型的更多信息，请参见设置表格类型。

SAP Fiori elements 使你能够以视觉上吸引人的方式呈现表格内容。除了文本之外，你还可以配置表格单元格以显示微型图表、评级指示器、进度指示器、显示附加信息的联系人快速视图、图像等。

有关更多信息，请参见配置表格。

向表格添加进度指示器列

你可以向表格添加可视化进度指示器。这让你可以快速概览表格条目的当前状态。

任务流程

在本练习中，你将首先向 Travel 实体添加一个名为 Progress 的新属性。

然后，你将实现一个方法，用于在创建或更改 Travel 时更新 Progress 属性。

你还会将 Progress 属性添加到 Travel 实体的 .csv 文件中，以填充初始数据。

最后，你将使用 Page Editor 在列表报表表格中配置一个新的进度指示器列。

前提条件

你已完成单元 检查列表报表上可用的操作 中的练习 创建带必填参数的应用特定操作（课程：创建应用特定操作）。或者，你可以检出其解决方案分支：solution/create-action-with-a-mandatory-parameter

观看模拟并执行步骤

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

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

步骤

将 Progress 属性添加到 Travel 实体。
在文件资源管理器中打开 *db/schema.cds* 文件。在此你可以定义实体的属性以及实体之间的关联。
通过粘贴以下代码片段，将 Progress 属性添加到 schema.cds 文件的第 20 行：

Progress : Integer @readonly;

实现一个用于更新 Progress 属性的方法。
打开 *srv/travel-service.js* 文件。在此你可以实现用于更新 Progress 属性的方法。
将以下代码片段添加到该文件：

/**
* Calculate the progress of the travel booking.
*/
// Travel is new (0 bookings) = 10%
// Travel contains at least one booking = 50%
// Travel contains at least two bookings = 65%
// Supplement target reached + 5 % per booking, max 90%
// Travel is accepted = 100% -> see acceptTravel
// Travel is rejected = 0% -> see rejectTravel
this.before ('SAVE', 'Travel', async req => {
if (!req.event === 'CREATE' && !req.event === 'UPDATE') return //only calculate if create or update
let score = 10
const { TravelUUID } = req.data
const res = await SELECT .from(Booking.drafts) .where `to_Travel_TravelUUID = ${TravelUUID}`
if (res.length >= 1) score += 40
if (res.length >= 2) score += 15
res.forEach(element => {
if (element.TotalSupplPrice > 70) score += 5
});
if (score > 90) score = 90;
req.data.Progress = score
})

这会添加用于更新 Travel Progress 的方法实现。该方法通过在 UI 上选择保存按钮触发。此时，CAP 会将草稿转换为活动文档。 Travel Progress 的计算方式如下：

创建旅行会将进度变为 10%。
添加一个预订会将进度变为 50%。
再添加一个预订会将进度变为 65%。
每个预订都可以有附加费。如果达到该预订的附加费目标，进度将按每个预订增加 5%，最高为 90%。
如果旅行被接受，进度设置为 100%。
如果旅行被拒绝，进度设置为 0%。

将以下代码片段添加到 *srv/travel-service.js* 的 Action Implementations 部分：

this.on ('acceptTravel', async req => {
await UPDATE (req.subject) .with ({TravelStatus_code:'A'})
return this._update_progress(req.subject, 100)
})
this.on ('rejectTravel', async req => {
await UPDATE (req.subject) .with ({TravelStatus_code:'X'})
return this._update_progress(req.subject, 0)
})
this._update_progress = async function (travel, progress){
return await UPDATE (travel) . with({Progress : progress})
}

这会创建一个名为 _update_progress 的新方法，用于更新 Progress 属性。该方法在执行 acceptTravel 和 rejectTravel 操作时被调用。
将新属性添加到旅行的 .csv 文件。
在文件资源管理器中，选择 *db/data/sap.fe.cap.travel-Travel.csv*。在此你可以添加 Progress 属性及其相应的值。
为了更快地实施更改，请从该解决方案的 GitHub 分支复制 *sap.fe.cap.travel-Travel.csv*，并用它替换你的本地文件版本。它已经包含 Progress 属性及相应数据。
使用 Page Editor 将新的进度指示器添加到表格列。
在列表报表页面上选择编辑。
展开 Columns 属性。
选择加号图标以添加新属性。
选择 Add Progress Columns。
在弹出的窗口中，展开 Columns 下拉菜单。
选择 Progress，因为它是你添加到 Travel 实体的属性。
你可以看到 Columns 中新增了一个名为 Progress 的列。在右侧，你可以编辑设置。
尝试更改列标题，例如改为 Progress of Travel。
选择地球图标，将标签文本添加到 i18n.properties 以便翻译。
系统会提示你在 i18n 文件中生成文本键。选择 Apply 以确认。
检查 Target 属性；它已 100% 填充。在 Progress of Travel 列中选择 Navigate to Source Code 图标。这会显示添加的注解。
layouts.cds 文件包含与 UI 相关的注解。添加的 i18n 注解已突出显示。
按住 Ctrl 并左键单击文件中的 @UI.DataPoint#Progress 注解。你已导航到限定符为 Progress1 的 @UI.DataPoint 注解的定义。该值就是我们之前添加到旅行中的 Progress 属性。
导航到 App 窗口。如有必要，选择 Show More per Row 以显示所有表格列。你现在可以看到，现有旅行显示了 Progress of Travel。
检查结果。
创建一次新旅行。
在 Agency 文本框中，选择 Input Help 以打开包含现有值的下拉菜单。
选择从上往下第二个条目。
在 Customer 文本框中，选择 Input Help 以打开包含现有值的下拉菜单。
选择从上往下第三个条目。
选择屏幕底部的 Create 按钮。
你可以看到新建的旅行以及 Progress of Travel 列。Progress of Travel 为 10%。你可以在工具提示中看到进度为 100 中的 10。

结果

你已向列表报表页面中的表格添加了一个新列 Progress of Travel。

注意

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

解决方案分支是 solution/add-progress-indicator-to-table-column 。

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

后续步骤

有关更多信息，请参见配置表格。