這是 Jerry 2021 年的第 27 篇文章，也是汪子熙公衆号總共第 298 篇原創文章。
近日，一位 SAP 合作夥伴的開發人員，向我咨詢一個關于 SAP Fiori 應用裡圖示的使用問題。
這位開發人員在 SAP 某标準 Fiori 應用裡，發現了一個圖示(例如下圖紅色高亮區域所示的圖示), 希望在自己開發的 Fiori 應用裡也使用這個圖示，但是不知道其對應的 sap-icon:// 屬性值。
開發人員希望找到一種簡易的辦法，能夠根據 SAP Fiori 應用頁面上渲染出來的圖示，反查出其對應的 sap-icon:// 值。
在 SAP UI5 圖示控件 (Icon) 裡, 給其 src 屬性綁定上對應的 sap-icon:// 值，就能在渲染出的 SAP Fiori 頁面上，看到對應的圖案了。
比如 sap-icon://syringe 對應下圖這個注射器圖示。至于運作時，Icon 控件 src 屬性值對應的圖案是如何被渲染出來的，該技術細節由 SAP UI5 架構去實作，一般的 SAP UI5 應用開發人員無需了解。
本文介紹四種通過 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 應用裡看到的一模一樣的圖示，則單擊該圖示：
在右邊明細頁面，就能找到其 sap-icon:// 值：
顯然，這種方法效率較低，因為需要用肉眼，在 SAP Icon Explorer 中數以百計的圖示中去人工比對。
方法2：在 SAP Fiori 源程式中進行搜尋
這種方式的前提是，我們能夠拿到待查找 SAP Fiori 應用的源代碼。
使用 Visual Studio Code 等編輯器打開 SAP Fiori 應用的源代碼，搜尋關鍵字 sap-icon://, 則編輯器會列出該 Fiori 應用使用到的所有圖示的 sap-icon:// 值。
這種方法的局限性在于：
(1) 如果一個 Fiori 應用使用了相當多圖示，那麼開發人員仍然需要在搜尋結果集裡逐一手動過濾，最終定位到自己真正想要查找的那一個圖示；
(2) 該方法無法 100% 保證能夠找到自己需要的圖示。
以下圖為例，該應用通過 SAP Fiori Elements 開發而成，圖中高亮的幾個圖示，是 SAP Fiori Elements List Report 模闆内定義的标準圖示，并沒有包含在應用開發人員通過 Application Generator 建立出來的本地工程檔案裡。是以這些圖示對應的 sap-icon:// , 根本無法通過本地工程源代碼搜尋的方式獲得。
方法3：通過運作時單步調試 SAP UI5 渲染器的方式查找
Jerry 之前的文章 深入學習SAP UI5架構代碼系列之二：UI5 控件的渲染器 曾經介紹過，每個 SAP UI5 控件都有專屬的渲染器，在運作時負責根據 SAP UI5 控件的執行個體資料，生成對應的 HTML 源代碼。
在 Icon 控件的渲染器實作，IconRenderer.js 的 render 方法裡設定斷點。
運作時斷點觸發，第61行變量 vIconInfo裡包含的 uri 字段的值，即是我們要找的 sap-icon://product.
這種方法仍然有一定的局限性：一個 SAP Fiori 應用，幾乎不大可能隻使用單一圖示。換言之，每個圖示的渲染，都會觸發 IconRenderer.js 的 render 方法。
比如下面這個斷點的觸發，是為了渲染 action-settings 這個圖示：
即 SAP Fiori Elements 應用裡，點選之後能進行使用者個性化設定的齒輪圖示。
當待查找 SAP Fiori 應用裡包含的圖示個數較多時，我們通常需要進行一段時間的調試，才能最終找到期望的圖示值。
方法4：通過 SAP Fiori 應用界面圖示的 Unicode 值反向查找
這是 Jerry 最喜歡的一個辦法，能 100% 準确而快速地定位到待查找的圖示，而且無需調試。缺點在于步驟稍嫌繁瑣。
在 Chrome 開發者工具的 Elements 标簽頁裡，找到 Icon 控件最終渲染出來的 span 元素，發現其 data-sap-ui-icon-content 的值，顯示為一個普通使用者不可讀的小方框。
把整個 span 元素的 HTML 代碼拷貝到記事本裡：
以 UTF-16 LE 的 Encoding 格式儲存。
我選取 UTF-16 的編碼模式，是因為其較 UTF-8 相比，大部分字元都以固定長度即 2 位元組的方式存儲，這樣我檢索起來比較友善。
UTF-16 LE，即 Little Endian，小端存儲，高位位元組放在高位址表示。
用 UltraEdit 或者 WinHex 之類的工具軟體，打開以 UTF-16 另存的記事本檔案。找到之前在浏覽器和記事本裡，均無法正常顯示的 data-sap-ui-icon-content 屬性值，其 Unicode 為 E011.
還記得方法 3 裡提到的 Icon 控件的渲染器 IconRenderer.js 麼？在它的旁邊就是IconPool.js，該檔案裡寫死了 SAP Fiori 支援的所有标準圖示的名稱，及其對應的 Unicode 值。
Chrome 開發者工具裡打開該檔案，根據剛才找到的 Unicode 值 e011 進行搜尋，立即得出 該 Unicode 值對應的圖示名稱為 product：
再傳回 SAP Icon Explorer 進行核對，至此能确認我們要查找的圖示，其 sap-icon:// 值為 product，Unicode 值為 0xe011，和我們在 IconPool.js 裡找到的值完全一緻。
希望本文能幫助大家對 SAP Fiori Icon 的渲染原理和使用方法有一些基礎的了解，感謝閱讀。
更多閱讀
SAP Fiori應用索引大全
Fiori Fundamentals和SAP UI5 Web Components
為什麼SAP GUI裡的傳統事務碼能通過Fiori Launchpad啟動并運作在浏覽器裡
一步步把SAP GUI的事務碼配置到SAP Fiori Launchpad裡
SAP UI5應用開發人員了解UI5架構代碼的意義
SAP UI5 module懶加載機制
SAP UI5 控件渲染機制
HTML原生事件 VS SAP UI5 Semantic事件
SAP UI5控件中繼資料的中繼資料實作
SAP UI5控件的執行個體資料修改和讀取邏輯
SAP UI5控件資料綁定的實作原理
SAP UI5控件資料綁定的三種模式：One Way, Two Way和OneTime實作原理比較
SAP UI5 OData謠言粉碎機：極短時間内發送兩個Odata request,前一個會自動被cancel掉嗎
SAP UI5和Angular的函數防抖(Debounce)和函數節流(Throttle)實作原理介紹
SAP UI渲染模式：用戶端渲染 VS 伺服器端渲染
SAP UI的加載動畫效果和幽靈設計(Ghost Design)
介紹一個能開發簡單SAP UI5應用的線上IDE：StackBlitz
SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何通過調整CSS來改變UI顯示風格
SAP 産品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商雲) UI 增強實作中的展現
如何分辨 SAP Fiori Launchpad 裡的真假 Fiori 應用
在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用