Fiori 应用索引(Fiori Application Reference)顾名思义，这是 SAP官方发布的一个 Fiori 应用检索工具，所有标准发布的 Fiori 应用的明细都能在这个工具里查到。

截至到笔者写这篇文章的时候，这个网站上显示已经存在 11949 个 Fiori 标准应用了：

2015 年 Fiori 1.0 时代，UI 风格称为 Blue Crystall，当时笔者还在 SAP 成都研究院的 CRM Fiori 开发团队工作，我们从印度同事那里接过了 8 个 CRM Fiori 应用，并进行接下来的持续开发。

如何在这个 Fiori 应用索引大全里找到它们？点击上图左上方的 SAP Fiori apps for SAP Business Suite：

然后选择根据 Application Component 进行过滤：

这个 Component 就是客户或者 Partners，在实施和使用 Fiori 应用时，如果发现问题，给 SAP 报 incident 时需要填的 Component 字段。

比如 Component CRM-FIO-BTX-OPP 下面存在一个 Fiori 应用，即 My Opportunities:

这里就能看到它的明细了，比如后台至少需要 CRM EHP3，应用类型为 Transactional，支持任意 DB，能够在 Desktop 和 Tablet 上访问，App ID 为 F0012：

其他所有的 CRM Fiori 应用也能在这里一起找到：

以上提到的 8 个 CRM Fiori 应用，其源代码是印度同事和笔者所在的 SAP 成都研究院的开发人员一行一行写出来的。我们说 Fiori 并不是一门具体的前端技术或者编程语言，而是一门设计语言，代表一种 UI 设计风格，其实现除了像 CRM Fiori 那样采用纯粹的 UI5 原生开发方式进行，还存在下面这三种方案：

(1) SAPGUI 是可以通过 SAP ITS(Internet Transaction Server)在浏览器里使用的，详情参考笔者之前发表的文章：那些年我用过的 SAP IDE。同样，使用 SAP ITS 在浏览器里运行 SAPGUI 实现的那些传统的事务码，通过 SAP 交互设计师和 UI 框架开发工程师的努力，也能确保用户在浏览器里使用这些传统事务码时，感受到和用 UI5 原生开发出的 Fiori 应用一样流畅易操作的用户体验。

(2) 采用 SAP UI5 技术之外的其他 UI 开发技术，比如 WebDynpro，WebClient UI 开发出的 Web 应用，通过 SAP 交互设计师和 UI 框架开发工程师采用的 Visual Harmonization，同样能让这些 Web 应用的用户体验，能达到和 Fiori 原生应用比肩的效果。

(3) 采用 SAP S/4HANA CDS view 加上大量注解(annotation)的元数据驱动开发方式，现在 SAP 官方把这种开发方式叫做 Fiori Elements.

对于终端用户来说，无论一个 Fiori 应用采用其上四种方式的哪一种开发而成，使用体验都没有任何差别。换句话说，这四种开发方式得到的 Fiori 应用，其实现细节对于用户来说完全是透明的。

而对于实施 Fiori 的技术人员来说，如果有必要深入到这些技术实现细节中，可以在 Fiori 应用索引大全上，根据 Application Type 字段进行过滤。

采用 WebClient UI 技术实现的 Fiori 应用只有 119 个，只占总数的 1%左右。

里面就包括笔者之前的文章 Hello World, S/4HANA for Customer Management 1.0 提到的在传统 SAP CRM 里创建服务订单使用的 WebClient UI 应用，如今通过 Visual Harmonization，加入了 S/4HANA Fiori 应用的大家庭。

S/4HANA 里创建服务订单这个应用的 ID 为 TBT116MCR：

在事务码 CRMC_UI_NBLINKS 里能找到对应的 WebUI component 为 BT116M_SRVO:

帮助文档地址：https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US

除了 Fiori Application Reference 之外，SAP 也提供了许多功能来提高使用 SAP Fiori Elements 或者 SAPUI5 自由式方法开发 SAP Fiori 应用程序的效率。

SAP Fiori 工具与 SAP Fiori Elements 一起减少了开发时间、维护成本，并利用了元数据驱动的 UI 的优势。SAP Fiori 工具包括以下扩展：

• 用于初始创建应用程序的向导。

• 用于查看数据模型的服务建模器。

• 用于维护注释的 XML 和基于表单的编辑器(仅限 SAP Fiori Elements）

• 应用程序页面结构和配置 SAPUI5 灵活性设置的能力(仅限 SAP Fiori Elements）

• 用于实施功能的引导式开发(仅限 SAP Fiori Elements)

如果采用 Visual Studio Code 作为 SAP UI5 开发工具，我们可以通过安装一个名为 SAP Fiori Tools -Extension Pack 的扩展，来安装 SAP Fiori Tools：

更具体的采用 Visual Studio Code 来搭建 SAP UI5 的本地开发环境的步骤，请参考我的文章：SAP UI5 本地开发环境的搭建。

这个工具还有一个命令行接口，Command Line Interface 缩写为 CLI.

npm 仓库地址如下：https://www.npmjs.com/package/@sap/ux-ui5-tooling

SAP Fiori Tools - UI5 Tooling 包含一系列可与命令 ui5 serve 一起使用的自定义中间件，以及可与命令 ui5 build 一起使用的自定义任务。

此外，该模块公开了 fiori 这个命名行，例如 fiori run 命令是 ui5 serve 命令的包装器，并提供了一些附加参数以及 fiori add deploy-config 和 fiori add flp-config 以扩展现有项目。

如果本地运行命令行 npm run deploy 之后出错：

fiori is not recognized as an internal or external command

检查 SAP UI5 项目里的 package.json 文件里的 dependencies, 查看是否定义了 Fiori Tools CLI 对应的依赖：

"@sap/ux-ui5-tooling": "1.0.10"

添加后运行 npm install，然后 fiori add deploy-config, 遇到新的错误消息：

Error: Cannot find module '@ui5/fs'

那么将 "@ui5/fs": "2.0.1" 添加到 devDependencies 区域：

之后看到 Fiori tools CLI 的提示消息，说明 Fiori Tools CLI 已经可用了：

总结

本文依次分享了 Fiori Application Reference 和 Fiori Tools 这两个实用工具在笔者实际工作中所发挥的重要作用。