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

時間 2021-03-21

標籤數據庫 json 安全框架 async 工具學習 spa 設計 3d 欄目雲服務简体版

原文原文鏈接

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

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

客戶經過在 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.async

本文會介紹 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，類型爲下拉列表，下拉列表中的內容來自咱們自定義的數據庫表。spa

在使用 SAP CRM AET 建立擴展字段以前，先要選擇基於哪個 BO 的哪個節點來建立，即選擇 Object Part. 設計

建立好的類型爲下拉列表的 CRM 擴展字段以下：3d

下圖則是 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 格式顯示當前產品的所有數據：