写点什么

谈一谈 SAP 企业管理软件里那些真假 Fiori 应用

作者:Jerry Wang
  • 2023-04-17
    四川
  • 本文字数:2327 字

    阅读完需:约 8 分钟

谈一谈 SAP 企业管理软件里那些真假 Fiori 应用

什么是 Fiori?SAP Fiori 是 SAP 公司开发的一款现代化、直观化的企业应用程序界面。它基于 SAP 的 UI5 框架开发,可以与 SAP 后端系统集成,为用户提供统一的体验。


SAP Fiori 主要用于支持企业级应用程序的移动化和 Web 化,它可以在多种设备上运行,例如桌面电脑、平板电脑和智能手机。SAP Fiori 还提供了各种应用程序,包括财务、人力资源、采购和销售等。这些应用程序具有直观的用户界面和易于使用的功能,可以帮助企业提高生产力和效率。


相应的,SAP UI5 是一种基于 Web 技术的 JavaScript 框架,由 SAP 公司开发并维护。它是用于构建基于 Web 的企业级应用程序的现代 UI 开发工具。SAP UI5 提供了丰富的 UI 控件库、MVVM(Model-View-ViewModel)模式、数据绑定、路由和事件处理等功能,以便开发人员可以更快地构建现代化的 Web 应用程序。


SAP UI5 可以与 SAP 的后端系统(如 SAP ERP、SAP HANA 和 SAP S/4HANA)进行集成,并且可以轻松地扩展和自定义以满足企业需求。它还支持跨平台和跨设备的开发,可以在多种设备上运行,包括桌面电脑、平板电脑和智能手机。



本文标题里的“真假” Fiori 应用,改成业内术语应该是:基于 SAP UI5 的原生应用(包括 Fiori Elements 实现的应用) 和其他所有采用非 SAP UI5 框架实现的 Fiori-Like 应用,比如嵌入到浏览器里执行的 SAP GUI 应用和基于 SAP WebClient UI 开发的应用。



注:使用 Fiori Fundamentals 和 SAP UI5 Web Components 开发的 Fiori-Like 应用,不在本文讨论范围之内。


看一些“假” Fiori 应用的例子。


SAP ERP 事物码 MM01,在浏览器里打开的显示界面如下:



从浏览器地址栏里不难分辨,这个页面是 SAP GUI 事物码,通过 Jerry 这文章介绍的方法,配置到 SAP Fiori Launchpad 里显示并使用的:


关于 SAPGUI 事物码在 Fiori Launchpad 中嵌入运行的技术细节


那么再看下面这个页面呢?


SAP S/4HANA Fiori Launchpad Manage Solution Orders tile:



任意选择一个 Order 进入明细页面:



这个明细页面,到底是 SAP UI5 开发的 Fiori 原生应用,还是通过 SAP GUI 或者 SAP WebClient UI 开发而成的 Fiori-Like 应用呢?



此时单凭肉眼已经很难分辨了,通过观察浏览器地址栏的 url,也看不出端倪:


https://<hostname>/ui?sap-client=715&sap-language=EN#BusinessSolutionOrder-display?BusinessSolutionOrder=100009525


有 SAP 顾问朋友在微信上和我交流,说他使用的办法是,在 Fiori Launchpad 里打开的页面按 F2,如果能看到技术明细对话框弹出,说明该页面是基于 WebClient UI 技术开发的,反之才是 SAP UI5 开发的原生应用。


这种方法经过 Jerry 实际测试发现不太准确,因为在 Fiori Launchpad 环境里,我所在的测试系统里,WebClient UI 页面的 F2 功能已经失效了——即使一个页面确实是用 WebClient UI 开发而成,按 F2 也无法再弹出技术明细对话框。


本文介绍两种正确的方法来分辨,Fiori Launchpad 里显示的页面,到底是 SAP UI5 原生应用,还是 Fiori-Like 应用。

方法 1


先打开要分辨的 UI,再打开 Chrome 开发者工具,F5 刷新页面:



如果在 Source 标签页里的 sap/bc/ui5_ui5/sap 文件夹下发现新出现了子文件夹,则说明该应用是 SAP UI5 原生应用,且应用名称就是子文件夹的名称,例如下图的 solnord_mans1.



SE80 打开 solnord_mans1, 发现它不仅是一个 SAP UI5 应用,而且是一个基于 Fiori Elements 的 UI5 应用。



再看下图这个页面:



一旦渲染之后,Chrome 开发者工具里出现了一系列子文件夹:


  • BSPWD_BASICS

  • bsp_wd_base

  • bspwd_basics

  • crm_ui_frame

  • crm_ui_start



这些都是典型的 WebClient UI Frame 的实现应用名称,这标志着该明细页面的实现技术是 SAP WebClient UI.


SAP WebClient UI 是一种基于 Web 的用户界面框架,用于构建企业级应用程序。它是 SAP 公司早期开发的一种 UI 框架,用于访问和使用 SAP ERP(企业资源计划)和 SAP CRM(客户关系管理)等后端系统。


SAP WebClient UI 提供了一组标准化的 UI 控件、模板和业务对象模型,使开发人员可以快速构建具有一致性、可重用性和可扩展性的企业应用程序。它还提供了一种模块化的设计,以支持按需加载和快速启动应用程序。


随着时间的推移,SAP 已经发展出了更为现代化和灵活的 UI 框架,如 SAP UI5.


因此,SAP WebClient UI 在最近几年已不再是 SAP 新的基于 ABAP 技术栈产品开发的主流,但仍在某些 SAP 传统应用程序中使用。


那么实现该页面的 WebClient UI Component 的名称是什么呢?


在该页面上按 F2,虽然没有技术明细对话框弹出,但在 Chrome 开发者工具 network 标签页里观察到一个 HTTP 请求,里面包含了一个 target-id, 值为 TBT172MOV.



在数据库表 CRMC_UI_LLINK 里,通过下列三个步骤,即可查到,Target ID TBT172MOV, 对应的 UI Component 名称为 BT172M_SOLO.



如果您是一个业务顾问,不喜欢使用 Chrome 开发者工具,那么可以使用下面介绍的方法 2.


方法 2:Fiori 应用索引大全


Jerry 之前的文章 SAP Fiori 应用索引大全工具和 SAP Fiori Tools 的使用介绍 曾经介绍过这个工具:


https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/index.html


建议每位 SAP Fiori 从业者,都将其加到自己的收藏夹中,因为这个工具使用起来就像字典一样,非常方便。


假设我想查询 SAP S/4HANA Manage Solution Orders 这个 tile 里面的 Fiori 应用明细。点击 All apps for SAP S/4HANA:



这里一目了然,Manage Solution Orders 的入口,是一个 SAP UI5 应用,名称为 SOLNORD_MANS1, 这正好和我们方法 1 里查找到的名称一致。



而方法 1 里找到的 TBT172MOV, 也被包含在 Manage Solution Orders 的明细介绍里了:



索引网站里明确提到,TBT172MOV 是一个 WebClient UI 应用。



希望本文介绍的两种方法对大家有所帮助,感谢阅读。

发布于: 刚刚阅读数: 3
用户头像

Jerry Wang

关注

🏆InfoQ写作平台-签约作者🏆 2017-12-03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发。

评论

发布
暂无评论
谈一谈 SAP 企业管理软件里那些真假 Fiori 应用_SAP_Jerry Wang_InfoQ写作社区