将表添加到对象页面

学习目标

  • 将表添加到应用程序

在本练习中，您将添加一个显示差旅预订的表。它将在对象页面上常规信息部分下的单独部分中显示。

前提条件

您已经在同一单元完成了练习*"编辑清单报表的表列"**（课程：添加和编辑清单报表表的表列*）。

观看模拟并执行步骤

此练习包含指导您完成详细步骤的模拟。模拟后可以找到所有步骤。您可以遵循模拟并使用自己的试用账户执行步骤。

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

步骤

  1. 打开 SAP Business Application Studio。

  2. 右键单击 travels 项目中的 webapp。

  3. 从后续菜单中选择显示页面映射选项。

  4. 在对象页面中输入 预订 作为部分。

  5. 选择对象页面中的编辑图标以打开页面编辑器。

  6. 从"区段"中选择添加图标。

  7. 从下拉列表中选择添加表部分。

  8. 在随后的 添加表部分 对话框中将**预订添加为标签。

  9. 选择标签字段中的全局图标。

  10. 从后续弹出窗口中选择应用。

  11. 选择值源字段的下拉列表。

  12. 选择 _预订 选项。

  13. 从 添加**表部分 对话框中选择 添加 。现在，您可以在页面编辑器中的常规信息后面看到作为部分添加的预订。

  14. 选择要在 预订 部分中显示为表列的字段。

  15. 展开页面编辑器中的预订部分。

  16. 展开预订部分中的表。

  17. 选择"列"(Columns) 。

  18. 从突出显示的列行中选择添加图标。

  19. 从列表中选择"添加基本列"。

  20. 选择可在 预订 部分中显示的以下列：

  • 预订标识

  • 预订日期

  • 承运商标识

  • ConnectionID

  • CustomerID

  • 航班日期

  • 航班价格

  1. 从对话框中选择 添加 。您可以看到所有选定的列现已添加到预订中。

  2. 查找 预订 部分的已生成注释以及在先前步骤中配置的表。

  3. 从页面编辑器中选择预订部分。

  4. 选择在源代码中编辑图标以打开预订部分的 annotation.xml。您可以看到已添加 @UI.Facets 注释的新记录以显示新部分。

  5. 注释的类型为 UI.ReferenceFacet。label 引用 i18n 文件中生成的条目。target 引用 @UI.LineItem，qualifier 作为 i18nbookings 注释 Booking 实体。

  6. 按 CTRL+ 左键单击``UI.LineItem 导航到 UI.LineItem 定义。

  7. 切换到浏览器中的应用预览。您可以在常规信息部分下查看预订部分。预订部分包含具有您已配置的列的表。

  8. 显示客户姓氏以及客户标识。

  9. 切换到 SAP Business Application Studio。

  10. 从页面编辑器中选择客户标识列。

  11. 从右侧窗格中选择 文本 下拉列表。

  12. 从列表中选择 _Customer/LastName 选项。现在，您已更新客户标识列以显示客户的姓氏。

  13. 将列标签从客户标识更改为客户。

  14. **在客户标识列右侧窗格的标签字段中输入客户。

  15. 从标签字段中选择全局图标。

  16. 从后续弹出窗口中选择应用。现在，您已将列标签从客户标识更改为客户。

  17. 将列标签从航空公司 ID 更改为航空公司。

  18. 从页面编辑器中选择航空公司标识列。

  19. 在所选列的右侧窗格上的 标签 字段中输入 航空公司 。

  20. 从标签字段中选择全局图标。

  21. 从后续弹出窗口中选择应用。列标签现已更改为航空公司。

  22. 除航空公司缩写外，还显示航空公司名称

  23. 从右侧窗格中选择文本字段中的下拉列表。

  24. 从列表中选择承运商/名称 (Carrier/Name) 。

  25. 选择 文本 字段的 在源代码中编辑 图标以打开 annotation.xml 文件。您可以看到已将相应的 Common.Text 注释 CarrierID 添加到本地注释文件。

  26. 切换到浏览器中的应用预览。您可以看到除缩写外，现在还显示航空公司名称。列名称现已更改为航空公司。此外，还会显示客户标识和客户名称。列标题已更新为客户。

  27. 从客户列中移除客户**标识。

  28. 切换到 SAP Business Application Studio。

  29. 选择客户列。

  30. 从右侧窗格中选择文本排列字段的下拉列表。

  31. 从列表中选择仅文本选项。

  32. 选择 "在源代码中编辑" 图标。您可以看到带有 UI.TextArrangement 的 TextOnly 注释已添加到 Customer ID。这意味着仅显示客户名称且标识保持隐藏。

  33. 切换到浏览器的应用预览。您可以看到客户标识现在已隐藏。

  34. 在预订表开头的新列中添加航空公司徽标图片。

  35. 切换到 SAP Business Application Studio。

  36. 从页面编辑器中选择列。

  37. 从突出显示的行中选择添加图标。

  38. 从列表中选择"添加基本列"。

  39. 从 添加基本**列 对话框的 列 字段中选择下拉列表。

  40. 从列表中选择 AirlinePicURL 。

  41. 从添加**基本列对话框中选择添加。您可以看到新字段 航空公司徽标 已添加到 列 列表中。

  42. 选择 航空公司徽标 行的 上移 图标，将列在列列表中上移。

  43. 继续将列在列表中上移，直到航空公司徽标位于列列表的顶部。

  44. 选择航空公司徽标**的源代码编辑图标。您可以看到航空公司徽标的记录已添加到 UI.LineItem。

  45. 切换到浏览器的应用预览。您可以看到显示了航空公司徽标列。

  46. 切换到 SAP Business Application Studio。

  47. 从页面编辑器中选择航空公司徽标列。

  48. 从列右侧窗格的 标签 字段中移除 航空公司徽标 。

  49. 切换到浏览器的应用预览。您可以看到航空公司徽标列标题现已移除。

  50. 选择每行显示更多图标以查看预订的所有相关详细信息。

结果

已使用页面编辑器将预订表成功添加到 管理行程 应用的对象页面。您还可以使用引导式开发指南 添加和编辑表列 执行此操作。