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

近日，一位 SAP 合作伙伴的開發人員，向我諮詢一個關於 SAP Fiori 應用裡圖示的使用問題。

這位開發人員在 SAP 某標準 Fiori 應用裡，發現了一個圖示(例如下圖紅色高亮區域所示的圖示), 希望在自己開發的 Fiori 應用裡也使用這個圖示，但是不知道其對應的 sap-icon:// 屬性值。

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

開發人員希望找到一種簡易的辦法，能夠根據  SAP Fiori 應用頁面上渲染出來的圖示，反查出其對應的 sap-icon:// 值。

在 SAP UI5 圖示控制元件 (Icon) 裡, 給其 src 屬性繫結上對應的 sap-icon:// 值，就能在渲染出的 SAP Fiori 頁面上，看到對應的圖案了。

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

比如 sap-icon://syringe 對應下圖這個注射器圖示。至於執行時，Icon 控制元件 src 屬性值對應的圖案是如何被渲染出來的，該技術細節由 SAP UI5 框架去實現，一般的 SAP UI5 應用開發人員無需瞭解。

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

本文介紹四種透過 SAP Fiori 頁面渲染出的圖示，反查出其 sap-icon:// 值的方法。

# 方法1：在 SAP Icon Explorer 中手動查詢

SAP 釋出了六百多種標準的圖示，能直接在 Fiori 應用中使用。這些圖示能夠在一個稱為 SAP Icon Explorer 的網頁中統一瀏覽。

https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#

假設我們在 SAP Icon Explorer 裡找到了和我們在某 SAP Fiori 應用裡看到的一模一樣的圖示，則單擊該圖示：

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

在右邊明細頁面，就能找到其 sap-icon:// 值：

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

顯然，這種方法效率較低，因為需要用肉眼，在 SAP Icon Explorer 中數以百計的圖示中去人工匹配。

# 方法2：在 SAP Fiori 源程式中進行搜尋

這種方式的前提是，我們能夠拿到待查詢 SAP Fiori 應用的原始碼。

