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

Jerry 之前的文章：Jerry 在 2020 SAP 全球技術(shù)大會(huì)的分享：SAP Spartacus 技術(shù)介紹的文字版，曾經(jīng)提到，SAP 電商云的新一代標(biāo)準(zhǔn) UI，由眾多 Angular Component 組成，這些 Component 通過(guò) SAP Spartacus 開(kāi)源項(xiàng)目，以庫(kù)文件的方式發(fā)布給客戶(hù)使用。

客戶(hù)通過(guò)在 Angular 應(yīng)用的 package.json 里，導(dǎo)入 @spartacus/storefront 的依賴(lài)，就可以訪問(wèn)到 SAP 電商云的標(biāo)準(zhǔn) UI Component.

Jerry 之前的文章?從一個(gè)實(shí)際的例子出發(fā)，談?wù)?SAP Commerce Cloud(電商云)的 UI 自定義開(kāi)發(fā)，介紹了 SAP 電商云 UI 二次開(kāi)發(fā)的方式之一：基于 UI Component 的替換。

我們假設(shè) SAP 電商云 UI 由 SAP 標(biāo)準(zhǔn)發(fā)布的 Angular Component A, B, C, D… 組成，Jerry 文章介紹的二次開(kāi)發(fā)方式，分享了 Partners 如何開(kāi)發(fā)新的 Angular Component A’, B’, C’, D’… ，然后如何通過(guò)配置告訴 SAP Commerce Cloud UI，運(yùn)行時(shí)使用 A’, B’, C’, D’ 來(lái)渲染 UI.

本文會(huì)介紹 SAP 電商云另一種 UI 增強(qiáng)方式，不是通過(guò)開(kāi)發(fā)新的 Component A’ 去替換 A，而是直接對(duì) A 做增強(qiáng)，比如添加一個(gè)新的字段 a, 嵌入到 Component A 中，這樣 A 就成為了 Aa .

這種在原有 UI 基礎(chǔ)上添加新字段的增強(qiáng)方式，并非 SAP 電商云特有，在SAP 很多其他產(chǎn)品里也能看到。

Jerry 之前的文章?SAP產(chǎn)品增強(qiáng)技術(shù)回顧，曾經(jīng)回顧過(guò) SAP 產(chǎn)品包括字段和流程在內(nèi)的增強(qiáng)技術(shù)。就界面字段增強(qiáng)而言，比如 SAP CRM 里，我們可以先創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)表，插入一些數(shù)據(jù)進(jìn)去，然后利用 AET( Application Extension Tool)，創(chuàng)建一個(gè)新的擴(kuò)展字段 JVM Type，類(lèi)型為下拉列表，下拉列表中的內(nèi)容來(lái)自我們自定義的數(shù)據(jù)庫(kù)表。

在使用 SAP CRM AET 創(chuàng)建擴(kuò)展字段之前，先要選擇基于哪一個(gè) BO 的哪一個(gè)節(jié)點(diǎn)來(lái)創(chuàng)建，即選擇 Object Part.

創(chuàng)建好的類(lèi)型為下拉列表的 CRM 擴(kuò)展字段如下：

下圖則是 SAP Cloud for Customer 增強(qiáng)字段的創(chuàng)建界面。Business Context 是一組能被擴(kuò)展的 UI 界面的邏輯抽象，針對(duì)某個(gè) Business Context 創(chuàng)建的擴(kuò)展字段，會(huì)自動(dòng)出現(xiàn)在對(duì)應(yīng)的 UI 界面上。這個(gè)術(shù)語(yǔ) Business Context 在 SAP Commerce Cloud 里會(huì)再次出現(xiàn)，只是換了個(gè)稱(chēng)呼，叫做 Outlet.

至此，我們已經(jīng)了解了 SAP CRM 里的 Object Part，以及 SAP Cloud for Customer 里的 Business Context，這些概念都是用于界定待創(chuàng)建的增強(qiáng)字段的上下文，即增強(qiáng)字段出現(xiàn)在 UI (以及其他模型，比如 BO，接口等) 的具體位置。

到了 SAP CRM Fiori 應(yīng)用里，增強(qiáng)字段上下文的稱(chēng)呼變成了：Extension Point.

看一個(gè)我之前指導(dǎo) Partners 完成的實(shí)際增強(qiáng)需求。

Sales Office 和 Sales Group 是 SAP CRM WebClient UI 上的標(biāo)準(zhǔn)字段：

然而這兩個(gè)字段并未出現(xiàn)在對(duì)應(yīng)的 CRM Fiori 應(yīng)用里。

不過(guò)，Partners 仍然可以利用該 Fiori 應(yīng)用 UI 上預(yù)留的 ExtensionPoint，即 salesAreaInfoTabContentBottomExtension，來(lái)自行將這兩個(gè)字段添加到 Fiori UI 上：

Partners 自行創(chuàng)建一個(gè) view fragment，里面包含 Sales Office 和 Sales Group 兩個(gè)字段：

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

至此，我們了解到的 SAP 產(chǎn)品里定義擴(kuò)展字段上下文的術(shù)語(yǔ)羅列如下：

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

