使用应用程序生成器创建第二个应用
学习目标
基于 CAP 服务创建 SAP Fiori elements 应用，并配置表列和表单字段等基本功能。
创建 Display Customers 应用
在本练习中，你将在现有的 CAP 项目中创建另一个应用 Display Customers。该应用显示客户的详细信息。主实体是 Passenger 实体。要创建该应用，你将使用 SAP Fiori tools - Application Generator。
该应用用于第 12 单元 探索 SAP Fiori Elements for OData V4 的灵活编程模型 和第 13 单元 说明 SAP Fiori elements for OData V4 中的导航概念 的练习中。
注意
SAP Fiori elements for OData V2 中后端返回的注解有单独的文件，而 SAP Fiori elements for OData V4 中的
$metadata文件同时包含元数据和后端注解。
前提条件
你已完成单元 Getting an Overview of SAP Fiori Elements for OData V4（课程：Getting Started）中的练习 Clone the Initial Application Project, Set Up and Run the Application in SAP Business Application Studio。或者，你也可以检出其解答分支：SAP-samples/fiori-elements-v4-cap-advanced 的 initial-app-state 分支。
观看模拟并执行步骤
本练习包含一个模拟，它会引导你完成下面描述的所有步骤。你可以跟随该模拟，并使用你自己的试用账户执行这些步骤。
Exercise：开始练习（SAP 官方交互式练习）
步骤
在 SAP Business Application Studio 中打开你的 CAP 项目。
选择 Menu 图标，然后选择 File > New Project from Template，再选择 SAP Fiori application，以基于同一个 CAP 服务创建另一个应用。
在 SAP Fiori application 页面上，选择模板 List Report Page。
在 Data Source and Service Selection 页面上，执行以下步骤：
从 Data source 下拉列表中，选择
Use a Local CAP Project。从 Choose your CAP project 下拉列表中，选择
fiori-elements-v4-cap-advanced。从 OData service 下拉列表中，选择
TravelService (Node.js)。在 Entity Selection 页面上，执行以下步骤：
从 Main entity 下拉列表中，选择
Passenger。从 Navigation entity 下拉列表中，选择
to_Booking。在 Project Attributes 页面上，执行以下步骤：
在 Module name 字段中，输入
customer。在 Application title 字段中，输入
Customers。在 Application namespace 字段中，输入
sap.fe.cap。在 Description 字段中，输入
Display Customers。从 Minimum SAPUI5 Version 下拉列表中，选择 1.120 的最高可用版本，例如
1.120.6.在 Add FLP configuration 下选择 Yes。
在 Deployment Configuration 页面上，保留建议的设置。
在 Fiori Launchpad Configuration 页面上，执行以下步骤：
在 Semantic Object 字段中，输入
Customer。在 Action 字段中，输入
display。在 Title 字段中，输入
Display Passenger。
结果
你可以看到出现 Application Information 页面。它显示 Display Customers 应用的详细信息以及有用的链接。 9. 在浏览器中打开该应用的预览。
在 Application Information 页面上，选择 Preview Application。
从 projects 下拉列表中，选择
watch-customer cds watch。浏览 Display Customers 应用
选择 Go。页面会显示客户详细信息。
选择所需的客户以查看更多信息。
结果
你已使用同一个 CAP 服务创建了 Display Customers 应用。你使用了 SAP Fiori tools - Application Generator。
调整 Display Customers 应用的列表报表
在本练习中，你将使用 SAP Fiori tools 提供的 Page Editor。它允许你轻松配置应用的功能，例如筛选字段、表列和分区中的字段。该工具支持基于注解和 manifest.json 设置的功能。
前提条件
你已完成单元 Getting an Overview of SAP Fiori Tools（课程：Creating a Second App Using the Application Generator）中的练习 Create the Display Customers App。
观看模拟并执行步骤
本练习包含一个模拟，它会引导你完成下面描述的所有步骤。你可以跟随该模拟，并使用你自己的试用账户执行这些步骤。
Exercise：开始练习（SAP 官方交互式练习）
步骤
在 SAP Business Application Studio 中打开你的 CAP 项目。
选择 Menu 图标。
选择 View→Command Palette...。
从 projects 下拉列表中，选择
Fiori: Open Application Info。选择
customer Customers。出现 Display Customers 应用的 Application Information。在 Pages 下，选择 ListReport。出现 Page Editor。
在筛选栏中添加筛选字段。
在 Filter Bar 下，为 Filter Fields 选择 Add 图标。出现 Add Filter Fields 对话框。
从 Filter Field 下拉列表中，选择
City、CountryCode_code和PostalCode。选择 Add。这三个字段现已添加到 PassengerList 的 Filter Fields 中。
要更改 Country Code 字段的位置，请选择该字段旁边的上移箭头。
删除现有列。
在 Tables 下，展开 Columns。
为所需列选择 Delete 图标。出现 Delete Confirmation 对话框。
选择 Delete。
添加新列。
为 Columns 选择 Add 图标。
选择
Add Basic Columns。出现 Add Basic Columns 对话框。从 Columns 下拉列表中，选择所需的列。
选择 Add。
要查看 City 列的注解，请选择 Navigate to source code。你可以看到该工具为所选列添加了新的
@UI.LineItem注解。在浏览器窗口中启动该应用的预览。
在左侧窗格中的 Projects 下，右键单击 fiori-elemens-v4-cap-advanced。
选择 Open in integrated Terminal。出现 Terminal。
输入
cds watch。选择 Open in a New Tab。出现 Welcome to @sap/cds Server 页面。
在 Web Applications 下，选择
/customer/webapp/index.html。Display Customers 应用出现在浏览器窗口中。选择 Go。
结果
你可以看到新添加的筛选字段和应用中的列。
12. 要查看服务的 $metadata 文件，请在 Welcome to @sap/cds Server 页面上的 Service Endpoints: 下选择 $metadata。
结果
服务的 $metadata 文件会打开。在这里，你可以找到元数据信息以及 XML 格式的 CAP 项目的所有注解。
结果
你已了解如何向应用程序添加筛选字段和列。你还看到了包含服务元数据和注解的 $metadata 文件。
注意
你可以在 GitHub 上找到本练习的解答 。
解答分支是 solution/generate-and-adjust-list-report-customer-app 。
你可以在 GitHub 上查看与上一个分支相比的代码更改 。
调整 Display Customers 应用的对象页面
在本练习中，你将继续使用 Page Editor。
你将配置 Display Customers 应用的对象页面。Application Generator 默认会向对象页面的 General Information 分区添加一些字段。你将删除不需要的技术字段，并更改 UI 上其余字段的顺序。此外，你将创建一个标题分区，并添加最重要的信息，例如客户的电话号码和电子邮件地址。
前提条件
你已完成单元 Getting an Overview of SAP Fiori Tools（课程：Creating a Second App Using the Application Generator）中的练习 Adjust the List Report of the Display Customers App。或者，你也可以检出其解答分支：solution/generate-and-adjust-list-report-customer-app 。
观看模拟并执行步骤
本练习包含一个模拟，它会引导你完成下面描述的所有步骤。你可以跟随该模拟，并使用你自己的试用账户执行这些步骤。
Exercise：开始练习（SAP 官方交互式练习）
步骤
打开 SAP Business Application Studio。
在左侧窗格中，选择
*Projects\app\customer*。右键单击
*customer*。选择 Show Page Map。出现 Page Map。
在 Object Page 上，选择 Edit 图标。出现对象页面结构。
将 FullName、EmailAddress 和 PhoneNumber 添加到对象页面标题分区。
在 Header 下，为 Header Sections 选择 Add 图标。
选择
Add Form Section。出现 Add Form Section 对话框。在 Label 字段中，输入
Contact Details作为标题的名称。选择 Add。
展开 Contact Details。
展开 Form。
为 Fields 选择 Add 图标。
选择
Add Basic Fields。出现 Add Basic Fields 对话框。从 Fields 下拉列表中，选择要添加到标题分区的字段。
单击 Add。
结果
你已添加一个标题分区以及其中的三个字段。 7. 在 Sections 下，展开 General Information。 8. 展开 Form。 9. 从 Sections 中移除技术字段（CreatedBy、ChangedOn 和 ChangedBy）。
选择要删除的字段。
选择 Delete 图标。出现 Delete confirmation 对话框。
要更改字段的顺序，请选择该字段旁边的上移或下移箭头。
要打开源代码，请选择 Street 字段旁边的 Navigate to source code 图标。
annotations.cds文件会打开。
结果
你可以看到 Page Editor 已为添加到 General Information 分区的字段向 @UI.FieldGroup 注解中添加了记录。
12. 要查看为标题分区创建的注解，请选择 Contact Details 旁边的 Navigate to source code 图标。annotation.cds 文件会打开。
结果
你可以看到 Page Editor 向 Passenger 实体添加的 @UI.HeaderFacets 注解。
13. 定义标题名称。
选择 Header。
在右侧窗格的 Header 分区下，在 Type Name 字段中输入
Customer作为标题的名称。选择 Edit in source file。
选择 Apply。
在 Type Name Plural 字段中，输入
Customers作为列表报表表格的标题。选择 Edit in source file。
选择 Apply。
在 Title 字段下，从下拉列表中选择
FullName。要查看源代码，请选择 FullName 旁边的 Edit in source file。
在浏览器窗口中打开 Display Customers 应用。
在 Display Customers 应用中，选择 Go。页面显示客户列表。
选择任意客户。
结果
你可以看到客户的完整姓名作为对象页面的标题。
结果
你已学会使用 Page Editor 配置对象页面。
后续步骤
有关更多信息，请参见配置页面元素。
注意
你可以在 GitHub 上找到本练习的解答 。
解答分支是 solution/configure-object-page-customer-app 。
你可以在 GitHub 上查看与上一个分支相比的代码更改 。