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

Jerry 之前的文章 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用，介紹了如何使用 Visual Studio Code，創建 SAP Fiori Elements 應用。

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

的確，生成的項目文件里，只有一個光禿禿的 Component.js, 里面聲明了一個 json 格式的元數據描述文件 manifest.json. 而我們知道 json 格式的文件，里面是無法編寫應用邏輯的。

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

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

SAP 社區有一篇如何使用 SAP Business Application Studio 進行 Vue 應用開發的博客，SAP WebIDE 和 Business Application Studio 的產品經理 Yuval，在評論區里回答網友提問時，提供了下列有用的信息：

同之前 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 里使用。

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

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

SAP新一代全棧開發工具：SAP Business Application Studio

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

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

• 所謂 Adaptation，就是修改 SAP Fiori Elements 應用的 manifest.json 文件，來實現一些復雜度較低的需求。

• 所謂 Extension，就是通過 Jerry 之前的文章 SAP產品增強技術回顧 里介紹的 SAP UI5 ExtensionHook 技術，創建 SAP Fiori Elements Extension 并進行 JavaScript 的定制代碼開發。

先看 Adaptation 的一個實際例子。

通過 Jerry 上一篇文章 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用 介紹的步驟，創建的 Fiori Elements 應用的表格部分，只支持單選，即下圖表格行項目最左端的圓形選擇控件。

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

Ctrl+Shift+P，打開 Guided Development，這也是 SAP Fiori tools 擴展包里的擴展之一：

該擴展提供了若干向導，指引開發者通過一系列步驟，完成 Fiori Elements 應用的 Adaptation.

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

點擊 Start Guide，

Adaptation 向導會自動定位到 manifest.json 對應區域，并顯示相應的代碼。

下圖的含義是，只需在 manifest.json 文件里給 table 字段添加上 multiSelect 為 true 的屬性，即可讓 Fiori Elements List Report 應用的表格，支持多選。點擊 Apply，即可自動完成對 manifest.json 的修改，結束 Adaptation.

修改之后的 manifest.json 區域如下圖所示。也就是說，如果對于 manifest.json 里支持的屬性設置非常熟悉的話，可以直接編輯該文件，無需使用 Fiori Guided Development 擴展。

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

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

而如果想對該 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.

SAP Fiori Elements ListReport 標準的 controller，其實現代碼位于 sap.suite.ui.generic.template.ListReport.controller 的 ControllerImplementation.js 里。

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

注意 controller extension 的實現文件里，sap.ui.define 的第一個參數聲明的 controller 名稱，必須和 manifest.json 里注冊的 controllerName 字段保持一致。

sap.ui.define("com.sap.jerry.jerryfioriapp.WangZiXi", [], function() {return {onBeforeRebindTableExtension: function(oEvent) {debugger;}} } );

這樣，運行時，在 Fiori Elements List Report 表格被渲染之前，我們的二次開發代碼就能被框架調用：

Jerry 后續會分享更多關于 SAP Fiori Elements 的開發和擴展知識，敬請持續關注。感謝閱讀。

更多閱讀

• SAP Fiori應用索引大全

• Fiori Fundamentals和SAP UI5 Web Components

• 為什么SAP GUI里的傳統事務碼能通過Fiori Launchpad啟動并運行在瀏覽器里

• 一步步把SAP GUI的事務碼配置到SAP Fiori Launchpad里

• SAP UI5應用開發人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機制

• SAP UI5 控件渲染機制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數據的元數據實現

• SAP UI5控件的實例數據修改和讀取邏輯

• SAP UI5控件數據綁定的實現原理

• SAP UI5控件數據綁定的三種模式：One Way, Two Way和OneTime實現原理比較

• SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎

• SAP UI5和Angular的函數防抖(Debounce)和函數節流(Throttle)實現原理介紹

• SAP UI渲染模式：客戶端渲染 VS 服務器端渲染

• SAP UI的加載動畫效果和幽靈設計(Ghost Design)

• 介紹一個能開發簡單SAP UI5應用的在線IDE：StackBlitz

• SAP CRM Fiori 應用和 SAP Commerce Cloud (電商云) UI 如何通過調整CSS來改變UI顯示風格

• SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商云) UI 增強實現中的體現

• 如何分辨 SAP Fiori Launchpad 里的真假 Fiori 應用

• 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

• SAP Fiori 應用里圖標(Icon)的渲染原理和使用技巧

更多Jerry的原創文章，盡在：“汪子熙”:

2021-6-8

用戶點擊 Fiori Elements Smart table 后，如何在 extension controller.js 里獲得當前 table 的數據？

var oTable = oEvent.getSource().getParent().getParent().getTable();var content = oTable.getAggregations("plugins")[0].getSelectedIndices(); 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的答网友提问：使用 SAP Fiori Tools 创建的 Fiori Elements 应用，如何进行二次开发？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。