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

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

*   [談談 SAP 產品 UI 開發中的元件概念](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493152&idx=1&sn=8b4ff586e8ae6820af1cafeae31f98c6&chksm=ead654b7dda1dda104cd79d6281a7943399cc46a3416127f41c6c0876ba83004014fa46dad1a&scene=21#wechat_redirect)

*   [SAP 產品 UI 裡的容器元件的概念和開發概述](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493883&idx=1&sn=1dbc49885ea55826dddc7dd52eb90d2d&chksm=ead65a6cdda1d37ad6f7a2d0d343695853c98e55b5bf19f0465233e2973efe7bdf2af9adc0e2&scene=21#wechat_redirect)

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

*   [SAP 產品的 Field Extensibility](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485012&idx=1&sn=08c9d139d7c127e815a8846cb2473336&chksm=ead5b4c3dda23dd5b4c694cb568e9cc765632ea36d4f5901da4eccd076e3d49075bb0a2a088a&scene=21#wechat_redirect)

*   [SAP Cloud for Customer Extensibility 的設計與實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485041&idx=1&sn=01241745ef4f6636ec146611a5c28083&chksm=ead5b4e6dda23df0a167b58283f50b76aca502cdc832d407623a0c17987e0b0e28a352e9b429&scene=21#wechat_redirect)

建立 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 按鈕預覽其外觀：

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

預覽結果如下：

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

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

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

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

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

關於將 UI 元件配置到 SAP CRM UI Frame 的 Work Center 中去的詳細步驟，請參考我在 SAP 社群上釋出的 [wiki](https://wiki.scn.sap.com/wiki/display/CRM/How+to+add+an+custom+UI+component+into+a+new+work+center) 頁面。

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

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

# 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:

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

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

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

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

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

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

按照該路徑到 UI Designer 裡檢視，果然發現該工作中心檢視裡包含了 COD_SAKESORDER_OWL 這個 UI 元件。

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

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

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

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

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

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

# 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 應用資訊：

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

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

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

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

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

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

在響應資料裡，能檢視該 SAP UI5 應用基於的 OData 服務名稱，以及 SAP UI5 應用的 ID：F4032
![](https://img-blog.csdnimg.cn/img_convert/e7f001e833a4e90223038392743772bc.png)

根據此 ID 到 Jerry 這篇文章 **[SAP Fiori應用索引大全](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247488734&idx=1&sn=7183bce297fd918de90215e40db8ea34&chksm=ead5a649dda22f5f875cdd56be5d94634240a2afd89abc318d73201b90d4e6f69f2c34c267ac&scene=21#wechat_redirect)** 提到的網站上進行查詢，能得到該 SAP UI5 應用的更多技術和配置細節：

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

關於如何將 SAP UI5 應用配置到 Fiori Launchpad，請參考我這篇文章：[**SAP Fiori Launchpad Tile，UI5 應用，和 PFCG Role 的對應關係**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490233&idx=1&sn=436696ce6d212b863442b5d281dfc143&chksm=ead5a82edda22138b6d17d7abd647a7b22f36a5980ac031bea2824c4fcb5b7f86e086050650c&scene=21#wechat_redirect)。

# SAP 電商雲 Spartacus UI

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

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

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

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

下圖是 SAP 電商雲 Spartacus UI 預設的 homepage：

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

在位址列 URL 尾部輸入 jerry，回車，會看到一個很醜陋的頁面。上圖 homepage 裡包含的語言和國家下拉選單，購物車圖示，登入使用者名稱，SAP Logo 等元素統統消失了。

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

究其原因，是因為該 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：

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

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

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

繼續為該頁面建立 ContentSlot 和 JerryOrderComponent，並將後者分配給新建的 ContentSlot 去。二者都是 SAP Commerce Cloud CMS 特有的概念，細節請參考 Jerry 之前的文章：[**SAP 產品 UI 裡的容器元件的概念和開發概述**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493883&idx=1&sn=1dbc49885ea55826dddc7dd52eb90d2d&chksm=ead65a6cdda1d37ad6f7a2d0d343695853c98e55b5bf19f0465233e2973efe7bdf2af9adc0e2&scene=21#wechat_redirect)。

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

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

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

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

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

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

*   [SAP UI和Salesforce UI開發漫談](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484460&idx=1&sn=aafe62ded3bc7b07f4d3da99f3926ab3&chksm=ead5b6bbdda23fad3c4b7e8148d61e4c9a2609f13151a221da1bf313a25f0df37fab8d9ec557&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 標準產品 UI 開發中的一個實踐](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492627&idx=1&sn=2f879542eefcd13cca66d6f0dabf2964&chksm=ead65684dda1df923bb11f5da42616a1693f2d8eb7e0218a5a4d3f1a4b59eb957dc105d42938&scene=21#wechat_redirect)

*   [談談 SAP 產品 UI 開發中的元件概念](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493152&idx=1&sn=8b4ff586e8ae6820af1cafeae31f98c6&chksm=ead654b7dda1dda104cd79d6281a7943399cc46a3416127f41c6c0876ba83004014fa46dad1a&scene=21#wechat_redirect)

*   [關於 SAP 產品 UI 的搜尋引擎最佳化 SEO - Search Engine Optimization](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493081&idx=1&sn=fb4b51e593211fa17f9b6a32217914e5&chksm=ead6574edda1de5804e15751f0054854b8f1bd47762ad5b4cb7af22d674f16d4cbb8a92ecbf2&scene=21#wechat_redirect)

*   [聊聊 SAP 產品 UI 上的訊息顯示機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493444&idx=1&sn=3bd8b7541cb5cabc12755774afb29ca5&chksm=ead655d3dda1dcc575efd1ae850d70b167576018f3ee72c87dfe98b9d16b0a620ca6868df11a&scene=21#wechat_redirect)

*   [SAP 產品 UI 裡的容器元件的概念和開發概述](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493883&idx=1&sn=1dbc49885ea55826dddc7dd52eb90d2d&chksm=ead65a6cdda1d37ad6f7a2d0d343695853c98e55b5bf19f0465233e2973efe7bdf2af9adc0e2&scene=21#wechat_redirect)

*   [SAP產品的Field Extensibility](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485012&idx=1&sn=08c9d139d7c127e815a8846cb2473336&chksm=ead5b4c3dda23dd5b4c694cb568e9cc765632ea36d4f5901da4eccd076e3d49075bb0a2a088a&scene=21#wechat_redirect)

*   [SAP Cloud for Customer Extensibility的設計與實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485041&idx=1&sn=01241745ef4f6636ec146611a5c28083&chksm=ead5b4e6dda23df0a167b58283f50b76aca502cdc832d407623a0c17987e0b0e28a352e9b429&scene=21#wechat_redirect)

各種 SAP 產品的自定義 UI 建立和整合方法一覽

相關文章