SAP Fiori Launchpad 应用的两个实用技巧分享

本文分享两个笔者在 SAP Fiori 开发项目中习得的两个关于 Fiori Launchpad 的技巧。

如何查找 SAP Fiori UI 上某个字段对应的底层数据库表

很多从事ABAP开发的朋友们,想必都阅读过这个文档的英文或中文版:

英文版:18 Techniques for Locating the Underlying Data of a Screen Field
中文版:在SAP GUI里查找一个屏幕字段对应的底层数据库表的18种方法

SAP Fiori Launchpad 应用的两个实用技巧分享_第1张图片

作者是Dennis Barrett:

SAP Fiori Launchpad 应用的两个实用技巧分享_第2张图片

到了Fiori时代,里面的很多办法都不再适用了。

本章节介绍一种方法能找出Fiori UI上某字段对应的ABAP后台数据库存储表。虽然不一定足够通用,但确实能解决笔者当时实际工作中遇到的一个问题。

这是SAP S/4HANA一个标准的Fiori应用: Product Master

SAP Fiori Launchpad 应用的两个实用技巧分享_第3张图片

我的需求是,找到字段"Number of Goods Receipt"在后台是存储在哪张表里的。

下面是笔者自己探索的详细步骤。

(1) 我们知道SAP UI5也是一个基于MVC的前端框架,框架支持双向绑定。在Chrome开发者工具里,找到这个UI字段绑定的模型字段名称:
NmbrOfGROrGISlipsToPrintQty

SAP Fiori Launchpad 应用的两个实用技巧分享_第4张图片

(2) 找到该Product Master Fiori应用基于的OData服务,浏览器里输入其metadata url查看结果,找到字段NmbrOfGROrGISlipsToPrintQty的从属数据类型为:
C_ProductstorageType

SAP Fiori Launchpad 应用的两个实用技巧分享_第5张图片

(3) 登录ABAP Development Tool,使用菜单"Open ABAP Development Object":

SAP Fiori Launchpad 应用的两个实用技巧分享_第6张图片

把第二步找到的数据类型C_ProductstorageType,根据命名规范,将Type前面的值C_Productstorage作为关键字查询:

SAP Fiori Launchpad 应用的两个实用技巧分享_第7张图片

排在结果列表第一位的C_PRODUCTSTORAGE, 是一个CDS view.
该视图从I_ProductStroageWD里读取数据,

SAP Fiori Launchpad 应用的两个实用技巧分享_第8张图片

I_ProductStorageWD又从I_Productstorage里读取:

SAP Fiori Launchpad 应用的两个实用技巧分享_第9张图片

最终,I_Productstorage从数据库表MARA里读取数据。

SAP Fiori Launchpad 应用的两个实用技巧分享_第10张图片

在这个视图的源代码里,根据第二步找到的字段名称NmbrOfGROrGISlipsToPrintQty进行搜索,立即就找到了对应的数据库表MARA里的字段为wesch:

SAP Fiori Launchpad 应用的两个实用技巧分享_第11张图片

再到SE16里打开MARA确认一下,发现Fiori UI上看到的23.671这个字段果然存储在MARA.WESCH里,任务完成。

SAP Fiori Launchpad 应用的两个实用技巧分享_第12张图片

给 SAP Fiori Launchpad 增添雪花纷飞的效果

我们首先在本地实现雪花效果,然后再集成到Fiori Launchpad里去。
搜索引擎里根据关键字snow canvas html5搜索,能找到很多结果:

SAP Fiori Launchpad 应用的两个实用技巧分享_第13张图片

本章节我们选择基于 HTML5 Canvas 技术的雪花效果实现。

本地新建一个html文件,把下图这119行代码拷贝进去,用浏览器打开,即可看到一个酷炫的雪花纷飞效果了。

SAP Fiori Launchpad 应用的两个实用技巧分享_第14张图片

这个雪花实现最核心的地方是上图第92行的requestAnimationFrame函数调用,这个函数是windows全局对象提供的一个标准函数,通知浏览器在每次重绘时,调用应用开发人员实现的一个回调函数,来实现动画效果。我们编写一个loop函数,在里面用随机数发生器修改200片雪花每一片的x和y轴坐标,大小和下落速度等参数。

理论上loop函数被requestAnimationFrame驱动,每隔一秒会重复执行60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。
搞懂了这段代码的实现原理后,下面我们将其迁移到Fiori里去。

打开SAP WebIDE,在workspace Preferences里根据关键字Launchpad搜索,找到SAP Fiori Launchpad extensibility这个插件,将其置于enabled状态。

SAP Fiori Launchpad 应用的两个实用技巧分享_第15张图片

之后在新建项目的向导里能看到SAP Fiori Launchpad Plugin这个模板了。基于这个模板创建一个新的Fiori项目:

SAP Fiori Launchpad 应用的两个实用技巧分享_第16张图片

向导会自动帮我们生成一个Fiori Launchpad插件必需的文件。

新建一个controller文件夹,里面新建一个文件Flake.js, 把之前单机版的雪花实现效果的script标签里的代码迁移到Flake.js里:

SAP Fiori Launchpad 应用的两个实用技巧分享_第17张图片

之所以Jerry用了“迁移”,而不是“拷贝”,是因为单机版里的JavaScript代码直接复制粘贴到Fiori里是没办法工作的。

想一想,UI5之外的第三方库,如何引入到Fiori项目里并消费?Flake.js可以看成nodejs里的一个module,注意上图第6行Object.extend函数调用,返回的是一个能够被SAP Fiori应用导入后能够直接消费的雪花对象。之前单机版里采用面向过程式编程思想开发的几个函数,通过Object.extend封装成了JavaScript对象具有的方法。

在Component.js里,通过sap.ui.define引入Flake对象,再用Flake.的语法就可以使用文件Flake.js里暴露的方法了。

SAP Fiori Launchpad 应用的两个实用技巧分享_第18张图片

完成插件开发后,本地测试。右键选择Run as SAP Fiori Launchpad Sandbox:

SAP Fiori Launchpad 应用的两个实用技巧分享_第19张图片

选择通过项目工程里的fioriSandboxConfig.json文件作为启动入口,就能在新的浏览器窗口里看到效果了:

SAP Fiori Launchpad 应用的两个实用技巧分享_第20张图片

如果遇到问题,老规矩,F12打开调试器,通过debug找原因:

SAP Fiori Launchpad 应用的两个实用技巧分享_第21张图片

如果sandbox里测试没问题,最后通过SAP帮助里介绍的步骤,部署到生产环境里,这里不再赘述。

SAP Fiori Launchpad 应用的两个实用技巧分享_第22张图片

总结

本文分享了笔者进行 SAP Fiori 项目开发中的两个实用技巧,分别包含已知 Fiori 屏幕上某字段的位置,查找其数据库表存储字段名称,以及 SAP Fiori Launchpad 自定义扩展(Extensibility)的详细步骤。

你可能感兴趣的:(SAP Fiori Launchpad 应用的两个实用技巧分享)