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

学习目标

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

使用多表模式的多个视图

在上一课中，你学习了如何将多个视图作为单表模式添加到列表报表。在本课中，你将了解多表模式。在多表模式下，SAP Fiori elements 会为每个视图创建一个单独的表格实例。它允许你为每个视图定义不同的表格工具栏和不同的表格列。你还可以为每个视图设置单独的表格变式管理。

注意

SAP Fiori 设计指南不建议使用表格变式管理。有关详细信息，请参阅 List Report – Content Area。

每个视图都显示为表格上的一个选项卡。表格上方会渲染一个图标选项卡栏，用于在各个视图之间切换。只有当前所选选项卡上的表格可见。

除表格外，你还可以在图表上应用多表模式。

有关分步说明，请使用引导式开发中的 Configure Multiple Views 辅助功能。你也可以使用 Page Editor 创建多个视图。

延伸阅读

  • 列表报表表格上的多个视图

  • 在列表报表表格上定义多个视图

使用多表模式创建多个表格视图

使用场景

使用多表模式，你希望根据差旅状态可视化 Travels 表格上显示的数据。每个表格视图中的列和工具栏操作可以不同。

任务流

在本练习中，你将执行以下任务：

  • 创建该表格的三个不同表格视图。

  • 为每个表格视图添加 @UI.SelectionPresentationVariant 注释。

  • 为每个表格视图定义列和操作。

前提条件

你已完成单元 Configuring the Content of Table Columns 中的练习 Add a Contact Quick View to the Table（课程：Configuring Contact Quick Views in a Table）。在开始本练习之前，你还需要撤销练习 Create Multiple Table Views Using Single Table Mode 中所做的更改。或者，你也可以检出练习 Add a Contact Quick View to a Table 的解决方案分支solution/add-quick-contact-view-to-table。

观看模拟并执行步骤

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

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

步骤

  1. 在 SAP Business Application Studio 中打开你的 CAP 项目。

  2. 在 Explorer 视图中，选择 *Projects\fiori-elements-v4-cap-advanced\app\travel_processor\webapp*。

  3. 右键单击 webapp 并选择 Show Page Map。将显示 Manage Travels 应用的 Page Map。

  4. 创建表格视图。

  5. 在列表报表页面上，选择 Edit 选项。将显示 TravelList Page Editor。

  6. 选择 Views。

  7. 单击 Add 图标以添加新的表格视图。

  8. 选择 Add Table View。将显示 Add Table View 对话框。

  9. 选择 Add 以添加新的表格视图。

  10. 重复步骤 c 到 e 以创建另一个表格视图。

  11. 定义表格视图的标签。

  12. 选择所需的表格视图。

  13. 在右侧窗格的 View Label 下，将表格视图的名称输入为 Open。

  14. 单击表格视图标签旁边的 Edit in source file 图标。

  15. 选择 Apply 以重命名现有值。

  16. 重复步骤 a 到 d，将其他表格视图的标签定义为 Accepted 和 Canceled。

  17. 配置表格视图 Open 的 @UI.SelectionPresentationVariant 注释。

  18. 选择表格视图 Open。

  19. 在右侧窗格的 Presentation Variant: Annotation 下，选择 Edit in source code 图标。将打开 layout.cds 文件，你可以看到为 @UI.SelectionPresentationVariant 生成的代码。

  20. 通过定义 SelectOptions 特性来补全代码。

annotate TravelService.Travel with @(
UI.SelectionPresentationVariant #tableView : {
$Type              : 'UI.SelectionPresentationVariantType',
PresentationVariant: ![@UI.PresentationVariant],
SelectionVariant   : {
$Type        : 'UI.SelectionVariantType',
SelectOptions: [{
$Type       : 'UI.SelectOptionType',
PropertyName: TravelStatus_code,
Ranges      : [{
$Type : 'UI.SelectionRangeType',
Sign  : #I,
Option: #EQ,
Low   : 'O',
}, ],
}],
},
Text               : '{i18n>Open}',
},

注意

表格视图 Open 的代码片段部分由 Page Map 生成。你必须在 SelectionVariant 中显式添加 SelectOptions 特性的代码。

在该代码片段中，@UI.LineItem 注释未在 PresentationVariant/Visualizations 特性下引用，因为你尚未为 Open 表格视图定义任何列或操作。因此，Open 表格视图使用不带任何限定符的默认 @UI.LineItem 注释。

  1. 配置表格视图 Accepted 的 @UI.SelectionPresentationVariant 注释。

  2. 选择表格视图 Accepted。

  3. 执行步骤 4 的步骤 b 到 c。

