likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 26

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上提到的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应用,其实现细节对于用户来说完全是透明的。

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

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

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

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

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

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

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

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

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

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

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

帮助文档地址:https://help.sap.com/viewer/p...

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

除了 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:

SAP Fiori应用索引大全工具和 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 Fiori应用索引大全工具和 SAP Fiori Tools 的使用介绍

检查 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'

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

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

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

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

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

总结

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

转载自:https://segmentfault.com/a/1190000042090609
评论
请登录