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