共计 2410 个字符,预计需要花费 7 分钟才能阅读完成。
本文分享两个笔者在 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) 的具体步骤。