改善用户体验

学习目标

在应用中安排字段。
提供输入帮助。

UI 调整

05_Arranging_the__UI_004 05_Arranging_the__UI_005

在本部分中，您将了解如何控制行为定义中的字段属性以及如何调整元数据扩展中的 UI。

在 UI 中安排字段

视频：本节含 SAP 官方视频（视频 ID 1_ojf3t7a3），需在 learning.sap.com 在线观看。

将字段设置为只读

视频：本节含 SAP 官方视频（视频 ID 1_uwhq77ox），需在 learning.sap.com 在线观看。

将字段设为只读后，您可以看到重新安排这些字段是有意义的。您可以通过注释投影的相应字段来执行此操作。通常，在元数据扩展中执行此操作。

元数据扩展是包含属于特定 CDS 实体的注释的独立资源库对象。其背后的想法是通过将其分开，使更容易理解 CDS 实体的定义和注释。否则，CDS 定义将变得非常长且难以读取。

如果要将元数据扩展与 CDS 视图结合使用，CDS 视图必须包含注释 @Metadata.allowExtensions: true。生成器为您负责执行此操作，并自动生成投影视图的元数据扩展以及投影视图本身中的相应注释。

您可能需要在元数据扩展中更改两个重要的 UI 注释。第一个是 @UI.LineItem。这是在其中设置属性位置的数组。这确定了列在应用的报表清单页面中的位置。

第二个注释是 @UI.identification。同样，这也是您在其中设置属性位置的数组。这确定了字段在单个对象页面中的位置。该位置在创建或更新操作期间显示。

重新排列字段

视频：本节含 SAP 官方视频（视频 ID 1_atrjx1h0），需在 learning.sap.com 在线观看。

如何控制字段属性

演示：观看演示（SAP 官方交互式练习）

输入帮助

在本部分中，我们将了解如何为用户提供值帮助。观看此视频以了解更多信息。

视频：本节含 SAP 官方视频（视频 ID 1_elzcv6k4），需在 learning.sap.com 在线观看。

调整用户界面

在本练习中，您将了解应用程序中提供的值帮助。此外，您将调整已生成应用的用户界面：直接通过编辑 UI 元数据，或通过调整业务对象行为间接调整。

模板：

无

解决方案：

/LRN/S4D400_C_FLIGHT（行为映射）
/LRN/S4D400_C_FLIGHT（元数据扩展）

前提条件

您已完成之前的练习。您已创建并填充数据库表 Z##FLIGHT（## 为组编号）并生成 OData UI 服务的开发对象。

任务 1: 分析值帮助

验证是否为对象页面上的货币字段提供了值帮助。检查定义此值帮助的位置和方式。

步骤

启动 OData UI 服务的预览。
按照先前练习中的操作继续操作。
在编辑模式下打开航班的对象页面。
按照先前练习中的操作继续操作。
验证值帮助是否可用于货币字段。
打开为航班价格显示的货币字段的值帮助。
返回到开发环境并浏览值帮助的定义。

任务 2: 调整行为

排除创建和**删除的标准操作，并将 PlaneTypeID 字段设置为只读。

注意

这些更改应仅适用于 OData UI 服务。业务对象本身仍应支持创建和删除航班，以及更改飞机类型。

步骤

在服务的行为映射中，禁用标准操作创建和**删除。
打开行为预测 ZC_##FLIGHT（其中 ## 是您的组编号）。
在 use delete; 和 use create; 语句前添加注释标记。要添加注释标记，请照常进行：选择要注释的代码行，然后按 Ctrl + < 。然后，您的代码应如下所示：

//  use create;
use update;
//  use delete;

在业务对象的行为映射中，将 PlaneTypeID 字段设置为只读。
在行为映射中，添加以下代码：

field ( readonly ) PlaneTypeID;

注意

陈述的确切位置并不重要。我们建议您将其放在使用...

语句之前。

激活行为映射。
按 Ctrl + F3 激活行为投影。

任务 3: 调整 UI 元数据

隐藏 UI 中的管理字段。确保只有 CarrierID 和 ConnectionID 在报表列表页面上显示为选择字段。更改对象页面上的字段顺序，以便 PlaneTypeID 显示在**价格**之前。

步骤

编辑投影视图 ZC_##Flight 的元数据扩展。移除 LocalCreatedBy、LocalCreatedAt、LocalLastChangedBy、LocalLastChangedAt 和 LastChangedAt 字段的所有 UI 注释，并将其替换为 @UI.hidden: true。
打开元数据扩展 ZC_##FLIGHT，其中 ## 是您的组编号。
如下调整代码：

@UI.hidden: true
LocalCreatedBy;
@UI.hidden: true
LocalCreatedAt;
@UI.hidden: true
LocalLastChangedBy;
@UI.hidden: true
LocalLastChangedAt;
@UI.hidden: true
LastChangedAt;

移除除元素 CarrierID 和 **Connection**ID 之外的所有元素的 @UI.selectionField 注释。
如下调整代码：

@UI.identification: [ {
position: 30
} ]
@UI.lineItem: [ {
position: 30
} ]
FlightDate;
@UI.identification: [ {
position: 40
} ]
@UI.lineItem: [ {
position: 40
} ]
Price;
@UI.identification: [ {
position: 50
} ]
@UI.lineItem: [ {
position: 50
} ]
PlaneTypeID;

更改对象页面上 PlaneTypeID 字段的位置。将其放在 FlightDate 和 Price 之间。

提示

对象页面上的位置使用注释@UI.identification 指定。

更改 PlaneTypeID 元素的注释 @UI.identification: \[ { position: } \] 的值。选择位于元素 FlightDate 和 Price 的值之间的值。
如下调整代码：

@UI.identification: [ {
position: 35
} ]
@UI.lineItem: [ {
position: 50
} ]
PlaneTypeID;

激活元数据扩展。
按 Ctrl + F3 激活元数据扩展。

任务 4: 验证结果

重新启动 OData UI 服务的预览并验证对用户界面的更改。

步骤

重新启动 OData UI 服务的预览。
关闭浏览器窗口或包含预览的浏览器标签。
打开 ZUI_##FLIGHT_O4 服务绑定。在右侧的实体集和关联列表中，首先选择航班条目，然后选择预览....
在报表列表页面上，验证创建和删除按钮是否已消失。
按照先前练习中的操作继续操作。
确保报告列表页面上不再显示任何管理字段。
按照先前练习中的操作继续操作。
验证除 编辑状态 字段外，报表列表页面顶部是否仅显示两个选择字段。测试其功能。

提示

请注意，选择字段支持输入多个值和范围。

在选择字段航空公司标识中输入值（例如：LH），然后选择执行。
对其他值重复上述步骤。
对于任何数据集，导航到对象页面。验证删除按钮是否已消失。
按照先前练习中的操作继续操作。
确保对象页面上不再显示管理字段。
按照先前练习中的操作继续操作。
验证 飞机类型 字段是否显示在 航班日期 字段之后、 航班价格 字段之前。
按照先前练习中的操作继续操作。
切换到编辑模式并验证飞机类型字段的值无法更改。
按照先前练习中的操作继续操作。