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

笔者之前的文章到底什么样的 ABAP 系统能运行 Fiori 应用曾经提到,我们可以把 SAP GUI 里的传统事务码放到 SAP Launchpad 里启动,并在浏览器里运行。

这是事物码 SE80 在浏览器里运行的界面:

笔者最初注意到这种将 SAP GUI 里的事务码运行在浏览器里的做法,是在日常工作的测试时,发现 Fiori Launchpad 里这个 Create Material 的 tile.
回忆一下,原生的 Fiori 应用,无论我们在页面内进行何种点击操作,都不会跳转到一个全新的页面去,即不会打开一个新的浏览器窗口,或者一个新的标签页——Fiori 原生应用,所有的用户操作都在一个页面内完成,页面的切换通过 SAP UI5 的 router 组件完成,这是一个典型的 Single Page Application 的特征。

反之,当我点击了上图 Create Material tile 之后,启动的应用是在另一个新的 Chrome 标签页里打开并操作的,请大家注意上图红色新开启的标签页。
这就说明,这个 Create Material tile 背后的应用不是基于 SAP UI5 开发的 Fiori 原生应用。那么它又是用什么技术开发的呢?仔细观察 url:
https://<hostname>:44311/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=928&sap-language=EN#Material-create?sap-ui-tech-hint=GUI 发现了这个片段:sap-ui-tech-hint=GUI
这暗示我们,该应用的 UI 是基于 SAP GUI 绘制的。我们在浏览器里打开该应用:

把上图该应用的界面同 SAP GUI 里 S/4HANA 的物料主数据创建事务码 MM01 的界面做对比:

发现除了外观风格外,二者的字段名称,位置,布局完全一致。结合种种我们观察到的结果,显然这个 Create Material tile 指向的应用是基于 SAP GUI 里 MM01 事务码包裹而成的。
在浏览器里打开该 tile,在 Chrome 开发者工具中把 tile 所属的 Fiori Catalog ID 记录下来:SAP_CMD_BC_PR_MAINT

在 Fiori Launchpad 里根据该 ID 打开对应的 catalog,发现有好几个和 Material 相关的跳转对象,其类型都为 SAP GUI 里的 Transaction:

我们之前发现的 url 片段,sap-ui-tech-hint=GUI,就配置在这里:

跳转的目的事务码 ID MM01,配置在此处。同时 Device Types 里只支持桌面,这没什么问题,因为 SAP GUI 通过浏览器渲染出来的界面,不像 SAP UI5 那样具有响应式布局的功能,因此只能运行在桌面浏览器里。

在运行时,一旦 SAP UI5 框架代码解析到 sap-ui-tech-hint 参数的值为 GUI,就执行对应的渲染逻辑。

在 Chrome 开发者工具的 Sources 标签页里,能看到 gui/sap/its 这个路径片段。

ITS 即 Internet Trasaction Server,SAP Netweaver 里一项非常古老的技术,这个技术提供的组件能解析使用 SAP GUI 技术开发出的 screen 的元数据并渲染成 HTML,从而能够让 SAP GUI 的事务码运行在浏览器里。
关于 SAP ITS in SAP NetWeaver Application Server 的更多介绍,参考 SAP 帮助文档。

如果我们想体验 ITS,也很容易。SICF 事务码,输入 webgui,执行:

发现这个节点正好位于本文正在讨论的 its 节点下:

右键单击 webgui,选择 Test Service:

自动弹出了浏览器窗口,显示的页面同使用 SAP GUI 登录系统后显示的初始页面一致。接下来可以像使用 SAP GUI 那样,在浏览器里输入事务码并执行了。比如 SE38 进入 ABAP 编辑器:


下面介绍如何将事务码 SE80 置于 SAP Fiori Launchpad 并在浏览器里运行。本文基于的 SAP UI5 版本号为 1.38.9:

根据英文博客的网友反馈,在 UI5 1.52.1,S/4HANA 1709 上测试通过。

假设我们想把在 Fiori Launchpad 上启动 SE80 应用的 tile 配置到这个名叫“SAP Fiori Extensibility”的 catalog 去,

首先可以打开 Chrome 开发者工具,重新刷新页面,在 Network 标签页里打开 Fiori 页面加载产生的 HTTP 请求,在请求正文里把上图 catalog ID 抄下来:SAP_FIORI_EXTENSIBILITY.
如果不想用 Chrome 开发者工具,也可以直接登录后台,通过查询登录用户分配的 PFCG 角色,也能找到这个 ID:

打开 Fiori Launchpad Designer,输入刚才找到的 catalog ID,打开,创建一个新的 tile:

维护 tile 标题,Semantic Object,Action 和参数。

保存这个 tile,自动生成一个 url,后续点击该 tile 后,新打开的浏览器窗口就会加载它。

下一步我们需要指定这个 tile 点击后跳转的目标对象(Target Mapping):

在 Intent 里选择刚才创建 tile 时维护的 Semantic Object 和 Action,在 Target 区域,Application Type 选择 Transaction,只有这样才能在浏览器里打开 SAP GUI 里的事务码。Transaction 字段维护成 SE80.

保存之后,在 Target Mapping 列表里看到一条新生成的记录:

最后一步,将这个新建的 tile 配置到 SAP Fiori Extensibility 这个 catalog 里。


点击 Tile,SE80 事务码能够如我们期望的方式在浏览器里打开了。

注意这种方式打开的事务码,实际上是运行在 Fiori Launchpad 所部署在的 gateway 系统上。如果你的 Fiori 解决方案,gateway 系统和后台系统是两台不同的服务器,需要在 SPRO Manage SAP System Aliases 里维护一条记录,通过该记录把一个 System Alias 映射到一个在 SM59 里创建的,指向后台系统的 RFC Destination. 假设这个 Alias 取名为 S4CMD:

然后把该 Alias 维护到 tile 的 Target Mapping 里即可。

总结
本文前半部分,首先介绍了将 SAPGUI 传统的事物码,嵌入到 Fiori Launchpad 中启动并在浏览器里运行的技术原理,接着以每一位 ABAP 开发人员每天都会使用的事物码 SE80 为例,介绍了将其配置到 Fiori Launchpad 的详细步骤。
版权声明: 本文为 InfoQ 作者【Jerry Wang】的原创文章。
原文链接:【http://xie.infoq.cn/article/4db9651b20e01ffecb4d14e1c】。文章转载请联系作者。
评论