配置灵活列布局

学习目标

  • 为您的应用程序在 UI 上启用灵活列布局。

灵活列布局

在 SAP Fiori elements 中，灵活列布局允许您在同一屏幕上同时查看列表报表和对象页面，而无需在它们之间来回导航。

灵活列布局的 TwoColumnsBeginExpanded 选项

您还可以在列表报表旁边显示两个对象页面。每个页面都显示在自己的列中，您可以根据需要调整列宽。

灵活列布局的 ThreeColumnsMidExpanded 选项

灵活列布局可以在 *manifest.json* 文件中手动配置。您也可以使用 Page Map 配置该布局。有关详细信息，请参阅 SAP Fiori elements 文档：Enabling the Flexible Column Layout

启用灵活列布局

在本练习中，您将首先为灵活列布局配置不同的选项。然后，您将在 UI 上检查结果。

前提条件

您已完成单元“SAP Fiori 工具概览”中的练习 Adjust the Object Page of the Display Customers App（课程：使用应用程序生成器创建第二个应用程序）。或者，您可以检出其解决方案分支：configure-object-page-customer-app。

观看模拟并执行步骤

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

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

步骤

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

  2. 打开 Page Map。

  3. 右键单击 travel_processor。

  4. 选择 Show Page Map。

  5. 在 Page Map 中配置灵活列布局。

  6. 选择 Flexible Column Layout 选项。

  7. 向下滚动到 Select Layout for 2 Columns 并选择 Mid-Expanded。

  8. 在 Select Layout for 3 Columns 中，选择 End-Expanded。

  9. 灵活列布局现已启用。切换回应用程序以查看其工作方式。

  10. 选择 Travel 以导航到其对象页面。

  11. 注意对象页面如何在同一屏幕上打开在列表报表旁边。由于您选择了 Mid-Expanded 布局，对象页面比列表报表更宽。

  12. 选择一个 Booking 以导航到其子对象页面。子对象页面打开在对象页面旁边。由于您选择了 End-Expanded 布局，最后一列比前两列更宽。

结果

在本课中，您已经学习了如何启用和配置灵活列布局。

Note

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

  • 解决方案分支是 solution/flexible-column-layout 。

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