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

Jerry 之前通過下列兩篇文章，介紹了構成 SAP 產品 UI 的邏輯單元：UI 組件和 UI 容器組件。

• 談談 SAP 產品 UI 開發中的組件概念

• SAP 產品 UI 里的容器組件的概念和開發概述

對于合作伙伴來說，當 SAP 產品標準 UI 即使通過下面兩篇文章介紹的增強技術，也無法滿足客戶特殊的業務需要時，就可以考慮創建自定義的 SAP UI 了。

• SAP 產品的 Field Extensibility

• SAP Cloud for Customer Extensibility 的設計與實現

創建 SAP 自定義 UI，當然需要開發前文描述的 UI 組件，通過這些組件呈現視覺效果給最終用戶，并響應用戶操作，實現業務邏輯。然而很多 SAP 產品，除了 UI 組件和 UI 容器組件之外，還存在一個額外的 Frame 層，用來統一管理配置于其中的 UI 組件和 UI 容器組件，完成會話管理，UI 組件初始化以及應用生命周期管理等基礎設施層面的工作。UI Frame 最為人所知的典型代表，當然就是 SAP Fiori Launchpad.

本文以 SAP CRM，SAP Cloud for Customer，SAP Fiori 和 SAP 電商云 Spartacus UI 這四種 SAP 產品里用到的 UI 開發技術來舉例說明，在這些 SAP 產品里，當合作伙伴完成自定義 UI 組件開發之后，如何將其配置到對應的 UI Frame 中去。

SAP CRM

當我們使用 WebClient UI 完成一個 SAP CRM UI Component 開發后，可以在開發工具里點擊 Test 按鈕預覽其外觀：

預覽結果如下：

大家把上圖和下圖通過 SAP CRM 登錄頁面訪問的產品明細頁面進行比較，不難發現 SAP CRM UI Frame 的身影，即下圖紅色高亮區域，形如一個顛倒的大寫字母 L.

SAP CRM UI Frame 里，按照實現功能的不同，又分為不同的子區域，其中業務用戶幾乎每天都會訪問到的是工作中心(Work Centers) 和工作中心視圖(Work Center Views)，二者是業務用戶使用 SAP 系統的入口所在。

關于將 UI 組件配置到 SAP CRM UI Frame 的 Work Center 中去的詳細步驟，請參考我在 SAP 社區上發布的 wiki 頁面。

下面是一些自開發的 UI Component 配置到 SAP CRM UI Frame 之后的效果圖：

SAP Cloud for Customer

在 SAP C4C 里使用 Cloud Application Studio 和 UI Designer 以所見即所得的方式完成新的 UI 組件開發。下圖是 SAP C4C Sales Order 搜索頁面的實現組件，Sales Order OWL(Object Work List)的開發界面，其 ID 為 COD_SAKESORDER_OWL:

該 UI 組件運行時同樣被嵌入到 SAP C4C UI Frame 之中，下圖左邊綠色區域為 SAP C4C UI Frame 的一部分，包含了工作中心和工作中心視圖的入口。

運行時我們瀏覽器里打開上圖 Sales 工作中心，訪問 Sales Order 工作中心視圖，在 Chrome 開發者工具里能夠觀察到該容器組件的路徑：

/BYD_COD/SalesOnDemand/SalesOrder/UI/COD_SALESORDER_WCVIEW.WCVIEW.uiwocview

按照該路徑到 UI Designer 里查看，果然發現該工作中心視圖里包含了 COD_SAKESORDER_OWL 這個 UI 組件。

因此，在 SAP C4C 里，要將一個組件納入 UI Frame 的最直接辦法，就是將其分配給一個工作中心視圖。

除此之外，將自定義 UI 組件添加到 Embedded Component，再使用 UI 增強方式，將后者嵌入到 SAP C4C 其他標準 UI 組件里，也能達到同樣的目的。

關于更多將自定義 UI 納入 SAP C4C UI 運行體系的具體操作步驟，請參考我這篇文章：如何在SAP Cloud for Customer頁面嵌入自定義UI

SAP Fiori

SAP Fiori UI 并沒有采用工作中心和工作中心視圖的概念，來作為用戶訪問 SAP UI5 應用的入口。

開發人員使用 Business Application Studio 或者 Visual Studio Code 等開發工具完成 SAP UI5 應用開發之后，需要將其配置到 Fiori Launchpad 上，最終用戶才能通過點擊 Tile 的方式訪問到這些組件。Tile 和 SAP UI5 應用具有一一對應的關系。

