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

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

很多从事ABAP开发的敌人们，想必都浏览过这个文档的英文或中文版：

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

作者是Dennis Barrett：

到了Fiori时代，外面的很多方法都不再实用了。

本章节介绍一种办法能找出Fiori UI上某字段对应的ABAP后盾数据库存储表。尽管不肯定足够通用，但的确能解决笔者过后理论工作中遇到的一个问题。

这是SAP S/4HANA一个规范的Fiori利用： Product Master

我的需要是，找到字段"Number of Goods Receipt"在后盾是存储在哪张表里的。

上面是笔者本人摸索的具体步骤。

(1) 咱们晓得SAP UI5也是一个基于MVC的前端框架，框架反对双向绑定。在Chrome开发者工具里，找到这个UI字段绑定的模型字段名称：
NmbrOfGROrGISlipsToPrintQty

(2) 找到该Product Master Fiori利用基于的OData服务，浏览器里输出其metadata url查看后果，找到字段NmbrOfGROrGISlipsToPrintQty的隶属数据类型为：
C_ProductstorageType

(3) 登录ABAP Development Tool，应用菜单"Open ABAP Development Object":

把第二步找到的数据类型C_ProductstorageType，依据命名标准，将Type后面的值C_Productstorage作为关键字查问：

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

I_ProductStorageWD又从I_Productstorage里读取：

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

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

再到SE16里关上MARA确认一下，发现Fiori UI上看到的23.671这个字段果然存储在MARA.WESCH里，工作实现。

给 SAP Fiori Launchpad 削减雪花纷飞的成果

咱们首先在本地实现雪花成果，而后再集成到Fiori Launchpad里去。
搜索引擎里依据关键字snow canvas html5搜寻，能找到很多后果：

本章节咱们抉择基于 HTML5 Canvas 技术的雪花成果实现。

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

这个雪花实现最外围的中央是上图第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 Plugin这个模板了。基于这个模板创立一个新的Fiori我的项目：

向导会主动帮咱们生成一个Fiori Launchpad插件必须的文件。

新建一个controller文件夹，外面新建一个文件Flake.js， 把之前单机版的雪花实现成果的script标签里的代码迁徙到Flake.js里：

之所以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里裸露的办法了。

实现插件开发后，本地测试。右键抉择Run as SAP Fiori Launchpad Sandbox：

抉择通过我的项目工程里的fioriSandboxConfig.json文件作为启动入口，就能在新的浏览器窗口里看到成果了：

如果遇到问题，老规矩，F12关上调试器，通过debug找起因：

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

总结

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