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

SAP 前端開發者如今使用的 SAP Fiori Elements，在 2016 年時被稱為 Smart Template，其在 SAP 官網的定義是：

Smart Template 是一套框架，針對最常用的應用模式，根據後設資料註解，加上預定義的模板，在執行時能夠動態生成 SAP UI 頁面。

原文：Smart templates provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns.

SAP 官網連結如下：

https://experience.sap.com/fiori-design-web/v1-36/smart-templates/

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

SAP Fiori Elements 的核心就是其基於的後設資料註解，以及根據這些後設資料，在執行時 "智慧地" 生成 UI 的能力。由於這種執行時動態生成 UI 的行為發生在幕後，對應用開發人員來說完全是一個黑盒子。不少開發人員覺得 SAP Fiori Elements 的工作原理很神秘，即使想研究其原始碼，也不知道該如何入手。

到 2021 年 5 月為止，SAP Fiori Elements 支援 5 種型別的預定義模板：

* List report
* Worklist
* Object page
* Overview page
* Analytical list page

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

開啟 List report 模板的 XML 檢視實現原始碼，能發現 smartfield 和 smarttable 的使用：

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

二者都屬於 SAP Smart Controls，是構成 SAP Fiori Elements 預定義模板的基石。

SAP 官網對 Smart Controls 的定義：一種特殊的 SAP UI5 控制元件集合，能夠透過解析 OData 後設資料，給普通的 SAP UI5 控制元件增添一些額外的功能。

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

要想搞清楚 SAP Fiori Elements 的工作原理，理解 Smart Controls 是前置條件之一。而 Smart Field 是 Smart Controls 大家庭中最簡單的型別，因此如果想研究 Smart Controls 的工作原理，Smart Field 是最佳的學習目標。

Jerry 開發了一個 Hello World 級別的 SAP UI5 應用，XML 檢視裡僅僅包含一個 Smart Field.

