本文分享兩個筆者在 SAP Fiori 開發專案中習得的兩個關於 Fiori Launchpad 的技巧。

# 如何查詢 SAP Fiori UI 上某個欄位對應的底層資料庫表

很多從事ABAP開發的朋友們，想必都閱讀過這個文件的英文或中文版：

英文版：18 Techniques for Locating the Underlying Data of a Screen Field
中文版：在SAP GUI裡查詢一個螢幕欄位對應的底層資料庫表的18種方法

![](https://img-blog.csdnimg.cn/img_convert/d78bcbe1d1da2f34dc68346ab5ff9bb2.png)

作者是Dennis Barrett：

![](https://img-blog.csdnimg.cn/img_convert/da0e7d477589e5a262b21670de5f0ab7.png)

到了Fiori時代，裡面的很多辦法都不再適用了。

本章節介紹一種方法能找出Fiori UI上某欄位對應的ABAP後臺資料庫儲存表。雖然不一定足夠通用，但確實能解決筆者當時實際工作中遇到的一個問題。

這是SAP S/4HANA一個標準的Fiori應用： Product Master

![](https://img-blog.csdnimg.cn/img_convert/a4b0e3aa1541c2d45f75d6587f7d6d2a.png)

我的需求是，找到欄位"Number of Goods Receipt"在後臺是儲存在哪張表裡的。

下面是筆者自己探索的詳細步驟。

(1) 我們知道SAP UI5也是一個基於MVC的前端框架，框架支援雙向繫結。在Chrome開發者工具裡，找到這個UI欄位繫結的模型欄位名稱：
NmbrOfGROrGISlipsToPrintQty

![](https://img-blog.csdnimg.cn/img_convert/ffd250285cc84cf09129495b7b900213.png)

(2) 找到該Product Master Fiori應用基於的OData服務，瀏覽器裡輸入其metadata url檢視結果，找到欄位NmbrOfGROrGISlipsToPrintQty的從屬資料型別為：
C_ProductstorageType

![](https://img-blog.csdnimg.cn/img_convert/bb4a62ea4c0e092217c7d069ba030e97.png)

(3) 登入ABAP Development Tool，使用選單"Open ABAP Development Object":

![](https://img-blog.csdnimg.cn/img_convert/00ebb0271a6b913d1dae10007cbae14a.png)

把第二步找到的資料型別C_ProductstorageType，根據命名規範，將Type前面的值C_Productstorage作為關鍵字查詢：

![](https://img-blog.csdnimg.cn/img_convert/6ae39305e940f640d2198734212517db.png)

排在結果列表第一位的C_PRODUCTSTORAGE, 是一個CDS view.
該檢視從I_ProductStroageWD裡讀取資料，

![](https://img-blog.csdnimg.cn/img_convert/1dae0dac08395be1cca3a5e4ae8140cf.png)

I_ProductStorageWD又從I_Productstorage裡讀取：

![](https://img-blog.csdnimg.cn/img_convert/2276cc233b4d455dbadd8cb2f78d3598.png)

最終，I_Productstorage從資料庫表MARA裡讀取資料。

![](https://img-blog.csdnimg.cn/img_convert/c4689c90533c0525744519879f75fe7d.png)

在這個檢視的原始碼裡，根據第二步找到的欄位名稱NmbrOfGROrGISlipsToPrintQty進行搜尋，立即就找到了對應的資料庫表MARA裡的欄位為wesch:

![](https://img-blog.csdnimg.cn/img_convert/52f30c803d4162407369ebbc033a1aef.png)

再到SE16裡開啟MARA確認一下，發現Fiori UI上看到的23.671這個欄位果然儲存在MARA.WESCH裡，任務完成。

![](https://img-blog.csdnimg.cn/img_convert/d4d7b8a83b7de7c903526f7d7b2f21ae.png)

# 給 SAP Fiori Launchpad 增添雪花紛飛的效果

我們首先在本地實現雪花效果，然後再整合到Fiori Launchpad裡去。
搜尋引擎里根據關鍵字snow canvas html5搜尋，能找到很多結果：

![](https://img-blog.csdnimg.cn/img_convert/ea44866e11b9e7816120674bce3b516e.png)

本章節我們選擇基於 HTML5 Canvas 技術的雪花效果實現。

本地新建一個html檔案，把下圖這119行程式碼複製進去，用瀏覽器開啟，即可看到一個酷炫的雪花紛飛效果了。

![](https://img-blog.csdnimg.cn/img_convert/25a22c2f13caeaa744b21adaa7a8ecea.png)

這個雪花實現最核心的地方是上圖第92行的requestAnimationFrame函式呼叫，這個函式是windows全域性物件提供的一個標準函式，通知瀏覽器在每次重繪時，呼叫應用開發人員實現的一個回撥函式，來實現動畫效果。我們編寫一個loop函式，在裡面用隨機數發生器修改200片雪花每一片的x和y軸座標，大小和下落速度等引數。

理論上loop函式被requestAnimationFrame驅動，每隔一秒會重複執行60次，但在大多數遵循W3C建議的瀏覽器中，回撥函式執行次數通常與瀏覽器螢幕重新整理次數相匹配。
搞懂了這段程式碼的實現原理後，下面我們將其遷移到Fiori裡去。

開啟SAP WebIDE，在workspace Preferences里根據關鍵字Launchpad搜尋，找到SAP Fiori Launchpad extensibility這個外掛，將其置於enabled狀態。

![](https://img-blog.csdnimg.cn/img_convert/1fa8720f53b394cbb82f4d38eceb98ca.png)

之後在新建專案的嚮導裡能看到SAP Fiori Launchpad Plugin這個模板了。基於這個模板建立一個新的Fiori專案：

![](https://img-blog.csdnimg.cn/img_convert/4a7e5be1aee75a2f4b45fca3d36f6e8e.png)

嚮導會自動幫我們生成一個Fiori Launchpad外掛必需的檔案。

新建一個controller資料夾，裡面新建一個檔案Flake.js， 把之前單機版的雪花實現效果的script標籤裡的程式碼遷移到Flake.js裡：

![](https://img-blog.csdnimg.cn/img_convert/2b93adaaddd1743d2fcb88683afe4ef1.png)

之所以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裡暴露的方法了。

![](https://img-blog.csdnimg.cn/img_convert/395e87021a0beb5e1555d5e440e6996e.png)

完成外掛開發後，本地測試。右鍵選擇Run as SAP Fiori Launchpad Sandbox：

![](https://img-blog.csdnimg.cn/img_convert/62bbdc894ef95b62a667a0baedcd5ba7.png)

選擇透過專案工程裡的fioriSandboxConfig.json檔案作為啟動入口，就能在新的瀏覽器視窗裡看到效果了：

![](https://img-blog.csdnimg.cn/img_convert/93bcf346ad1d92fa01aa8a6fa94ede45.png)

如果遇到問題，老規矩，F12開啟偵錯程式，透過debug找原因：

![](https://img-blog.csdnimg.cn/img_convert/0414d98da3c0f87c4f0769243341f658.png)

如果sandbox裡測試沒問題，最後透過SAP幫助裡介紹的步驟，部署到生產環境裡，這裡不再贅述。

![](https://img-blog.csdnimg.cn/img_convert/5882a135c1016779ff4ad52ce6559648.png)

# 總結

本文分享了筆者進行 SAP Fiori 專案開發中的兩個實用技巧，分別包含已知 Fiori 螢幕上某欄位的位置，查詢其資料庫表儲存欄位名稱，以及 SAP Fiori Launchpad 自定義擴充套件(Extensibility)的詳細步驟。

SAP Fiori Launchpad 應用的兩個實用技巧分享

相關文章