本文分享两个笔者在 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)的详细步骤。