本文首先快速回顧幾種 SAP 產品中的 UI 增強思路，然後具體介紹該思路是如何在 SAP Commerce Cloud(電商雲) UI 增強中貫徹實施的。

Jerry 之前的文章：[**Jerry 在 2020 SAP 全球技術大會的分享：SAP Spartacus 技術介紹的文字版**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect)，曾經提到，SAP 電商雲的新一代標準 UI，由眾多 Angular Component 組成，這些 Component 透過 SAP Spartacus 開源專案，以庫檔案的方式釋出給客戶使用。

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

客戶透過在 Angular 應用的 package.json 裡，匯入 @spartacus/storefront 的依賴，就可以訪問到 SAP 電商雲的標準 UI Component.

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

Jerry 之前的文章 [**從一個實際的例子出發，談談 SAP Commerce Cloud(電商雲)的 UI 自定義開發**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)，介紹了 SAP 電商雲 UI 二次開發的方式之一：基於 UI Component 的替換。

我們假設 SAP 電商雲 UI 由 SAP 標準釋出的 Angular Component A, B, C, D... 組成，Jerry 文章介紹的二次開發方式，分享了 Partners 如何開發新的 Angular Component A', B', C', D'... ，然後如何透過配置告訴 SAP Commerce Cloud UI，執行時使用 A', B', C', D' 來渲染 UI.

本文會介紹 SAP 電商雲另一種 UI 增強方式，不是透過開發新的 Component A' 去替換 A，而是直接對 A 做增強，比如新增一個新的欄位 a, 嵌入到 Component A 中，這樣 A 就成為了 Aa .

這種在原有 UI 基礎上新增新欄位的增強方式，並非 SAP 電商雲特有，在SAP 很多其他產品裡也能看到。

