SAP Fiori 应用索引大全工具和 SAP Fiori Tools 的使用介绍

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 这两个实用工具在笔者实际工作中所发挥的重要作用。