在 CAP 中提供用户界面

学习目标

• 了解在 CAP 中提供 UI 的不同方式

• 了解 SAP Fiori 工具

前端能力

对用户界面的支持

CAP 支持用户界面的集成。CAP 提供的所有服务不仅可以被其他服务使用，也可以被用户界面（UI）使用。CAP 是开放的，任何 UI 框架都可以通过发送标准 AJAX 请求来使用这些服务。请查看 cap-samples 仓库中一个可运行的 Vue.js 示例。

CAP 与 SAP Fiori

CAP 提供开箱即用的 SAP Fiori elements UI 支持，例如在 SAP Fiori 注解以及搜索、值帮助和 SAP Fiori 草稿等高级功能方面。草稿用于在应用意外终止时防止数据丢失，或防止对象被多个用户同时编辑。

单个 CAP 项目可以包含多个 SAP Fiori 应用。尽管也可以使用 SAP UI5，但这里我们重点关注 SAP Fiori elements。特定的 UI 注解可以为公开的服务补充面向 SAP Fiori elements 的指令。SAP Fiori elements 还会读取元数据文档和实体定义来生成 UI。CAP 应用的所有 SAP Fiori 应用都应放在 app 文件夹中。

为了加速 UI 开发（尤其是 SAP Fiori Elements），SAP Fiori 工具为向现有 CAP 项目添加和设计 SAP Fiori 应用提供了高级支持。它们还附带大量生产力工具，其中包括用于设计 SAP Fiori 页面的可视化工具。

SAP Fiori 工具

SAP Fiori Tools 已预装在 SAP Business Application Studio 中，可开箱即用。你也可以通过安装 SAP Fiori Tools - Extension Pack 在 Visual Studio Code（VS Code）中安装该扩展。

Page Map 编辑器

Page Map 是 SAP Fiori 工具附带的一项功能，可作为可视化生产力工具来更改和设计 SAP Fiori 用户界面。在后台，它会生成所有必需的注解文件，随后可以将这些文件检入版本控制。

下图展示了 Page Map 针对 SAP Fiori 列表页面的能力，在此可以调整整个 SAP Fiori 页面，包括表格字段等。例如，在图中可以看到，Header 可以动态设置为相应的标题值。

在接下来的练习中，你将亲手使用这些工具。

小结

现在你已经熟悉了如何在 CAP 项目中提供不同的 UI，并了解了针对 SAP Fiori UI 的开箱即用支持以及可加速 UI 开发的 SAP Fiori 工具。

延伸阅读

• CAP 文档：提供 Fiori UI

• 学习 SAP Fiori 基础知识

• 开发 SAP UI5 和 SAP Fiori Elements 应用程序

• 基于 CAP OData v4 服务开发 SAP Fiori Elements 应用