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

Jerry 前一篇文章 [**深入掌握 SAP Fiori Elements 工作原理系列之二：如何給 Fiori Elements 應用新增自定義按鈕**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1a1d2efd00d075eee0&chksm=ead65077dda1d961f69684f665d4ad0be1b442a2e316b633a05834c75d50f3198e7a6efdb781&scene=21#wechat_redirect) 介紹瞭如何給 SAP Fiori Elements 應用的 Smart Table 工具欄裡，新增自定義按鈕，並實現其點選事件處理函式。

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

本文 Jerry 繼續介紹 SAP Fiori Elements 應用裡，Smart Table 控制元件的渲染原理。根據前一篇文章介紹的知識，SAP Fiori Elements List Report 的模板，包含了 SmartTable.fragment.xml 這個頁面片段：

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

而該頁面片段的原始碼裡，使用了 Smart Table 控制元件：

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

為了把和 Smart Table 控制元件不相關的依賴都剝離開，以便於大家把注意力聚焦在 Smart Table 本身上，本文 Jerry 另外開發了一個 SAP UI5 應用，只包含一個最簡單的 XML 檢視，裡面使用到了 Smart Table 控制元件。同時，我開發了一個簡單的 Mock 伺服器，讓該應用在請求 OData 服務後設資料時，由 Mock 伺服器把本地工程事先準備好的 metadata.xml 檔案的內容，作為後設資料響應，直接返回給應用。這樣我可以方便地修改本地 metadata.xml 檔案，來達到各種測試目的。

關於如何在 SAP UI5 應用裡手動搭建 Mock 伺服器，請參考我這篇文章：[何以 mock server 的方式本地啟動 SAP UI5 應用，使它不連線遠端伺服器端的 OData 服務](https://zhuanlan.zhihu.com/p/370597942).

本文這個用於演示 Smart Table 控制元件使用方法的 SAP UI5 應用，其完整原始碼在我的 [Github](https://github.com/wangzixi-diablo/ui5-toolset/tree/main/smarttable/webapp) 上。

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

該應用三個核心檔案：

* metadata.xml: 該檔案的內容即 OData 服務的後設資料，包含加上了 SAP Fiori Elements 系列的自定義註解，我們稍後會詳細研究該檔案內容。當 SAP UI5 應用向伺服器發起 OData 服務後設資料請求時，該請求被 Mock 伺服器攔截，後者將 metadata.xml 的內容作為 OData 服務後設資料響應，返回給應用。

* Products.json: 測試資料 (Mock Data). 當 SAP UI5 應用準備渲染 Smart Table 待顯示的業務資料時，會向遠端伺服器發起 OData batch 請求。該請求同樣會被 Mock 伺服器攔截，並將該 Products.json 的內容返回給應用。

* server.js: Jerry 開發的 Mock 伺服器實現。

XML 檢視裡定義了一個 Smart Table 控制元件，第 10 行程式碼 entitySet="Products", 意思是讓該控制元件，在執行時"智慧地" 將名稱為 Products 的 OData 模型裡，所有符合某種條件的欄位，渲染成表格列專案。

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

這個包含了 Smart Table 控制元件的 SAP UI5 應用，最終渲染成包含如下三列的表格：產品 ID，價格 (含金額和貨幣單位) 以及產品名稱。

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

我們開啟 metadata.xml, 找到了 Product 模型包含的四個屬性欄位。這四個屬性欄位，都作為最後渲染出的列專案的**備選欄位**。其中 Price 欄位，透過屬性 **sap:unit**, 和 CurrencyCode 欄位關聯起來，作為**同一個**表格備選列專案，其工作原理在 Jerry 之前的文章 [**深入掌握 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) 裡介紹過。

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

儘管 Product 模型包含了 4 個欄位作為表格備選列專案，但為什麼最終渲染出的頁面裡，我們只看到了 3 個行專案？名為 Category 的欄位為什麼沒能渲染成行專案？

答案在 metadata.xml 的註解區域。
![](https://img-blog.csdnimg.cn/img_convert/d2c488fe3fee00b872ced0a3bcf2303f.png)

SAP 幫助文件提到，其所屬的 OData 模型被註解 com.sap.vocabiularies.UI.LineItem 修飾，且型別為 com.sap.vocabularies.UI.DataField 的欄位，在執行時會被 SAP UI5 框架繪製成表格列專案。

為了驗證這個結論，我們對 metadata.xml 裡的後設資料進行一些修改。比如現在只定義兩個表格列專案，分別為ProductId 和 Name. 同時，我用 sap:label, 給屬性 ProductId 分配標籤為 "Jerry產品ID"：

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

執行時的效果：Name 列表項出現在 ProductId 的左邊，因為其在後設資料裡的定義，位置在 ProductId 之前。

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

至此我們已經瞭解了 Smart Table 表格列專案渲染的邏輯，最後來看看原始碼實現。

1. 我的 UI5 應用裡，使用了 Smart Table 控制元件的 XML 檢視，執行時被載入後，會被 SAP UI5 的 XML 模板解析器， XMLTemplateProcessor 的方法 parseTemplate 所解析。XML 檢視包含的 XML 字串，會被反序列化成 DOM 並進行遍歷。當模板解析器遍歷 DOM 過程中，遇到 SmartTable 標籤時，呼叫 SmartTable.init 方法，進行初始化操作：

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

2. 根據本文前半部分的介紹，我們已經知道：如果缺乏 OData 後設資料提供的註解，Smart Table 控制元件無法知道該怎麼渲染表格的列專案。因此，SmartTable.js 也在 "OData 服務後設資料成功取回" 這個事件上，註冊了一個鉤子函式 _onMetadataInitialised. 當 OData 服務的後設資料取回之後，該回撥函式被呼叫：

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

在該回撥函式執行的上下文裡，因為 OData 服務後設資料已經處於可訪問狀態，所以 Smart Table 有足夠的資訊，能夠開始渲染邏輯的執行：

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

下圖第 97 行的高亮程式碼，getLineItemAnnotation, 即是 Smart Table 控制元件，準備從 Product 這個 EntityType 裡，解析出符合表格列專案渲染要求的欄位列表：

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

注意下圖第 1909 行硬編碼的字串 com.sap.vocabularies.UI.v1.LineItem, 這就是 UI5 框架程式碼裡查詢 Smart Table 待渲染列表項欄位的依據。最後解析出的兩個列表項欄位，Name 和 ProductId，就儲存在函式返回變數 oResolvedAnnotation.

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

有了這個資訊，Smart Table 就知道該渲染哪些欄位作為表格列專案了。

至此，本文已經完成了 Smart Table 控制元件渲染表格列專案的原理介紹，以及相應的 SAP UI5 框架是如何解析待渲染列專案的原始碼實現的介紹。

七年前，Jerry 剛剛從 ABAP 開發轉到 SAP UI5 開發時，對本文介紹的這些註解概念，理解得似是而非，因為之前用的 ABAP 這門程式語言，無法像 Java 和 TypeScript 那樣，能夠從語言層面提供對註解的原生支援。

後來接觸了 Java Spring 框架，再加上最近使用 Angular 做開發後，對註解的理解也比之前單純閱讀 SAP 文件要深入一些了。在 Java，Angular 和 SAP Fiori Elements 裡，雖然這些註解的語法有差異，但目的都一致，即提供一種對註解的目標物件，進行額外資料標註的功能。

比如 Component 是 Angular UI 最基本的組成單元，而 Component 的定義，無非就是普通的 TypeScript class，加上 @Component 註解的修飾而成。該註解能維護 Component 的後設資料，告訴 Angular 框架，該 Component 在執行時應該如何被例項化和使用。

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

希望本文能幫助大家更好地理解 SAP 幫助文件上對 SAP Fiori Elements 相關 OData 註解的介紹內容。感謝閱讀。

**更多閱讀**

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 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 工作原理系列之二：如何給 SAP Fiori Elements 應用新增自定義按鈕](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1a1d2efd00d075eee0&chksm=ead65077dda1d961f69684f665d4ad0be1b442a2e316b633a05834c75d50f3198e7a6efdb781&scene=21#wechat_redirect)

SAP Fiori Elements 框架裡 Smart Table 控制元件的工作原理介紹

相關文章