使用单表模式配置多个视图

学习目标

在列表报表中使用单表模式配置多个表视图。

使用单表模式的多个视图

默认情况下，列表报表包含一个表，用于显示一个业务对象的数据。

对于更复杂的场景，你可能需要为显示同一个业务对象的表提供多个视图。每个视图可以显示不同的预筛选状态。

从技术上讲，UI 中只包含一个表实例和一个表工具栏。表级别的视图管理也可用，但 Fiori 设计指南强烈不建议这样做。有关更多信息，请参阅 List Report – Content Area。

使用分段按钮（segmented button）在这些视图之间切换。如果视图超过三个，则改为显示选择控件。

你可以通过在 manifest.json 文件中添加 showCounts 设置，来启用视图中总行数的显示。有关更多信息，请参阅 Defining Multiple Views on a List Report Table - Single Table Mode。

你既可以使用引导式开发中的 Configure Multiple Views 指南获取分步说明，也可以使用页面编辑器（Page Editor）来帮助你创建多个视图。

使用单表模式创建多个表视图

为了让列表报表表更易于导航，你可以创建不同的视图。当选中某个视图时，只会显示符合该视图中定义的条目的记录。由于这是使用不同筛选器的同一个表，因此称为单表模式。

在本练习中，你将基于 Travel Status 创建三个表视图：Open、Accepted 和 Canceled。

任务流

在本练习中，你将首先为这三个视图定义 @UI.SelectionVariant 注解。然后，你将使用页面映射（Page Map）把这些注解添加为快速变体选择路径。这会把注解添加到 *manifest.json* 文件中。最后，你将检查结果。

前提条件

你已完成单元配置表列的内容中的练习向表添加联系人快速视图（课程：在表中配置联系人快速视图）。或者，你也可以查看其解决方案分支：solution/add-quick-contact-view-to-table。

观看模拟并执行步骤

本练习包含一个展示所有步骤的模拟。你可以在自己的试用账户中跟着模拟操作。

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

步骤

为这三个视图定义 @UI.SelectionVariant 注解。
在 SAP Business Application Studio 中打开 *layouts.cds* 文件。
为 Travel 目标实体添加限定符为 canceled 的 @UI.SelectionVariant 注解。它将选择 TravelStatus_code='X' 的记录，即 Canceled。

annotate TravelService.Travel with @UI: {
SelectionVariant #canceled: {
$Type           : 'UI.SelectionVariantType',
ID              : 'canceled',
Text            : 'canceled',
Parameters      : [
],
FilterExpression: '',
SelectOptions   : [{
$Type       : 'UI.SelectOptionType',
PropertyName: TravelStatus_code,
Ranges      : [{
$Type : 'UI.SelectionRangeType',
Sign  : #I,
Option: #EQ,
Low   : 'X',
}, ],
}, ],
},

添加第二个 @UI.SelectionVariant 注解，限定符为 open。它将选择 TravelStatus_code='O' 的记录，即 Opened。

SelectionVariant#open  : {
$Type : 'UI.SelectionVariantType',
ID : 'open',
Text : 'open',
Parameters : [
],
FilterExpression : '',
SelectOptions : [
{
$Type : 'UI.SelectOptionType',
PropertyName : TravelStatus_code,
Ranges : [
{
$Type : 'UI.SelectionRangeType',
Sign : #I,
Option : #EQ,
Low : 'O',
},
],
},
],
},

添加第三个 @UI.SelectionVariant 注解，限定符为 accepted。它将选择 TravelStatus_code='A' 的记录，即 Accepted。

SelectionVariant #accepted: {
$Type           : 'UI.SelectionVariantType',
ID              : 'accepted',
Text            : 'accepted',
Parameters      : [
],
FilterExpression: '',
SelectOptions   : [{
$Type       : 'UI.SelectOptionType',
PropertyName: TravelStatus_code,
Ranges      : [{
$Type : 'UI.SelectionRangeType',
Sign  : #I,
Option: #EQ,
Low   : 'A',
}, ],
}, ],
}
};

关闭 *layouts.cds* 文件。
将这些注解添加为快速变体选择路径。
选择 Webapp > Show Page Map。
为 Open、Accepted 和 Canceled 旅行添加注解路径。
检查结果。
现在所有三个注解路径都出现在 Quick Variant Selection 中。
它们也已被添加到 *manifest.json* 中。
现在你可以在应用中看到三个按钮：Open、Accepted 和 Canceled。

结果

你已经学会了如何使用单表模式向列表报表添加多个视图。

注意

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

解决方案分支是 solution/create-multiple-table-views-single-table-mode 。

你可以在 GitHub 上查看与上一个分支相比的代码更改。

后续步骤

有关更多信息，请参阅

Multiple Views on List Report Tables
Defining Multiple Views on a List Report Table - Single Table Mode