應用的原始碼地址[如下](https://github.com/wangzixi-diablo/ui5-toolset/tree/main/smartfield/webapp)。

定義了 Smart Field 的 XML 檢視原始碼如下：

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

將該應用從 Github 程式碼倉庫下載到本地，node loca.js 執行後，訪問如下 url，即可開啟渲染後的頁面。

該應用渲染出來的頁面如下：

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

雖然我們在 XML 檢視裡只定義了一個 Smart Field 控制元件，但最後渲染出的頁面裡，居然包含了兩個輸入欄位：

* 價格金額 (Amount)
* 價格的貨幣單位 (UnitCode)

另外，在 XML 檢視裡我並未指定 Price 欄位的標籤，那麼最後介面裡"Jerry的價格"，到底是在哪裡維護的呢？

這就是 Smart Controls 的神奇之處。

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

第 17 行 XML 檢視裡的 smartField 標籤, id 屬性我硬編碼成 idPrice:

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

執行時，被 Smart Field 對應的 renderer，渲染成 div 標籤，id 為 __xmlview0--idPrice，這是我們在之前的兩篇文章裡已經瞭解過的內容：

*   [深入學習SAP UI5框架程式碼系列之二：UI5 控制元件的渲染器](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

*   [深入學習SAP UI5框架程式碼系列之八：談談 SAP UI5 的檢視控制元件 ID，以及其和 Angular 檢視的異同](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492187&idx=1&sn=a8dbaa645c472b5c22771e512ed1b971&chksm=ead650ccdda1d9dab86ba16fb71ea5e90aa15918f3e3ac2c4237c9f5f03d51a12dac40280e70&scene=21#wechat_redirect)

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

那麼渲染出來的頁面裡，另一個貨幣單位，即顯示 EUR 的欄位，在 XML 檢視裡根本沒有定義，它到底是根據什麼樣的邏輯動態生成出來的？

既然前文已經提到，Smart Field 的一大特徵就是能夠解析 OData 後設資料，併為自身增添新的功能，所以我們回過頭仔細檢視 XML 檢視裡 smartField 繫結的屬性，其名稱為 Price.

在該專案的後設資料定義檔案，metadata.xml 裡，我們找到了一些端倪：

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

第 10 行即是 XML 檢視裡 smartField 繫結的 Price 屬性，如上圖紅色下劃線所示。該屬性具有一個名稱空間為 sap 的註解，註解名稱為 unit，值為 CurrencyCode，意思是，該欄位的單位，繫結到 OData 模型另一個名為 CurrencyCode 的欄位，即上圖紅色箭頭指向的第 17 行的屬性。而我們在最終渲染頁面裡看到的標籤"Jerry的價格"，則透過另一個註解 sap:label 的值維護。

CurrencyCode 這個屬性本身，用註解 sap:semantics 宣告其語義為 currency-code.

如果把這個值修改一下，比如去掉中間的連線線，改成currencycode，則最後渲染出的頁面如下圖所示，貨幣單位欄位將消失，說明 Smart Field 工作出了問題。

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

下面我們透過單步除錯來搞清楚幕後到底發生了什麼。

這是我使用的本地測試資料：

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

在執行時，該資料成功載入後，在資料載入成功的 SAP UI5 框架回撥函式里，呼叫 setElementBindingContext 函式, 進而呼叫 propagateProperties 函式，觸發 Smart Field 的初始化處理邏輯。

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

注意觀察下圖右邊的呼叫棧，propagateProperties 會把控制權交給 SmartField.js, 後者呼叫工廠方法 _createFactory, 根據解析出的 OData 註解，即 sap: 開頭的註解，建立對應的普通 SAP UI5 控制元件例項。所謂普通的 SAP UI5 控制元件，即 sap.m 命名控制元件下的 UI5 控制元件。

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

XML 檢視裡定義的後設資料註解，透過工具 AnnotationHelper.getXXX 實現。
比如:

* getUnit, 查詢屬性上的 sap:unit 註解
* getLabel, 查詢屬性上的 sap:label 註解
* 以此類推

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

看到下圖 AnnotationHelper.js 裡 isCurrency 方法裡第 136 行硬編碼的 currency-code, 我們就能恍然大悟，明白為什麼 XML 檢視裡把 sap:semantics 的註解值從 currency-code 改成其他值之後，Smart Field 就無法正常工作的原因了。

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

AnnotationHelper.js 把一個 OData 屬性所有的註解解析完畢之後，交給ODataHelper，後者進行彙總，進行下一步處理。

下圖展示了 XML 檢視裡關於 Price 和 CurrencyCode 兩個 OData 屬性，其後設資料註解均已解析完畢。

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

最後，在 ODataControlFactory 這個工廠實現裡，直接使用 JavaScript 關鍵字 new，新建一個普通的 sap.m.Input 控制元件例項，然後再由其渲染器生成原生的 HTML input 標籤。該標籤的 id 為 其父節點的 id 加上 -input 字尾。

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

下圖就是最後渲染而成的 input 標籤。

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

透過本文介紹的具體例子，我們能夠直觀地感受到，較之其在 XML 檢視裡的定義相比，Smart Field 執行時能夠渲染出內容豐富得多的頁面，而這些頁面，極度依賴於 Smart Field 繫結到的 OData 屬性上定義的以 sap: 作為字首的後設資料註解。

希望透過本文的介紹，大家對於 Smart Field 的工作原理和作用，能相比純粹閱讀 SAP 官網上的幫助文件，有一個更深入的理解。後續 Jerry 會繼續把 SAP Fiori Elements 涉及到的知識點，逐個剝離出來並分別用文章進行闡述，敬請期待。

**更多閱讀**

*   [30分鐘用Restful ABAP Programming模型開發一個支援增刪改查的Fiori應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486989&idx=1&sn=75fef3a06bedb96e58af8d82d567fbb2&chksm=ead5bc9adda2358c5120d84eec1677dd02ecbf6ffd4d39474690995eb98411e63c0384a021e1&scene=21#wechat_redirect)

*   [Jerry帶您瞭解Restful ABAP Programming模型系列之二：Action和Validation的實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247487059&idx=1&sn=33887752e28aea429c855217a485cabf&chksm=ead5bcc4dda235d2a4a87ce7f0ca47b6689267defbd6c0e8f632f88f4623954cc0fd13a26be3&scene=21#wechat_redirect)

*   [Jerry帶您瞭解Restful ABAP Programming模型系列之三：雲端ABAP應用除錯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247487086&idx=1&sn=d0a9023544411953df2e79562111748d&chksm=ead5bcf9dda235ef348a77afa9647b2bd465add9c3642fbd555f2528a37c8425aaa896c03e67&scene=21#wechat_redirect)

*   [如何基於Restful ABAP模型開發並部署一個支援增刪改查的Fiori應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247487570&idx=1&sn=35ba8bff595f727f139da7d8a1a0e45a&chksm=ead5a2c5dda22bd34d9c8e2589a0f16fbd176ce49327e0d1b1addfd9b8d852e4c3f084e60289&scene=21#wechat_redirect)

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 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

相關文章