深刻掌握 SAP Fiori Elements 工做原理系列之二：如何給 Fiori Elements 應用添加自定義按鈕

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

Jerry 的平常工做內容從 2020 年 8 月轉到 Angular 前端開發以後，算是領略到了這個流行前端框架繁榮生態圈的風采：在開發過程當中遇到 Angular 技術問題時，很容易在社區裏找到大量相關文章。除了天天我都要瀏覽的 Angular 官網以外，我也常常閱讀一些國內外大神寫的關於 Angular 源代碼分析的博客。

同 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 應用。其界面以下：

其中表格區域的工具欄裏，黑色高亮框內爲 Fiori Elements 表格控件自帶的按鈕，提供了表格行項目的複製，建立，刪除等功能。而紅色的按鈕則是我經過 Fiori Elements 應用加強的方式繪製出來的。

本文咱們會分享：如何在 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 區域裏維護以下代碼：

上述代碼的關鍵點解釋：

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，代表該按鈕只有當表格某行項目被選中時纔可以被點擊。例以下圖所示，表格區域沒有任何一行被選中，此時個人自定義按鈕，處於不可點擊狀態。

manifest.json 裏的加強定義完畢後，接着咱們新建一個控制器 ListReportExtension.controller.js，在這個文件裏編寫 manifest.json 裏聲明的函數，即按鈕點擊事件處理函數
onCustomAction1

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

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

給自定義按鈕添加一個 global 爲 true 的屬性：

從新打開頁面，發現該按鈕跑到應用右上方，成爲一個全局按鈕了。

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

想知道我是如何知道 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 視圖的加載：

上面這張圖信息量很大。首先左邊列表裏，紅色高亮的 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 自定義按鈕的渲染相關，繪製成樹狀結構以下：

箭頭符號表示包含關係，好比 SmartTable.fragment.xml 源代碼裏，包含了名爲 SmartTableToolbar 的視圖片斷。

爲何本文以前提到的在 manifest.json 裏添加的 determining = true 的自定義按鈕，會出如今 List Report 的 footer 區域？答案就在 FullscreenPage 頁面片斷的源代碼裏。

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

所以最後在 footer 區域渲染的自定義按鈕效果以下：

而 List Report 表格的工具欄區域的按鈕，實如今頁面片斷 BreakoutActions.fragment.xml 裏：

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

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

若是表達式的值爲 true，則渲染被 template: if 包裹的 button 元素。

上圖 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 標籤及其子元素。

最後一個問題：例如 BreakoutActions 頁面片斷裏，UI5 自定義指令綁定的這些 Actions 模型，數據來自哪裏？

固然是來自 Fiori Elements 工程裏的 manifest.json 文件裏定義的同名屬性 Actions：

在 SAP Fiori Elements 應用啓動時，manifest.json 文件會被框架代碼 Component.js 的 loadManifests 方法加載，其文本內容會被反序列化成 JSON 對象：

manifest.json 文件的 Actions 區域的內容，會被綁定到 List Report 相關的頁面片斷裏，參與各類自定義指令 template: xxx 的執行流程中。

但願經過本文的介紹，你們對於 SAP Fiori Elements List Report 裏自定義按鈕的渲染邏輯，可以有進一步的理解。

本系列後續文章，Jerry 會介紹，如何讓 SAP Fiori Elements 應用表格區域裏，選中的行項目的明細信息，包含在自定義按鈕點擊後顯示的彈出對話框裏。敬請期待。

更多閱讀

• 在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用
• 答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？
• 本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 服務器上
• 深刻掌握 SAP Fiori Elements 工做原理的前提條件：理解 Smart Field

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