通過(guò)以上方式在 SAP 標(biāo)準(zhǔn) UI 上創(chuàng)建的增強(qiáng)字段，并不是通過(guò)直接修改標(biāo)準(zhǔn) UI 源代碼的方式實(shí)現(xiàn)的。增強(qiáng)字段同被增強(qiáng)的 UI 相比，二者物理上是不同的模型，存儲(chǔ)邏輯也各不相同，因此這種增強(qiáng)方式是升級(jí)安全的，即使標(biāo)準(zhǔn) UI 發(fā)生變化，只要擴(kuò)展字段上下文保持穩(wěn)定，則被增強(qiáng) UI 上的這些擴(kuò)展字段，不會(huì)受到 SAP 標(biāo)準(zhǔn) UI 升級(jí)或者故障修復(fù)的影響。

下面是擴(kuò)展字段上下文概念在 SAP Commerce Cloud 里的稱(chēng)呼：Outlet. 有了前面這么多鋪墊，也就不難理解 SAP Commerce Cloud UI 的字段增強(qiáng)方式的工作原理了。

下圖黑色區(qū)域是 SAP 電商云的 footer 區(qū)域，假設(shè)我們需要在 footer 區(qū)域的頂部和尾部，再增添一些自定義字段。換個(gè)更技術(shù)一些的說(shuō)法，我們需要基于自定義字段上下文，即 Outlet = footer 的 UI 區(qū)域，創(chuàng)建一些自定義字段。

具體做法：在 Chrome 開(kāi)發(fā)者工具里找到 footer 區(qū)域的 ID：cx-footer.

創(chuàng)建一個(gè)新的 Angular Component(類(lèi)比 SAP CRM Fiori 的 View Fragment)，在里面使用 cxOutletRef 指令，將兩個(gè)新的字段 before footer 和 after footer，關(guān)聯(lián)到 ID 為 cx-footer 的 Outlet 上(類(lèi)比 SAP CRM Fiori 的 ExtensionPoint)，出現(xiàn)的位置分別用 cxOutletPos 指定成 before 和 after，即希望這兩個(gè)擴(kuò)展字段，分別出現(xiàn)在 SAP Commerce Cloud footer 區(qū)域之前和之后。

這兩個(gè)擴(kuò)展字段最后運(yùn)行時(shí)的顯示效果：

同SAP 其他產(chǎn)品相比，因?yàn)?SAP Commerce Cloud UI 基于 Angular，所以借助 Outlet，不僅可以像 SAP CRM Fiori 那樣，通過(guò)插入普通的 HTML 標(biāo)簽來(lái)添加增強(qiáng)字段，而且能使用 Angular 模板表達(dá)式，達(dá)到添加新的邏輯的目的。

比如我在 SAP Commerce Cloud 產(chǎn)品明細(xì)頁(yè)面，基于 ProductDetailsPageTemplate 這個(gè) Outlet 創(chuàng)建了兩個(gè)新的字段，一個(gè)字段為 h1 靜態(tài)標(biāo)簽，另一個(gè) p 標(biāo)簽的內(nèi)容，使用 Angular async 管道訂閱 product$, 再以 json 格式顯示當(dāng)前產(chǎn)品的全部數(shù)據(jù)：

當(dāng)前產(chǎn)品的數(shù)據(jù)明細(xì)，綁定到 product$ 上，一個(gè) Observable 對(duì)象，通過(guò)注入的 CurrentProductService 服務(wù)調(diào)用 getProduct 方法返回。

最后運(yùn)行時(shí)的兩個(gè)增強(qiáng)字段，在 SAP 電商云產(chǎn)品明細(xì)頁(yè)面顯示的效果如下：

至此，本文通過(guò) SAP CRM，SAP Cloud for Customer，SAP CRM Fiori，以及 SAP Commerce Cloud 產(chǎn)品里創(chuàng)建擴(kuò)展字段來(lái)實(shí)現(xiàn) UI 增強(qiáng)需求的逐一介紹，給大家展示了 SAP 產(chǎn)品一脈相承的 UI 增強(qiáng)思路。

實(shí)際上 SAP 這些產(chǎn)品的增強(qiáng)方式，只要弄清楚其中一個(gè)產(chǎn)品的增強(qiáng)實(shí)現(xiàn)細(xì)節(jié)，再學(xué)習(xí)其他SAP 產(chǎn)品時(shí)就容易舉一反三了。

大家如果對(duì) SAP Commerce Cloud 新一代基于 SAP Spartacus 框架的 UI 增強(qiáng)有任何疑問(wèn)或者需求，歡迎聯(lián)系本人。我會(huì)搜集大家的反饋，分享給我的團(tuán)隊(duì)。

感謝閱讀。

更多閱讀

• Jerry在2020 SAP全球技術(shù)大會(huì)的分享：SAP Spartacus技術(shù)介紹的文字版

• SAP產(chǎn)品的Field Extensibility

• 基于SAP Kyma的訂單編排增強(qiáng)介紹

• SAP Cloud for Customer Extensibility的設(shè)計(jì)與實(shí)現(xiàn)

• 從一個(gè)實(shí)際的例子出發(fā)，談?wù)凷AP Commerce Cloud電商云的UI自定義開(kāi)發(fā)

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

• SAP CRM Fiori 應(yīng)用和 SAP Commerce Cloud (電商云) UI 如何通過(guò)調(diào)整CSS來(lái)改變UI顯示風(fēng)格

• SAP產(chǎn)品增強(qiáng)技術(shù)回顧

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。