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

Jerry 的日常工作內容從 2020 年 8 月轉到 Angular 前端開發之後，算是領略到了這個流行前端框架繁榮生態圈的風采：在開發過程中遇到 Angular 技術問題時，很容易在社群裡找到大量相關文章。除了每天我都要瀏覽的 Angular 官網之外，我也經常閱讀一些國內外大神寫的關於 Angular 原始碼分析的部落格。

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

同 Angular 相比，使用 SAP Fiori Elements 的從業者的絕對人數沒有 Angular 多，除了 SAP 官網文件之外，介紹 Fiori Elements 原始碼實現和工作原理的文章不多，中文材料就更少了。

因此 Jerry 試著用中文寫了一些 SAP Fiori Elements 使用和工作原理介紹的文章，希望對這個開發框架的中文生態圈貢獻一點微薄之力：

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

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

本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上

深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field

本文繼續透過 SAP Fiori Elements 應用一個實際增強的例子，來闡述其工作原理。

Jerry 上述列舉的文章，介紹瞭如何基於 SAP ES5 Demo 系統上部署的一個 OData 服務，建立一個型別為 List Report 的 SAP Fiori Elements 應用。其介面如下：

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

其中表格區域的工具欄裡，黑色高亮框內為 Fiori Elements 表格控制元件自帶的按鈕，提供了表格行專案的複製，建立，刪除等功能。而紅色的按鈕則是我透過 Fiori Elements 應用增強的方式繪製出來的。

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

本文我們會分享：如何在 SAP Fiori Elements 表格控制元件的工具欄裡，新增新的自定義按鈕。

本系列後續文章，Jerry 會介紹，如何在自定義按鈕的點選事件處理函式里，用程式碼取得當前選中行專案的明細資訊。

Jerry 之前的文章 答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？，曾經提到了在 Fiori Elements 專案工程的 manifest.json 檔案裡，透過宣告並實現 sap.ui.controllerExtensions 的方式來進行二次開發。sap.ui.controllerExtensions 可以理解成 ABAP 裡的 BAdI definition，而我們基於 sap.ui.controllerExtensions 建立的自定義控制器 (controller.js), 則可類比成 ABAP BAdI 增強的具體實現。

在 manifest.json 的 extends 區域裡維護如下程式碼：

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

上述程式碼的關鍵點解釋：

1. 為該專案宣告一個 sap.ui.controllerExtension 的實現，其原始碼位於我們新建的控制器裡。

2. 宣告自定義控制器的 id，稍後我們會手動建立這個控制器：com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension.

3. 宣告這個自定義控制器工作的 OData EntitySet 名稱。

4. 宣告按鈕明細，在 SAP Fiori Elements 裡按鈕實現的模型稱為 Action.

上圖宣告瞭自定義 Action 的若干屬性：

id 屬性值，最後會作為渲染出的 HTML 原生程式碼中 button 標籤 id 值的一部分。
text 屬性值，即 UI 顯示按鈕的標籤值。
press 屬性值即該按鈕的點選處理函式的名稱，我們稍後需要在自定義控制器裡實現一個同名函式。
requiresSelection 屬性，顧名思義，如果為 true，表明該按鈕只有當表格某行專案被選中時才能夠被點選。例如下圖所示，表格區域沒有任何一行被選中，此時我的自定義按鈕，處於不可點選狀態。

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

manifest.json 裡的增強定義完畢後，接著我們新建一個控制器 ListReportExtension.controller.js，在這個檔案裡編寫 manifest.json 裡宣告的函式，即按鈕點選事件處理函式
onCustomAction1

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

目前，點選自定義按鈕後，只是彈出一個對話方塊而已：

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

如上圖所示，點選自定義按鈕之後，看到了期望的彈出框。我們再修改按鈕的屬性，進行一些額外的測試。

給自定義按鈕新增一個 global 為 true 的屬性：

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

重新開啟頁面，發現該按鈕跑到應用右上方，成為一個全域性按鈕了。
 