Jerry 之前的文章 [**SAP產品增強技術回顧**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489866&idx=1&sn=4f00c4f778f6fe6d5c4a0aa6f59b46a3&chksm=ead5abdddda222cb71f82170afcd5cc8ed5ec03db91d12ba0eed4329eb3e15e24d3804f1ca10&scene=21#wechat_redirect)，曾經回顧過 SAP 產品包括欄位和流程在內的增強技術。就介面欄位增強而言，比如 SAP CRM 裡，我們可以先建立一個資料庫表，插入一些資料進去，然後利用 AET( Application Extension Tool)，建立一個新的擴充套件欄位 JVM Type，型別為下拉選單，下拉選單中的內容來自我們自定義的資料庫表。

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

在使用 SAP CRM AET 建立擴充套件欄位之前，先要選擇基於哪一個 BO 的哪一個節點來建立，即選擇 Object Part.

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

建立好的型別為下拉選單的 CRM 擴充套件欄位如下：

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

下圖則是 SAP Cloud for Customer 增強欄位的建立介面。Business Context 是一組能被擴充套件的 UI 介面的邏輯抽象，針對某個 Business Context 建立的擴充套件欄位，會自動出現在對應的 UI 介面上。這個術語 Business Context 在 SAP Commerce Cloud 裡會再次出現，只是換了個稱呼，叫做 Outlet.

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

至此，我們已經瞭解了 SAP CRM 裡的 Object Part，以及 SAP Cloud for Customer 裡的 Business Context，這些概念都是用於界定待建立的增強欄位的上下文，即增強欄位出現在 UI (以及其他模型，比如 BO，介面等) 的具體位置。

到了 SAP CRM Fiori 應用裡，增強欄位上下文的稱呼變成了：Extension Point.

看一個我之前指導 Partners 完成的實際增強需求。

Sales Office 和 Sales Group 是 SAP CRM WebClient UI 上的標準欄位：

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

然而這兩個欄位並未出現在對應的 CRM Fiori 應用裡。

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

不過，Partners 仍然可以利用該 Fiori 應用 UI 上預留的 ExtensionPoint，即 salesAreaInfoTabContentBottomExtension，來自行將這兩個欄位新增到 Fiori UI 上：

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

Partners 自行建立一個 view fragment，裡面包含 Sales Office 和 Sales Group 兩個欄位：

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

然後將該 view fragment 配置到 salesAreaInfoTabContentBottomExtension 上即可。最後，包含在 view fragment 裡的自定義欄位，就會出現在 Fiori 應用 Sales Area 皮膚的對應位置，如下圖所示：

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

至此，我們瞭解到的 SAP 產品裡定義擴充套件欄位上下文的術語羅列如下：

* SAP CRM：Object Part
* SAP Cloud for Customer：Business Context
* SAP CRM Fiori：ExtensionPoint

透過以上方式在 SAP 標準 UI 上建立的增強欄位，並不是透過直接修改標準 UI 原始碼的方式實現的。增強欄位同被增強的 UI 相比，二者物理上是不同的模型，儲存邏輯也各不相同，因此這種增強方式是升級安全的，即使標準 UI 發生變化，只要擴充套件欄位上下文保持穩定，則被增強 UI 上的這些擴充套件欄位，不會受到 SAP 標準 UI 升級或者故障修復的影響。

下面是擴充套件欄位上下文概念在 SAP Commerce Cloud 裡的稱呼：Outlet. 有了前面這麼多鋪墊，也就不難理解 SAP Commerce Cloud UI 的欄位增強方式的工作原理了。

下圖黑色區域是 SAP 電商雲的 footer 區域，假設我們需要在 footer 區域的頂部和尾部，再增添一些自定義欄位。換個更技術一些的說法，我們需要基於自定義欄位上下文，即 Outlet = footer 的 UI 區域，建立一些自定義欄位。

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

具體做法：在 Chrome 開發者工具裡找到 footer 區域的 ID：cx-footer.

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

建立一個新的 Angular Component(類比 SAP CRM Fiori 的 View Fragment)，在裡面使用 cxOutletRef 指令，將兩個新的欄位 before footer 和 after footer，關聯到 ID 為 cx-footer 的 Outlet 上(類比 SAP CRM Fiori 的 ExtensionPoint)，出現的位置分別用 cxOutletPos 指定成 before 和 after，即希望這兩個擴充套件欄位，分別出現在 SAP Commerce Cloud footer 區域之前和之後。

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

這兩個擴充套件欄位最後執行時的顯示效果：

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

同SAP 其他產品相比，因為 SAP Commerce Cloud UI 基於 Angular，所以藉助 Outlet，不僅可以像 SAP CRM Fiori 那樣，透過插入普通的 HTML 標籤來新增增強欄位，而且能使用 Angular 模板表示式，達到新增新的邏輯的目的。

比如我在 SAP Commerce Cloud 產品明細頁面，基於 ProductDetailsPageTemplate 這個 Outlet 建立了兩個新的欄位，一個欄位為 h1 靜態標籤，另一個 p 標籤的內容，使用 Angular async 管道訂閱 product$, 再以 json 格式顯示當前產品的全部資料：

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

當前產品的資料明細，繫結到 product$ 上，一個 Observable 物件，透過注入的 CurrentProductService 服務呼叫 getProduct 方法返回。

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

最後執行時的兩個增強欄位，在 SAP 電商雲產品明細頁面顯示的效果如下：

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

至此，本文透過 SAP CRM，SAP Cloud for Customer，SAP CRM Fiori，以及 SAP Commerce Cloud 產品裡建立擴充套件欄位來實現 UI 增強需求的逐一介紹，給大家展示了 SAP 產品一脈相承的 UI 增強思路。

實際上 SAP 這些產品的增強方式，只要弄清楚其中一個產品的增強實現細節，再學習其他SAP 產品時就容易舉一反三了。

大家如果對 SAP Commerce Cloud 新一代基於 SAP Spartacus 框架的 UI 增強有任何疑問或者需求，歡迎聯絡本人。我會蒐集大家的反饋，分享給我的團隊。

感謝閱讀。

**更多閱讀**

*   [Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&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 Kyma的訂單編排增強介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485820&idx=1&sn=81e15e0e2ce07bea5043d0187db62877&chksm=ead5bbebdda232fdb8769c33b98705ff49f33ad16365f8b5c0f354f48e41a7f3ea2313492022&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 Commerce Cloud電商雲的UI自定義開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (電商雲) UI 的懶載入功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&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產品增強技術回顧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489866&idx=1&sn=4f00c4f778f6fe6d5c4a0aa6f59b46a3&chksm=ead5abdddda222cb71f82170afcd5cc8ed5ec03db91d12ba0eed4329eb3e15e24d3804f1ca10&scene=21#wechat_redirect)

更多Jerry的原創文章，盡在："汪子熙":
![](https://img-blog.csdnimg.cn/img_convert/e4a8387dca5921e049fd05f96ef232ae.png)

SAP 產品一脈相承的 UI 增強思路，在 SAP電商雲 UI 增強實現中的體現

相關文章