调整输入字段
学习目标
使用 Page Editor 调整输入字段。
使用场景
您想要向子节添加两个日期字段，并且它们的值帮助对话框中必须有日历。此外，您还想将单行输入字段扩展为多行输入字段。另外，添加一段占位符文本，当字段为空时显示。
任务流程
在本练习中，您将使用 Page Editor 执行以下任务：
向对象页面的子节添加两个 date 类型的字段。
更改输入字段的类型，并添加当字段为空时显示的占位符文本。
前提条件
您已完成单元 塑造对象页面的页眉区域 中的练习 使用单例实体表示子弹微型图表的常量值（课程：使用单例实体）。或者，您可以检出其解决方案分支：solution/use-singleton-for-bullet-micro-chart-on-op。
观看模拟并执行步骤
本练习包含一个模拟，它会带您完成下面描述的所有步骤。您可以跟随该模拟，并使用您自己的试用账户执行这些步骤。
练习：开始练习（SAP 官方交互式练习）
步骤
在 SAP Business Application Studio 中打开您的 CAP 项目。
在 Explorer 视图中，选择
*Projects\app\webapp*。右键单击 webapp 并选择 Show Page Map。将出现 Travels 应用程序的 Page Map。
选择 Travel 对象页面的 Edit 图标。将出现 TravelObjectPage 的 Page Editor。
在 General Information 子节中添加两个日期字段。
在 Page Layout 中的 Sections 下，展开 General Information。
展开
*Subsections\General Information\Form\Fields*。选择 Add。
选择 Add Basic Fields。将出现 Add Basic Field 对话框。
从下拉菜单中，选择 BeginDate 和 EndDate。
选择 Add。字段 End Date 和 Starting Date 会出现在 Page Editor 的控件树中。
注意
在右侧窗格中，用户可以看到他们可以为所选字段更改的设置。
将 Description 字段的类型更改为多行。为其添加一段占位符文本。
执行步骤 1 以及步骤 2 的子步骤 a 至 b。
选择 Description。
在右侧窗格中的 Display Type 下，选择下拉菜单。
选择 Text Area。
选择 Edit in source code 图标。将出现
layout.cds文件。@UI.MultiLineText注解由 Page Editor 生成。将
@UI.Placeholder注解添加到@UI.MultiLineText注解中。
annotate TravelService.Travel with {
Description @UI.MultiLineText: true
@UI.Placeholder : '{i18n>DescrPlcehlder}'
}
在 Explorer 视图中，选择
*Projects\_i18n\i18n.properties*。i18n.properties文件会打开。将以下占位符文本添加到该文件中：
DescrPlcehlder=Put your description for the travel
在 Manage Travels 应用程序中查看这两个日期字段。
打开 Manage Travels 应用程序。在 General Information 子节中，您可以看到 End Date 和 Starting Date 字段。
选择 Edit。
选择与 End Date 字段对应的日历图标。
结果
日历会自动添加为 Date 类型输入字段的值帮助。
注意
您可以在本练习的解决方案分支中看到，Page Editor 已向该子节现有的注解（
@UI.FieldGroup#TravelData）添加了两个UI.DataField类型的值。
查看 Description 字段的多行输入字段和占位符文本。
打开 Manage Travels 应用程序。
选择 Edit。
结果
单行输入字段被扩展为多行文本字段。此外，如果文本字段为空，您可以看到它被新添加的占位符文本 Put your travel description here 替换。
结果
在本课中，您学习了如何借助 Page Editor 向对象页面上的节或子节添加字段。您还可以使用 Page Editor 更改字段的设置，例如字段标签、字段类型，以及添加限制。
后续步骤
有关更多信息，请参阅