![](https://img-blog.csdnimg.cn/img_convert/738afd0ca8fa6e2c20b02c9a09c886cd.png)

把 global 屬性換成 determining，這次自定義按鈕跑到 footer 區域了：

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

想知道我是如何知道 global，determining 這些屬性的名稱嗎？答案是閱讀 SAP Fiori Elements XML 檢視的原始碼實現。

Jerry 之前的文章 在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用 曾經提到，SAP Fiori Elements 預置了很多頁面模板：

List Report Object Page

Worklist

Analytical List Page

Overview Page

這些頁面模板的佈局，均採取 XML 檢視實現。

以除錯模式啟動 SAP Fiori Elements 應用，即可在 Chrome 開發者工具 network 標籤頁裡，觀察到這些 XML 檢視的載入：

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

上面這張圖資訊量很大。首先左邊列表裡，紅色高亮的 ListReport.view.xml, 當然就是 List Report 模板的 XML 檢視實現了。這個 XML 檢視實現裡包含了兩個頁面片段 (fragment)，即上圖右邊標號為 1 和 2 的元素：

FullscreenPage.fragment.xml
CreateWithDialog.xml

一個頁面片段又可以包含若干個頁面片段。換言之，List Report (以及 SAP Fiori Elements 的其他頁面模板) 的 XML 檢視實現，是以 ListReport.view.xml 為根節點的一棵樹狀結構，葉節點為不同的頁面片段。

上圖不同高亮顏色的頁面片段，均和 SAP Fiori Elements 自定義按鈕的渲染相關，繪製成樹狀結構如下：

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

箭頭符號表示包含關係，比如 SmartTable.fragment.xml 原始碼裡，包含了名為 SmartTableToolbar 的檢視片段。

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

為什麼本文之前提到的在 manifest.json 裡新增的 determining = true 的自定義按鈕，會出現在 List Report 的 footer 區域？答案就在 FullscreenPage 頁面片段的原始碼裡。

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

如上圖所示，在綠色的 footer 標籤裡，使用 XML 檢視指令，template:repeat ，遍歷繫結到該頁面片段的 Actions 結構，將結構裡每一個元素，賦給模板變數 customaction, 該變數此時包含的就是 manifest.json extends 區域裡宣告的自定義按鈕的明細。 然後用另一個模板指令，template:if, 判斷當前自定義按鈕的屬性，如果 determining 屬性為 true，且 global 屬性為 false，則在當前區域即 footer 區域渲染該自定義按鈕。

因此最後在 footer 區域渲染的自定義按鈕效果如下：

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

而 List Report 表格的工具欄區域的按鈕，實現在頁面片段 BreakoutActions.fragment.xml 裡：

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

第 7 行的註釋寫得很清楚了，使用 template: if 指令，判斷下列布林表示式的值：

!${customaction>determining} && !${customaction>global}

如果表示式的值為 true，則渲染被 template: if 包裹的 button 元素。

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

上圖 template:if, 是 SAP UI5 針對 XML 檢視實現的自定義指令，在需要滿足根據某種判斷條件來顯示或隱藏 UI 元素此類需求時特別有用。其效果和使用方式，和 Angular 裡的結構型指令 ngIf 非常類似。

比如下圖是SAP Commerce Cloud (Spartacus UI) Organization Unit 明細頁面檢視實現的部分截圖，54 行的 div 標籤上，施加了一個 ngIf 指令，分配的布林表示式是 model.approvalProcess.name, 語義是：當且僅當 model.approvalProcess.name 的值不為空時，才渲染這個 div 標籤及其子元素。

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

最後一個問題：例如 BreakoutActions 頁面片段裡，UI5 自定義指令繫結的這些 Actions 模型，資料來自哪裡？

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

當然是來自 Fiori Elements 工程裡的 manifest.json 檔案裡定義的同名屬性 Actions：

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

在 SAP Fiori Elements 應用啟動時，manifest.json 檔案會被框架程式碼 Component.js 的 loadManifests 方法載入，其文字內容會被反序列化成 JSON 物件：

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

manifest.json 檔案的 Actions 區域的內容，會被繫結到 List Report 相關的頁面片段裡，參與各種自定義指令 template: xxx 的執行流程中。

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

希望透過本文的介紹，大家對於 SAP Fiori Elements List Report 裡自定義按鈕的渲染邏輯，能夠有進一步的理解。

本系列後續文章，Jerry 會介紹，如何讓 SAP Fiori Elements 應用表格區域裡，選中的行專案的明細資訊，包含在自定義按鈕點選後顯示的彈出對話方塊裡。敬請期待。

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

**更多閱讀**

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 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 Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

*   [本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492152&idx=1&sn=b4f365a645779e1c57064b747d64ea61&chksm=ead650afdda1d9b9761fef55001935a8bd12aeda621a78edeafa7ee4cc154121bf76d7ab42c1&scene=21#wechat_redirect)

*   [深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492283&idx=1&sn=716ba26a34b3cb071ba58c74945ad9da&chksm=ead6502cdda1d93a7c4b2efc5144ed77dfd619edd045e3ca7dcdd0e74221b605ad54b06fe4b6&scene=21#wechat_redirect)

如何給 SAP Fiori Elements 應用新增自定義按鈕

相關文章