工作中筆者的同事曾經問過我一個問題，SAP Fiori 介面上這個 Adapt UI 的按鈕，為什麼有的系統上有，有的系統上沒有？Fiori Key User正是透過點選該按鈕，進入Fiori UI的Adaptation模式，從而實現在螢幕上新增擴充套件欄位的目的。

比較下面兩個不同系統的截圖：

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

為什麼這個Adapt UI按鈕，如此神出鬼沒，有的系統上有顯示，有的沒有？

自己動手，豐衣足食。假設你的身邊找不到 SAP Fiori 專家，如何透過自己在系統裡除錯的方法找到問題的答案呢？

本文我們透過單步除錯的方式，來分析這個Adapt UI按鈕動態顯示與否的邏輯。
首先我們根據筆者之前介紹過的 SAP UI5 控制元件在瀏覽器端的渲染邏輯的知識，找出一個ID為 `sap.ushell.plugins.rta` 的外掛，負責管理該 Adapt UI 按鈕。我個人把 rta 理解成Run Time Adaptation 的縮寫。

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

這個外掛從哪裡來呢？在 Chrome 開發者工具裡對 `sap.ushell.config` 和 `sap-ushell-config` 這組關鍵字進行全文搜尋，找到了下面的程式碼片段：

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

由此可見，rta 這個外掛例項，儲存在 `sap-ushell-config` 這個全域性物件的bootstrapPlugins屬性裡。

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

在Adapt UI按鈕能夠顯示的系統上除錯，發現全域性物件sap-ushell-config的值，來自oServerSideConfig這個JSON物件，而後者的值，是從SAP Fiori Launchpad的html頁面裡一個硬編碼的字串反序列化而成：

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

把FioriLaunchpad.html裡這個硬編碼的字串複製下來：

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

decode之後，發現其層級結構同我們之前在Chrome開發者工具裡觀察到的 `sap-ushell-config` 全域性物件完全一致，說明我們找對地方了。

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

下一步就是要弄清楚 `FioriLaunchpad.html` 裡這個硬編碼的字串到底來自何方。標準開發人員一個字元一個字元敲進去的？SAP 軟體沒有這麼傻。

SE80 開啟 `Fiori Launchpad Shell` 對應的BSP應用:

/ui2/ushell, 發現字串的值來自變數：

`${SERVER-SIDE-CONFIG}`

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

因此 SE80 裡我們找到的這個FioriLaunchpad.html只是起到一個模板檔案的作用，裡面第76行出現的 `${SERVER-SIDE-CONFIG}`, 也只是一個佔位符，會被執行時該變數的實際值替換，最後就成了我們在Chrome開發者工具裡觀察到的那個長長的字串。

那麼變數 `${SERVER-SIDE-CONFIG}` 的值從哪裡來？在BSP應用裡查詢，發現get_server_side_config_json方法返回的值，注入到該變數裡。

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

所以現在的問題轉化為，透過單步除錯get_server_side_config_json方法，弄清楚裡面的邏輯：

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

當我單步除錯進入該方法時，發現上圖第18行lr_data->mt_plugin這個內表裡，已經包含了需要返回並注入到變數 `${SERVER-SIDE-CONFIG}` 裡的當前系統上所有可用的Fiori Launchpad外掛例項了，本文關注的sap.rta.plugin也赫然在列。

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

那麼為什麼本文開頭提到的另一個系統裡，沒有顯示Adapt UI按鈕呢？

問題就出在下圖第22行的CHECK語句。第18行的mt_plugin內表，儲存了當前系統所有可用的Fiori Launchpad外掛，每個外掛都對應一個catalog ID.

第21行的內表it_catalogs, 存放的是當前登入使用者透過分配的PFCG角色所擁有的catalog ID集合。

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

上圖這段程式碼的語義是，遍歷當前系統所有可用的Fiori Launchpad外掛，如果其對應的catalog ID，沒有出現在登入使用者所擁有的catalog ID集合裡，那麼該外掛對於該登入使用者來說就是無效的(invalid), 應該將其從Fiori Launchpad上隱藏。

從上圖的除錯視窗，我得知Run Time Adaptation這個外掛對應的catalog ID為/UIF/SAP_RTA_PLUGIN, 然後我到ABAP後臺SU01去檢查，發現在看不到Adapt UI按鈕的那個系統裡，我的使用者果然沒有分配這個catalog. 於是將其分配上去：

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

問題得以解決，現在 Fiori UI 裡，這個久違的 Adapt UI 又回來了。

這就是一個實際的“自己動手，豐衣足食”的例子——透過單步除錯，沒有求助Fiori專家，也解決了工作中遇到的實際問題。

對 Fiori Adapt UI 更多技術細節感興趣的朋友，不妨繼續閱讀下去。

為了讓 Key User 在執行時能夠使用 Adapt UI 按鈕對 SAP Fiori 應用進行適配，這個 Fiori 應用中的所有控制元件都需要具有 `Stable id`.

只有 Adapt UI 的邏輯在執行時使用 `Stable id`，才能確保 Key User 所做的適配，可以再次被重複施加，例如在 Fiori 應用升級後。

Stable id 用於在執行時識別和修改控制器內的控制元件。但是，如果重用或巢狀這些檢視，這些id 就不再是惟一的了。為了避免歧義，每個檢視都將自己的 ID 作為`字首`, 新增到所有子控制元件中。

如果 ID 是在控制元件例項化期間建立的，則預設情況下它是唯一的。如果在執行時建立新的控制元件，控制器將透過呼叫 oController.createId("ID") 方法建立一個惟一的 ID. 這些方法可以為 ID 新增必要的字首。另一方面，由於在生產系統中直接進行的 UI 調整，可能會干擾傳輸的更改，因此不建議 Key User 在生產系統中直接調整 UI。

# 總結

本文首先透過一個筆者工作過程中，經常被同事問起的一個問題出發，接著詳細介紹了筆者如何透過單步除錯的方式，自行分析 SAP Fiori Adapt UI 按鈕顯示與否的設計邏輯，透過這個例子再次闡述了 SAP 系統的許可權管控設計思路。

SAP Fiori 應用 Adapt UI 動態顯示或者隱藏的技術設計細節解析

相關文章