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

這是 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 表格被渲染之前，我們的二次開發代碼就能被架構調用：