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

Jerry 之前的文章：Jerry 在 2020 SAP 全球技術大會的分享：SAP Spartacus 技術介紹的文字版，曾經提到，SAP 電商云的新一代標準 UI，由眾多 Angular Component 組成，這些 Component 通過 SAP Spartacus 開源項目，以庫文件的方式發布給客戶使用。

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

Jerry 之前的文章?從一個實際的例子出發，談談 SAP Commerce Cloud(電商云)的 UI 自定義開發，介紹了 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產品增強技術回顧，曾經回顧過 SAP 產品包括字段和流程在內的增強技術。就界面字段增強而言，比如 SAP CRM 里，我們可以先創建一個數據庫表，插入一些數據進去，然后利用 AET( Application Extension Tool)，創建一個新的擴展字段 JVM Type，類型為下拉列表，下拉列表中的內容來自我們自定義的數據庫表。

在使用 SAP CRM AET 創建擴展字段之前，先要選擇基于哪一個 BO 的哪一個節點來創建，即選擇 Object Part.

創建好的類型為下拉列表的 CRM 擴展字段如下：

下圖則是 SAP Cloud for Customer 增強字段的創建界面。Business Context 是一組能被擴展的 UI 界面的邏輯抽象，針對某個 Business Context 創建的擴展字段，會自動出現在對應的 UI 界面上。這個術語 Business Context 在 SAP Commerce Cloud 里會再次出現，只是換了個稱呼，叫做 Outlet.

至此，我們已經了解了 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 上的標準字段：

然而這兩個字段并未出現在對應的 CRM Fiori 應用里。

不過，Partners 仍然可以利用該 Fiori 應用 UI 上預留的 ExtensionPoint，即 salesAreaInfoTabContentBottomExtension，來自行將這兩個字段添加到 Fiori UI 上：

Partners 自行創建一個 view fragment，里面包含 Sales Office 和 Sales Group 兩個字段：

然后將該 view fragment 配置到 salesAreaInfoTabContentBottomExtension 上即可。最后，包含在 view fragment 里的自定義字段，就會出現在 Fiori 應用 Sales Area 面板的對應位置，如下圖所示：

至此，我們了解到的 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 區域，創建一些自定義字段。

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

創建一個新的 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 區域之前和之后。

這兩個擴展字段最后運行時的顯示效果：

同SAP 其他產品相比，因為 SAP Commerce Cloud UI 基于 Angular，所以借助 Outlet，不僅可以像 SAP CRM Fiori 那樣，通過插入普通的 HTML 標簽來添加增強字段，而且能使用 Angular 模板表達式，達到添加新的邏輯的目的。

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

當前產品的數據明細，綁定到 product$ 上，一個 Observable 對象，通過注入的 CurrentProductService 服務調用 getProduct 方法返回。

最后運行時的兩個增強字段，在 SAP 電商云產品明細頁面顯示的效果如下：

至此，本文通過 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技術介紹的文字版

• SAP產品的Field Extensibility

• 基于SAP Kyma的訂單編排增強介紹

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

• 從一個實際的例子出發，談談SAP Commerce Cloud電商云的UI自定義開發

• SAP Commerce Cloud (電商云) UI 的懶加載功能

• SAP CRM Fiori 應用和 SAP Commerce Cloud (電商云) UI 如何通過調整CSS來改變UI顯示風格

• SAP產品增強技術回顧

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

總結

以上是生活随笔為你收集整理的SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud(电商云) UI 增强实现中的体现的全部內容，希望文章能夠幫你解決所遇到的問題。

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