按需隐藏可选信息

学习目标

通过初始隐藏附加信息，帮助用户识别最重要的信息。

为帮助用户关注最重要的信息，您有时可以选择先隐藏附加信息。当它被隐藏时，会改为显示 Show More 按钮。选择该按钮将显示附加信息。

任务流程

在本练习中，您将使用 Page Editor 在 Travel Object 页面的 General Information 节中创建一个新的子节。它将包含以下字段：Created On、Changed On 和 Created By。最后，您将为该子节启用 Display on Demand 设置。

前提条件

您已完成单元 配置对象页面的正文 中的练习 为字段的值帮助添加依赖筛选（课程：使用依赖筛选丰富值帮助）。或者，您可以检出其解决方案分支：solution/add-value-help-for-dependent-filtering。

观看模拟并执行步骤

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

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

步骤

创建一个子节。
从 Projects 中选择 fiori-elements-V4-cap-advanced，然后从上下文菜单中选择 Show Page Map。
打开 Travel 实体的对象页面，并在 General Information > Subsection > Add Form Section 处添加一个新的子节。
在 Add Form Section 窗口中，输入 Travel Administrative Data 作为标签文本。然后选择 Label 字段旁边的按钮。这将在 i18n 文件中生成一个文本键，并用新生成的键替换现有标签。
展开您的新子节。
向您的子节添加字段。
在您的新子节中，选择 Form > Fields > Add Basic Fields。
从下拉菜单中选择以下字段：createdAt、createdBy 和 LastChangedAt，然后选择 Add。
您的新字段现在显示在 Travel Administrative Data 子节中。
使该子节按需可见。
选择 Travel Administrative Data 子节。
在右侧窗口中，启用 Display on Demand 设置。
返回应用以检查结果。
打开该应用。请注意，Travel Administrative Data 子节已被隐藏，并且有一个 Show More 按钮。
选择 Show More 按钮；该子节现在可见。选择 Show Less 可再次隐藏它。
您还可以检查 Page Editor 生成的代码。
一个带 i18nTravelAdministrativeData 限定符的 @UI.FieldGroup 注解已添加到 Travel 实体。示例代码：

annotate TravelService.Travel with @(UI.FieldGroup #i18nTravelAdministrativeData: {
$Type: 'UI.FieldGroupType',
Data : [
{
$Type: 'UI.DataField',
Value: createdAt,
},
{
$Type: 'UI.DataField',
Value: LastChangedAt,
},
{
$Type: 'UI.DataField',
Value: createdBy,
},
],
});

一个新的引用分面（reference facet）已添加到对象页面。示例代码

{
$Type               : 'UI.ReferenceFacet',
Label               : '{i18n>TravelAdministrativeData}',
ID                  : 'i18nTravelAdministrativeData',
Target              : '@UI.FieldGroup#i18nTravelAdministrativeData',
![@UI.PartOfPreview]: false,
}

注解 \[@UI.PartOfPreview\] : false 意味着只有当用户选择 Show More 按钮时才会显示该子节。在本练习中，您使整个子节（引用分面）按需可见。您也可以隐藏引用分面内部的字段。在这种情况下，将显示 Show Details 和 Hide Details 按钮。有关更多信息，请参阅在对象页面分面中显示和隐藏内容。

结果

您学习了如何使用 Page Editor 添加新的节或子节，并使用 Display on Demand 设置将其隐藏。您还可以隐藏节或子节内的单个字段。

注意

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

解决方案分支是 solution/add-show-more-button-on-op 。

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

后续步骤

有关更多信息，请参阅：

Defining and Adapting Sections
Showing and Hiding Content in Object Page Facets