创建可视化筛选器

学习目标

  • 在列表报表中配置可视化筛选器。

可视化筛选器

可视化筛选栏提供了一种独特的方式,可通过可视化来筛选大型数据集。这有助于用户识别事实和情况,同时减少获得洞察或识别重要单个实例所需的交互步骤数。可视化筛选栏允许用户将度量与筛选值相结合。例如,“Product”可能具有筛选值“Product Name”,而度量通常是“Revenue”、“Cost”或“Quantity”。如果您选择度量“Revenue”,图表将显示“Revenue by Product”,从而使用户能够通过选择特定的产品名称及其收入来筛选数据。

图表可视化提升了使用的愉悦感,并帮助用户更快速地看到相关数据。在筛选方面,可视化筛选栏使用了全部三种类型的交互式图表:折线图、条形图和圆环图。更多信息,请参见 交互式图表条形图折线图圆环图

有关设计准则的更多信息,请参见 可视化筛选栏

使用可视化筛选器时的最佳实践是为每个紧凑筛选器都配备可视化筛选器。

向 Manage Travels 应用的列表报表添加可视化筛选器

使用场景

在本练习中,我们的目标是借助 Page Editor 添加三个可视化筛选器:Customer、Agency 和 Begin Date。之后,用户可以通过在图表中选择某个可视化来筛选表格。

任务流程

借助 Page Editor,您首先将添加可视化筛选器 CustomerAgency,因为它们在应用中已用作紧凑筛选器。然后,您将添加另一个可视化筛选器 Begin Date,并使用折线图,因为折线图仅对日期字段启用。为此,我们必须移除 Begin Date 字段上的筛选限制。

前提条件

您已完成单元 Discovering the Analytical List Page 中的练习 Adding a Chart to the List Report(课程:Discovering the Analytical List Page)。或者,您可以查看其解决方案分支:solution/add-chart-to-listreport

观看模拟并执行步骤

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

练习开始练习(SAP 官方交互式练习)

步骤

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

  2. Explorer 视图中,选择 *Projects\fiori-elements-v4-cap-advanced\app\travel_processor*

  3. 右键单击 travel_processor

  4. 选择 Show Page Map。将出现 Manage Travel 应用的 Page Map。

  5. List Report 上,选择 Edit 图标。将出现 TravelList 页面的 Page Map。

  6. Filter Bar 下,选择与 Filter Fields 对应的 Add 图标。

  7. 将筛选栏 Agency 添加到可视化筛选器。

  8. 选择 Add Visual Filter。将出现 Add Visual Filter 对话框。

  9. Filter Field 下拉列表中,选择 to_Agency_AgencyID

  10. Value Source Property 下拉列表中,选择 to_Agency_AgencyID

  11. 选择 Add

  12. 将筛选栏 Customer 添加到可视化筛选器。

  13. 选择与 Visual Filters 对应的 Add 图标。

  14. Filter Field 下拉列表中,选择 to_Customer_CustomerID

  15. Value Source Property 下拉列表中,选择 to_Customer_CustomerID

  16. 选择 Add

  17. 移除 BeginDate 属性上的限制。

  18. 选择 projects

  19. 从选项列表中,选择 Go to File

  20. 从选项列表中,选择 schema.cds。将打开 schema.cds 文件。

  21. @Capabilities.FilterRestrictions 注释中移除 BeginDate 属性。

  22. 将筛选栏 Begin Date 添加到可视化筛选器。

  23. 选择 Page Editor - travel。将出现 travel 的 Page Map。

  24. List Report 上,选择 Edit 图标。将出现 TravelList 页面的 Page Map。

  25. 选择与 Visual Filters 对应的 Add 图标。

  26. Filter Field 下拉列表中,选择 BeginDate

  27. Value Source Property 下拉列表中,选择 BeginDate

  28. Chart Type 中,选择 Line

  29. 选择 Add

  30. 在应用上查看所有三个可视化筛选器。

  31. 在 Web 浏览器的新标签页中打开应用。

  32. 在右侧,选择 Visual Filters 图标。您可以在筛选栏中看到三个可视化筛选器:Travel by AgencyTravel by CustomerTravel by Starting Date

  33. Travel by Agency 上,选择条形图中的第一个组件。

  34. 选择 Go

  35. Travel by Customer 上,选择条形图中的第一个组件。

  36. 选择 Go。您可以在 Travels by Customer CountryTravels 表格中看到与所选图表对应的数据。

  37. Travel by Starting Date 上,选择折线图中的第一个组件。

  38. 选择 Go。您可以在 Travels by Customer CountryTravels 表格中看到与所选图表对应的数据。

  39. Travel by Customer Country 上,选择一个条形图。您可以看到 Travels 表格中的数据会根据所选的条形图进行筛选。

结果

您已向应用添加了三个可视化筛选器。

注意

  • 您可以在 GitHub 上找到此解决方案的文件。

  • 解决方案分支为 solution/add-visual-filters 。

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

后续步骤

更多信息,请参见

  • 可视化筛选器

  • 可视化筛选栏