這是 Jerry 2021 年的第 28 篇文章，也是汪子熙公眾號總共第 299 篇原創文章。

Jerry 之前的文章 **[在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)**，介紹瞭如何使用 Visual Studio Code，建立 SAP Fiori Elements 應用。

後來有朋友在微信上向我諮詢，使用文章描述的步驟，生成的 Fiori Elements 應用裡，並不存在應用專屬的 (Application Specific) View 和 Controller，所以不知道如何對該應用進行二次開發。

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

的確，生成的專案檔案裡，只有一個光禿禿的 Component.js, 裡面宣告瞭一個 json 格式的後設資料描述檔案 manifest.json. 而我們知道 json 格式的檔案，裡面是無法編寫應用邏輯的。

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

另一個朋友向我詢問，SAP 推薦的 Fiori Elements 開發工具，到底是 WebIDE 還是 Visual Studio Code？

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

Jerry 首先回答第二位朋友的問題。

SAP 社群有一篇如何使用 SAP Business Application Studio 進行 Vue 應用開發的[部落格](https://blogs.sap.com/2021/04/12/vue-development-with-sap-business-application-studio/)，SAP WebIDE 和 Business Application Studio 的產品經理 Yuval，在評論區裡回答網友提問時，提供了下列有用的資訊：

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

同之前 SAP雲平臺 Neo 環境上傳統的 Full Stack WebIDE 相比，SAP Business Application Studio 是 SAP Business Technology Platform 上的雲應用開發工具，並不侷限於 SAP UI5 技術，而是支援包括 Vue.js, React 在內的任何 HTML5 前端開發技術。

SAP Business Application Studio 支援安裝各種 Extensions，因而能夠從容適配雲時代不斷湧現的各種新技術。藉助一個被稱為 SAP Fiori tools 的擴充套件包，SAP Business Application Studio 能方便地建立 SAP Fiori Elements 應用。SAP Fiori tools 也能在本地安裝的 Visual Studio Code 裡使用。

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

因此，SAP Business Application Studio / Visual Studio Code，都是 SAP 推薦用來開發 SAP Fiori Elements 應用的工具。

關於 SAP Business Application Studio 的更多介紹，請參考 Jerry 的文章：

[SAP新一代全棧開發工具：SAP Business Application Studio](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489352&idx=1&sn=89afda3efee152177ad78fe6672115f4&chksm=ead5a5dfdda22cc9a727699e320f491f3b8775d91f848a4d775a402677a10490d6050cd57786&scene=21#wechat_redirect)

回到本文標題，用 Visual Studio Code 建立的 SAP Fiori Elements 應用，如何對其做二次開發？

根據需求實現的難易程度不同，可以採取 Adaptation 和 Extension 的方式來完成二次開發。

* 所謂 Adaptation，就是修改 SAP Fiori Elements 應用的 manifest.json 檔案，來實現一些複雜度較低的需求。

* 所謂 Extension，就是透過 Jerry 之前的文章 [SAP產品增強技術回顧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489866&idx=1&sn=4f00c4f778f6fe6d5c4a0aa6f59b46a3&chksm=ead5abdddda222cb71f82170afcd5cc8ed5ec03db91d12ba0eed4329eb3e15e24d3804f1ca10&scene=21#wechat_redirect) 裡介紹的 SAP UI5 ExtensionHook 技術，建立 SAP Fiori Elements Extension 並進行 JavaScript 的定製程式碼開發。

先看 Adaptation 的一個實際例子。

透過 Jerry 上一篇文章 [**在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect) 介紹的步驟，建立的 Fiori Elements 應用的表格部分，只支援單選，即下圖表格行專案最左端的**圓形選擇控制元件**。

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

下面我在 Visual Studio Code 裡透過 Adaptation 方式，將該表格改成支援多項選擇。

Ctrl+Shift+P，開啟 Guided Development，這也是 SAP Fiori tools 擴充套件包裡的擴充套件之一：

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

該擴充套件提供了若干嚮導，指引開發者透過一系列步驟，完成 Fiori Elements 應用的 Adaptation.

因為我想讓表格支援多選，所以選擇 List Report Page - Enable Multiple selection in tables:

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

點選 Start Guide，

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

Adaptation 嚮導會自動定位到 manifest.json 對應區域，並顯示相應的程式碼。

下圖的含義是，只需在 manifest.json 檔案裡給 table 欄位新增上 multiSelect 為 true 的屬性，即可讓 Fiori Elements List Report 應用的表格，支援多選。點選 Apply，即可自動完成對 manifest.json 的修改，結束 Adaptation.

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

修改之後的 manifest.json 區域如下圖所示。也就是說，如果對於 manifest.json 裡支援的屬性設定非常熟悉的話，可以直接編輯該檔案，無需使用 Fiori Guided Development 擴充套件。

```json
"extends": {
            "extensions": {
                "sap.ui.controllerExtensions": {
                    "sap.suite.ui.generic.template.ListReport.view.ListReport": {
                        "controllerName": "com.sap.jerry.jerryfioriapp.WangZiXi"
                    }
                }
            }
        },
```

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

現在表格的選擇模式已經變成多選了：

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

而如果想對該 SAP Fiori Elements 應用編寫 JavaScript 自定義邏輯，需要採取 SAP UI5 的 Extension 技術。ABAP 開發人員可以把這個技術看作是 JavaScript 版本的 BAdI.

在 manifest.json extends 區域註冊一個 extension，型別為 sap.ui.controllerExtensions，子型別為 sap.suite.ui.generic.template.ListReport.view.ListReport.

下圖的語義是，開發人員希望定義一個由欄位 controllerName 指定的 controller extension，來擴充套件 SAP Fiori Elements List Report 標準的 controller.

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

SAP Fiori Elements ListReport 標準的 controller，其實現程式碼位於 sap.suite.ui.generic.template.ListReport.controller 的 ControllerImplementation.js 裡。

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

這個標準的 Controller 裡，第 641 行程式碼呼叫 onBeforeRebindTableExtension 方法。假設我們想重新實現該方法，在表格渲染前執行一些自定義邏輯，則可以將這些自定義邏輯，實現在 manifest.json 註冊的 controller extension 裡。

注意 controller extension 的實現檔案裡，sap.ui.define 的第一個引數宣告的 controller 名稱，必須和 manifest.json 裡註冊的 controllerName 欄位保持一致。

```javascript
sap.ui.define("com.sap.jerry.jerryfioriapp.WangZiXi", [], function() {
    return {
        onBeforeRebindTableExtension: function(oEvent) {
            debugger;
        }
    }
}
);
```
![](https://img-blog.csdnimg.cn/img_convert/2c3005cd9ebc0c93851342c915e27053.png)

這樣，執行時，在 Fiori Elements List Report 表格被渲染之前，我們的二次開發程式碼就能被框架呼叫：

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

Jerry 後續會分享更多關於 SAP Fiori Elements 的開發和擴充套件知識，敬請持續關注。感謝閱讀。

**更多閱讀**

*   [SAP Fiori應用索引大全](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247488734&idx=1&sn=7183bce297fd918de90215e40db8ea34&chksm=ead5a649dda22f5f875cdd56be5d94634240a2afd89abc318d73201b90d4e6f69f2c34c267ac&scene=21#wechat_redirect)

*   [Fiori Fundamentals和SAP UI5 Web Components](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486061&idx=1&sn=93024837a72cbb445b219655f75b1b75&chksm=ead5b8fadda231ec0b6b4dd35a0281cb92bddb0a2863335c5823950881314259f8835b32592e&scene=21#wechat_redirect)

*   [為什麼SAP GUI裡的傳統事務碼能透過Fiori Launchpad啟動並執行在瀏覽器裡](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489169&idx=1&sn=be9cfe4b23c667b2a367886107eaa652&chksm=ead5a406dda22d10854945679875b27af092bdad035b417b035a4122e60a568b61a8b9d8f176&scene=21#wechat_redirect)

*   [一步步把SAP GUI的事務碼配置到SAP Fiori Launchpad裡](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489214&idx=1&sn=d47192162ff1b098f7918cda3b6131f8&chksm=ead5a429dda22d3faf569ced7174f5915d61f33108e4b1dbc13e0270fee3930d978a9ed9865c&scene=21#wechat_redirect)

*   [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490624&idx=1&sn=355253156bec497d2d51925010feb8c1&chksm=ead5aed7dda227c1dd97a0ba5d24eb1d91415eadca97ec0f540cf49beaa6a699d734d5ce4f2c&scene=21#wechat_redirect)

*   [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

*   [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

*   [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

*   [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

*   [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

*   [SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect)

*   [SAP UI5和Angular的函式防抖(Debounce)和函式節流(Throttle)實現原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491343&idx=1&sn=0e7aa53525157d8ef8af8681d79d7b64&chksm=ead5ad98dda2248e44955e59e89c95d81d5a4ae4fa3380486c74252e67515bc2c0883bd49967&scene=21#wechat_redirect)

*   [SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)

*   [SAP UI的載入動畫效果和幽靈設計(Ghost Design)](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491512&idx=1&sn=a44d166f7685b7a23aabaa22bc46c3a7&chksm=ead5ad2fdda22439755b9434a7364afd97356e1a7a623beb94f5375dc2ec47559d9efa60985f&scene=21#wechat_redirect)

*   [介紹一個能開發簡單SAP UI5應用的線上IDE：StackBlitz](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491526&idx=1&sn=027753170e69179735a95297d8534ee9&chksm=ead5ad51dda22447efc4061ecb5cff5920863d617a114a124079e9ec8713c1607816ff2baff5&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [如何分辨 SAP Fiori Launchpad 裡的真假 Fiori 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491884&idx=1&sn=4b3dc9a96dc3c4c162ea0caadace52a2&chksm=ead653bbdda1daad81ec5bd73ce4ecc418f5d0090e5bfb3074a439687d2c8bb9dffb25fcb7a8&scene=21#wechat_redirect)

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [SAP Fiori 應用裡圖示(Icon)的渲染原理和使用技巧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492089&idx=1&sn=05ba2705d32d76750ce22809c8f58058&chksm=ead6536edda1da78248899d24b6e65dc4a5c08c5d666ebdf4c8715b6cd1f8e5dad84f65fe385&scene=21#wechat_redirect)

答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？

相關文章