以 SAP CRM Fiori 為例，點擊 Launchpad 某個 Tile 比如 My Opportunities 時，SAP UI5 框架向后臺 Gateway 系統發起的第一個 INTEROP 請求，就是詢問該 Tile 對應的 SAP UI5 應用信息：

該請求的響應數據里，包含了此 SAP UI5 應用在 Gateway 系統中的存儲路徑，如下圖所示：

在 SAP S/4HANA Fiori Launchpad 里，這個請求返回的響應，包含了被點擊的 Tile 對應的 SAP UI5 應用更多的明細。

比如我們點擊 Service Contract Issues 這個 Tile：

在響應數據里，能查看該 SAP UI5 應用基于的 OData 服務名稱，以及 SAP UI5 應用的 ID：F4032

根據此 ID 到 Jerry 這篇文章?SAP Fiori應用索引大全?提到的網站上進行查詢，能得到該 SAP UI5 應用的更多技術和配置細節：

關于如何將 SAP UI5 應用配置到 Fiori Launchpad，請參考我這篇文章：SAP Fiori Launchpad Tile，UI5 應用，和 PFCG Role 的對應關系。

SAP 電商云 Spartacus UI

SAP 電商云 Spartacus UI 基于 Angular 開發，在 Angular Route 框架的基礎上做了一層路由封裝，該封裝層即本文一直討論的 UI Frame.

如果我們繞過該 UI Frame，直接將一個自定義的 Angular Component，通過 Angular RouterModule 將該組件納入到 Spartacus 路由體系中去，然后通過配置好的路由路徑訪問該組件，結果會如何呢？

我們在 Spartacus 應用里配置一條新的路由路徑：當路由路徑更改為 jerry 時，會觸發到 JerryComponent 的路由。

下圖是 SAP 電商云 Spartacus UI 默認的 homepage：

在地址欄 URL 尾部輸入 jerry，回車，會看到一個很丑陋的頁面。上圖 homepage 里包含的語言和國家下拉列表，購物車圖標，登錄用戶名，SAP Logo 等元素統統消失了。

究其原因，是因為該 Angular 組件 JerryComponent 并沒有被納入到 SAP 電商云的 Spartacus UI Frame 中去。

Jerry 之前已經介紹過，SAP 電商云 UI 采取 CMS 驅動的方式設計，因此我們要想新建一個自定義頁面，需要先在 Commerce Cloud 后臺系統里創建一個 CMS Content Page，然后為該 CMS 頁面創建一個對應的 Angular 組件。

我們可以在 SAP Commerce Cloud Backoffice 里，或者在 SmartEdit 里，或者通過在 HAC 里導入 Impex 的方式，創建新的 Content Page：

上圖的 Impex 內容為，創建一個 Content Page，id 為 jerryOrderPage, 分配給頁面模板 AccountPageTemplate,頁面 label 為 /my-account/jerry-order. 后者會作為 Spartacus UI 路由路徑使用。

繼續為該頁面創建 ContentSlot 和 JerryOrderComponent，并將后者分配給新建的 ContentSlot 去。二者都是 SAP Commerce Cloud CMS 特有的概念，細節請參考 Jerry 之前的文章：SAP 產品 UI 里的容器組件的概念和開發概述。

最后，在 Spartacus 中新建 Angular Component，并映射到上述剛剛在 SAP Commerce Cloud 后臺創建的 CMS Component，即完成了自定義 UI 創建的完整步驟。

這個自定義 UI 在 SAP 電商云 Spartacus UI 中顯示效果如下，可以觀察到期望的 UI Frame 又回來了。

至此 SAP UI 開發中的 UI 組件，UI 容器組件和 UI Frame 三大要素全部介紹完畢，感謝閱讀。

• SAP UI和Salesforce UI開發漫談

• SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商云) UI 增強實現中的體現

• 響應式編程在 SAP 標準產品 UI 開發中的一個實踐

• 談談 SAP 產品 UI 開發中的組件概念

• 關于 SAP 產品 UI 的搜索引擎優化 SEO - Search Engine Optimization

• 聊聊 SAP 產品 UI 上的消息顯示機制

• SAP 產品 UI 里的容器組件的概念和開發概述

• SAP產品的Field Extensibility

• SAP Cloud for Customer Extensibility的設計與實現

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的各种 SAP 产品的自定义 UI 创建和集成方法一览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。