SAP|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种方法
文章图片
作者是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|SAP Fiori Launchpad 应用的两个实用技巧分享】本文分享了笔者进行 SAP Fiori 项目开发中的两个实用技巧，分别包含已知 Fiori 屏幕上某字段的位置，查找其数据库表存储字段名称，以及 SAP Fiori Launchpad 自定义扩展(Extensibility)的详细步骤。
推荐阅读
- SAP|SAP AppGyver 的 Universal Theme System 使用介绍
- SAP|SAP AppGyver 简介
- SAP|SAP ABAP CDS view 视图的 Replacement 技术介绍
- SAP|SAP S4 Material Management 库存模块 MARD 数据库表读取技术细节介绍
- SAP|SAP ECC 和 S4HANA Material 物料库存管理的模型比较
- SAP|SAP ABAP 系统进行数据库表查询的几种常用方法的试读版
- 授人以渔-在|授人以渔-在 SAP MM 物料显示界面上看到一个字段，如何查找哪张数据库表的哪个字段进行的存储
- SAP|SAP S/4HANA New Simplified Data Model (NSDM) 模型介绍
- 在|在 SAP ABAP 系统对事物码 SEGW 创建的 OData 服务进行配置并测试试读版
- SAP|SAP ABAP WAIT 小数秒