UI.SelectionPresentationVariant #tableView1: {
$Type              : 'UI.SelectionPresentationVariantType',
PresentationVariant: {
$Type         : 'UI.PresentationVariantType',
Visualizations: ['@UI.LineItem#tableView', ],
},
SelectionVariant   : {
$Type        : 'UI.SelectionVariantType',
SelectOptions: [{
$Type       : 'UI.SelectOptionType',
PropertyName: TravelStatus_code,
Ranges      : [{
$Type : 'UI.SelectionRangeType',
Sign  : #I,
Option: #EQ,
Low   : 'A',
}, ],
}],
},
Text               : '{i18n>Accepted}',
}
);

  1. 配置表格视图 Canceled 的 @UI.SelectionPresentationVariant

  2. 选择表格视图 Canceled。

  3. 执行步骤 4 的步骤 b 和 c。

UI.SelectionPresentationVariant #tableView2: {
$Type              : 'UI.SelectionPresentationVariantType',
PresentationVariant: {
$Type         : 'UI.PresentationVariantType',
Visualizations: ['@UI.LineItem#tableView1', ],
},
SelectionVariant   : {
$Type        : 'UI.SelectionVariantType',
SelectOptions: [{
$Type       : 'UI.SelectOptionType',
PropertyName: TravelStatus_code,
Ranges      : [{
$Type : 'UI.SelectionRangeType',
Sign  : #I,
Option: #EQ,
Low   : 'X',
}, ],
}],
},
Text               : '{i18n>Canceled}',
}
);

  1. 为表格视图 Accepted 配置操作。

  2. 在 TravelList Page Map 上，单击以展开 Accepted 表格视图。将显示 Table Toolbar。

  3. 单击 Table Toolbar。

  4. 选择 Actions 并单击 Add 图标。

  5. 单击 Add Actions。将显示 Add Action 对话框。

  6. 从 Actions 下拉列表中，选择 TravelService.rejectTravel。

  7. 单击 Add。

  8. 为表格视图 Accepted 配置列。

  9. 选择 Columns 并单击添加图标。

  10. 选择 Add Basic Columns。将显示 Add Basic Column 对话框。

  11. 从 Columns 下拉列表中，选择所需的列。

  12. 单击 Add 以将列添加到表格视图。以下代码片段显示了由 Page Editor 生成的 @UI.LineItem 注释。

UI.LineItem #tableView : [
{
$Type : 'UI.DataFieldForAction',
Action : 'TravelService.rejectTravel',
Label : 'rejectTravel',
},
{
$Type : 'UI.DataField',
Value : Description,
},
{
$Type : 'UI.DataField',
Value : LastChangedAt,
},
{
$Type : 'UI.DataField',
Value : TravelID,
},
{
$Type : 'UI.DataField',
Value : to_Customer_CustomerID,
},],

注意

Page Editor 生成了一个带有限定符 #tableView 的新 @UI.LineItem 注释，因为你为 Accepted 表格视图定义了列和操作。该 @UI.LineItem 注释在相应的 @UI.SelectionPresentationVariant 注释的 *PresentationVariant/Visualizations* 下被引用。

  1. 为表格视图 Canceled 配置列

  2. 在 TravelList Page Map 上，单击以展开 Canceled 表格视图。将显示 Table Toolbar。

  3. 选择 Columns 并单击添加图标。

  4. 选择 Add Basic Columns。将显示 Add Basic Column 对话框。

  5. 从 Columns 下拉列表中，选择所需的列。

  6. 单击 Add 以将列添加到表格视图。以下代码片段显示了由 Page Editor 生成的 @UI.LineItem 注释。

annotate TravelService.Travel with @(
UI.LineItem #tableView1                    : [
{
$Type: 'UI.DataField',
Value: Description,
},
{
$Type: 'UI.DataField',
Value: LastChangedAt,
},
{
$Type: 'UI.DataField',
Value: TravelID,
},
{
$Type: 'UI.DataField',
Value: to_Agency_AgencyID,
},
{
$Type: 'UI.DataField',
Value: to_Customer_CustomerID,
},
],

注意

Page Map 生成了带有限定符 #tableView1 的 @UI.LineItem 注释。该 @UI.LineItem 注释在相应的 @UI.SelectionPresentationVariant 注释的 *PresentationVariant/Visualizations* 下被引用。

  1. 检查 Travels 应用上的表格视图。

  2. 打开 Travels 应用。你可以看到新建的表格视图显示为选项卡。默认情况下，选中 Open 选项卡。

  3. 在 Travels 表格上，选中与所需差旅对应的复选框。

  4. 选择 Reject Travel。

  5. 单击 Accepted 选项卡。表格仅显示所选的列以及差旅状态为 Accepted 的差旅条目。

  6. 单击 Canceled。表格仅显示所选的列以及差旅状态为 Canceled 的差旅条目。

结果

你已在列表报表表格上启用多表模式。

注意

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

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

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