使用 Visual Studio Code 等編輯器開啟 SAP Fiori 應用的原始碼，搜尋關鍵字 sap-icon://, 則編輯器會列出該 Fiori 應用使用到的所有圖示的 sap-icon:// 值。
![](https://img-blog.csdnimg.cn/img_convert/221a79d1c2a4d6a1aa0b638056893f27.png)

這種方法的侷限性在於：

(1) 如果一個 Fiori 應用使用了相當多圖示，那麼開發人員仍然需要在搜尋結果集裡逐一手動過濾，最終定位到自己真正想要查詢的那一個圖示；

(2) 該方法無法 100% 保證能夠找到自己需要的圖示。

以下圖為例，該應用透過 SAP Fiori Elements 開發而成，圖中高亮的幾個圖示，是 SAP Fiori Elements List Report 模板內定義的標準圖示，並沒有包含在應用開發人員透過 Application Generator 建立出來的本地工程檔案裡。因此這些圖示對應的 sap-icon:// , 根本無法透過本地工程原始碼搜尋的方式獲得。

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

# 方法3：透過執行時單步除錯 SAP UI5 渲染器的方式查詢

Jerry 之前的文章 [深入學習SAP UI5框架程式碼系列之二：UI5 控制元件的渲染器](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect) 曾經介紹過，每個 SAP UI5 控制元件都有專屬的渲染器，在執行時負責根據 SAP UI5 控制元件的例項資料，生成對應的 HTML 原始碼。

在 Icon 控制元件的渲染器實現，IconRenderer.js 的 render 方法裡設定斷點。

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

執行時斷點觸發，第61行變數 vIconInfo裡包含的 uri 欄位的值，即是我們要找的 sap-icon://product.

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

這種方法仍然有一定的侷限性：一個 SAP Fiori 應用，幾乎不大可能只使用單一圖示。換言之，每個圖示的渲染，都會觸發 IconRenderer.js 的 render 方法。

比如下面這個斷點的觸發，是為了渲染 action-settings 這個圖示：

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

即 SAP Fiori Elements 應用裡，點選之後能進行使用者個性化設定的齒輪圖示。

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

當待查詢 SAP Fiori 應用裡包含的圖示個數較多時，我們通常需要進行一段時間的除錯，才能最終找到期望的圖示值。

# 方法4：透過 SAP Fiori 應用介面圖示的 Unicode 值反向查詢

這是 Jerry 最喜歡的一個辦法，能 100% 準確而快速地定位到待查詢的圖示，而且無需除錯。缺點在於步驟稍嫌繁瑣。

在 Chrome 開發者工具的 Elements 標籤頁裡，找到 Icon 控制元件最終渲染出來的 span 元素，發現其 data-sap-ui-icon-content 的值，顯示為一個普通使用者不可讀的小方框。

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

把整個 span 元素的 HTML 程式碼複製到記事本里：

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

以 UTF-16 LE 的 Encoding 格式儲存。

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

我選取 UTF-16 的編碼模式，是因為其較 UTF-8 相比，大部分字元都以固定長度即 2 位元組的方式儲存，這樣我檢索起來比較方便。

UTF-16 LE，即 Little Endian，小端儲存，高位位元組放在高地址表示。

用 UltraEdit 或者 WinHex 之類的工具軟體，開啟以 UTF-16 另存的記事本檔案。找到之前在瀏覽器和記事本里，均無法正常顯示的 data-sap-ui-icon-content 屬性值，其 Unicode 為 E011.

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

還記得方法 3 裡提到的 Icon 控制元件的渲染器  IconRenderer.js 麼？在它的旁邊就是IconPool.js，該檔案裡硬編碼了 SAP Fiori 支援的所有標準圖示的名稱，及其對應的 Unicode 值。

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

Chrome 開發者工具裡開啟該檔案，根據剛才找到的 Unicode 值 e011 進行搜尋，立即得出 該 Unicode 值對應的圖示名稱為 product： 
![](https://img-blog.csdnimg.cn/img_convert/dbf30736431365516a40bea605b421db.png)

再返回 SAP Icon Explorer 進行核對，至此能確認我們要查詢的圖示，其 sap-icon:// 值為 product，Unicode 值為 0xe011，和我們在 IconPool.js 裡找到的值完全一致。

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

希望本文能幫助大家對 SAP Fiori Icon 的渲染原理和使用方法有一些基礎的瞭解，感謝閱讀。

# 更多閱讀

*   [SAP Fiori應用索引大全](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247488734&idx=1&sn=7183bce297fd918de90215e40db8ea34&chksm=ead5a649dda22f5f875cdd56be5d94634240a2afd89abc318d73201b90d4e6f69f2c34c267ac&scene=21#wechat_redirect)

*   [Fiori Fundamentals和SAP UI5 Web Components](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486061&idx=1&sn=93024837a72cbb445b219655f75b1b75&chksm=ead5b8fadda231ec0b6b4dd35a0281cb92bddb0a2863335c5823950881314259f8835b32592e&scene=21#wechat_redirect)

*   [為什麼SAP GUI裡的傳統事務碼能透過Fiori Launchpad啟動並執行在瀏覽器裡](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489169&idx=1&sn=be9cfe4b23c667b2a367886107eaa652&chksm=ead5a406dda22d10854945679875b27af092bdad035b417b035a4122e60a568b61a8b9d8f176&scene=21#wechat_redirect)

*   [一步步把SAP GUI的事務碼配置到SAP Fiori Launchpad裡](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489214&idx=1&sn=d47192162ff1b098f7918cda3b6131f8&chksm=ead5a429dda22d3faf569ced7174f5915d61f33108e4b1dbc13e0270fee3930d978a9ed9865c&scene=21#wechat_redirect)

*   [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490624&idx=1&sn=355253156bec497d2d51925010feb8c1&chksm=ead5aed7dda227c1dd97a0ba5d24eb1d91415eadca97ec0f540cf49beaa6a699d734d5ce4f2c&scene=21#wechat_redirect)

*   [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

*   [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

*   [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

*   [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

*   [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

*   [SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect)

*   [SAP UI5和Angular的函式防抖(Debounce)和函式節流(Throttle)實現原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491343&idx=1&sn=0e7aa53525157d8ef8af8681d79d7b64&chksm=ead5ad98dda2248e44955e59e89c95d81d5a4ae4fa3380486c74252e67515bc2c0883bd49967&scene=21#wechat_redirect)

*   [SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)

*   [SAP UI的載入動畫效果和幽靈設計(Ghost Design)](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491512&idx=1&sn=a44d166f7685b7a23aabaa22bc46c3a7&chksm=ead5ad2fdda22439755b9434a7364afd97356e1a7a623beb94f5375dc2ec47559d9efa60985f&scene=21#wechat_redirect)

*   [介紹一個能開發簡單SAP UI5應用的線上IDE：StackBlitz](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491526&idx=1&sn=027753170e69179735a95297d8534ee9&chksm=ead5ad51dda22447efc4061ecb5cff5920863d617a114a124079e9ec8713c1607816ff2baff5&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [如何分辨 SAP Fiori Launchpad 裡的真假 Fiori 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491884&idx=1&sn=4b3dc9a96dc3c4c162ea0caadace52a2&chksm=ead653bbdda1daad81ec5bd73ce4ecc418f5d0090e5bfb3074a439687d2c8bb9dffb25fcb7a8&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 應用裡圖示(Icon)的渲染原理和使用技巧

相關文章