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

推荐阅读更多精彩内容