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

本文從 StackOverflow 社群上來自 Partner 的一個 SAP Commerce Cloud Spartacus UI 的定製化需求說起。

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

這個需求的背景是，客戶在 SAP 電商雲的產品明細頁面，可以留下自己的評論，點選 Submit 按鈕提交。

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

提交之後，能看到“謝謝評論”的提示訊息。
![](https://img-blog.csdnimg.cn/img_convert/97d2f926cc5ead372b1bef0612613f77.png)

客戶定製化需求是：不執行這個預設的訊息顯示邏輯，即不顯示訊息，而是執行其他邏輯，比如簡訊通知或郵件通知。

我們先簡單回顧 SAP 其他產品的 UI 訊息顯示機制。

訊息是應用程式執行過程中給使用者提供反饋的重要渠道之一，通常由使用者某個動作直接觸發，顯示在產品介面上。當然應用程式後臺作業執行到某個階段，在滿足指定條件時也能觸發訊息顯示。簡明、清晰而準確的訊息，能幫助使用者明確程式當前的執行狀況，指引其下一步的操作。

SAP 產品 UI 顯示的訊息文字，均有專業的 Knowledge Management 即 KM 團隊負責審查和釋出。

對於 SAP 開發人員來說，更關心的則是這些訊息顯示的上下文；換言之，看到 UI 上顯示一條訊息之後，能否在最短的時間內，高效定位到丟擲該訊息的準確程式碼位置。

如下圖所示，在經典的 SAPGUI SE38 ABAP 程式編輯器，輸入一個不存在的報表名稱，會顯示一條訊息：

Program XX does not exist.

其中 XX 是佔位符，會被使用者實際輸入的報表名稱所替換。

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

基於 ABAP 實現的所有 SAP 產品，比如 SAP CRM，SAP SRM，SAP S/4HANA，SAP Cloud for Customer，UI 上顯示的每一條訊息，在 ABAP 後臺均有一條對應的訊息記錄，維護在事物碼 SE91 裡。

以上圖的訊息為例，其號碼為 DS017，其中 DS 為訊息類別, 017 為訊息編號，二者唯一確認一條訊息記錄。

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

Jerry 之前的文章[**SAP 錯誤訊息除錯之七種武器：讓所有的錯誤訊息都能被定位**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247488334&idx=1&sn=62dce8436a89f926d47d3dbe9f8a2be0&chksm=ead5a1d9dda228cf0d9a5d582cf344e86385bfc80f472f7b8d6d0af624d784152b1451621c6a&scene=21#wechat_redirect)，曾經介紹過七種不同的方法，均能在 SAPGUI 環境裡，已知訊息類和訊息編號，快速找到丟擲該訊息的準確位置。

到了 SAP CRM WebClient UI 裡，瀏覽器上看到的每一條訊息，比如下圖 Data Contains errors and cannot be saved, 仍然唯一對應後臺一條訊息記錄 CRM_BUPA_BOL/036:
![](https://img-blog.csdnimg.cn/img_convert/486823c44022ef95794302aeab8c9f17.png)
![](https://img-blog.csdnimg.cn/img_convert/a36e4f1194465229dfc9cddae70d1b6a.png)

這條訊息是由 Business Partner 應用負責維護的。

如何查詢丟擲 SAP WebClient UI 訊息的對應後臺程式碼位置，在 Jerry 的 SAP 社群部落格上有介紹：

[How to quickly locate the source code where a given message is raised in WebClient UI](https://blogs.sap.com/2013/09/25/how-to-quicly-locate-the-source-code-where-raises-a-given-message-in-webclient-ui/)

到了 SAP Cloud for Customer，雖然 Partners 無法直接登入 ABAP 後臺，然而仍然可以透過 Chrome 開發者工具，得到 UI 訊息對應的 ABAP 後臺訊息記錄的訊息類和訊息編號：

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

在 SAP Cloud for Customer 裡，Partners 可以透過 Cloud Application Studio 新建 UI 訊息：

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

在 ABSL 程式碼裡，透過 raise 語句顯示訊息到 UI 上：

raise delivery_message.Create("S", this.OutboundDeliveryID);

執行時 delivery_message 定義的訊息文字里的 &1,會被 this.outboundDeliveryID 欄位的值取代。
![](https://img-blog.csdnimg.cn/img_convert/b745f48fa8728f2a59f68b0cc399085b.png)

到了 SAP S/4HANA 裡，所有基於 Fiori Elements 建立的 Fiori 應用，共享同一套檢視模板和控制器實現，因此大多數訊息不再由應用程式各自定義，而由框架統一維護。

比如下列 S/4HANA 物料主資料維護時的錯誤訊息：

Product Type 03 is not valid：
![](https://img-blog.csdnimg.cn/img_convert/92a91725f8f8817272e74afaa58f7935.png)

這條訊息維護於所謂的 Business Suite Foundation Reusable Components 開發包中的訊息類 /BOFU/CODE_LISTS 內部。

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

我們再來分析本文開頭提到的 SAP Commerce Cloud 的訊息顯示定製化需求。

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

“感謝評論”的訊息文字 ID 為 productReview.thankYouForReview,在 ProductReviewEffects 接收到 POST_PRODUCT_REVIEW_SUCCESS 這個 Action 之後透過 MessageService 顯示到 UI 上。

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

一種最常規的二次開發思路就是，繼承 SAP Commerce Cloud UI 標準釋出的 ProductReviewEffects 類，過載其接收到 POST_PRODUCT_REVIEW_SUCCESS 之後的實現程式碼，將呼叫 MessageService 丟擲感謝評論的程式碼刪除掉即可。

然而 SAP Commerce Cloud UI 釋出的所有 Effects 實現類都是不可擴充套件的，因此這條思路行不通。

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 電商雲 Spartacus UI，同 Commerce 後臺互動的邏輯：

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

當時我著重闡述的，是上圖右側紅色高亮區域的互動原理。

Spartacus 同 Commerce 系統的通訊，透過 HTTP 協議呼叫 OCC API 完成。Connector 是 HTTP呼叫的發起者，維護了靜態的配置資訊，即 API endpoint.

比如，從 Commerce 系統讀取產品主資料，讀取的欄位列表以 url 引數的形式出現在 API endpoint 裡。這些欄位列表可以在 Connector 的靜態配置點裡進行配置。

Connector 並不會直接同 Commerce 互動，而是把請求轉發給 Adapter，具體通訊由 Adapter 完成，Connector 只負責排程 Adapter. Spartacus 釋出的 Adapter 預設使用 OCC Module，即 Commerce 標準的 OCC Restful API，但是客戶也可以實現自己的 Adapter，連線 Commerce 之外的其他後臺系統。

Connector 將 Adapter 取回的資料交給 NgRx Store 結構統一管理，後者的複雜度被 Facade 層所隱藏，而Spartacus UI 元件只會同 Facade 層互動，進行資料繫結和頁面展示。這體現了關注點分離的設計原則。

再回到本文開頭客戶提出的定製化需求。為了實現該需求，我們需要深入瞭解下圖紅色高亮區域即 NgRx Store 和 SAP Spartacus Connector 互動的細節。

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

NgRx 是 Angular 基於 RxJs 的一個響應式狀態管理庫，包含下列核心概念，Jerry 會結合 SAP Commerce Cloud UI 對 NgRx 的實際使用情況來舉例說明。

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

* Action：其實就是程式設計領域的事件的別名。SAP Commerce Cloud UI 元件，能響應使用者操作，透過元件的 Service 例項，投遞出相應的 Action. Action 投遞方和 Action 接收方是解耦的，彼此感知不到對方。

下圖是 SAP 電商雲產品明細頁面評論區域的 Submit 按鈕被點選之後，對應的 Service 類丟擲 PostProductReview Action 的程式碼：
![](https://img-blog.csdnimg.cn/img_convert/a6c7832a24c82b428c0c078e32c16951.png)

ProductActions.PostProductReview 是 NgRx Action 的一個子類，type 欄位為 POST_PRODUCT_REVIEW，建構函式的引數 payload，定義了呼叫 Commerce OCC API 持久化使用者評論需要傳遞的資料結構：

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

* Effects：SAP Commerce Cloud UI Action 的接收方之一。下圖 Effects 程式碼的語義是：接收型別為 POST_PRODUCT_REVIEW 的 Action(第46行)，呼叫前文介紹的 Connector，向 Commerce 後臺發起 OCC API 呼叫(第49行)，根據 API 返回結果，分別投遞評論儲存成功或失敗的 Action：
PostProductReviewSuccess(第53行)
PostProductReviewFail(第56行)

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

* Store：Angular 應用維護在記憶體中的儲存結構，存放了 SAP Commerce Cloud UI 所有元件的執行時資料。每當 Effects 呼叫 Commerce OCC API 拿到新的資料時，呼叫 Reducer，將增量資料填充到 Store 中去。

* Reducer：本質上是一個有限狀態自動機，每當收到代表來自 Commerce 後臺的資料發生變化的 Action 時，狀態機驅動對應的 Reducer, 根據新的 Action 包含的負載，對 Store 中的資料進行調整。

例如產品明細頁面第一次渲染時，Effects 需要從 Commerce 後臺讀取所有的評論資料。讀取成功後，丟擲 LOAD_PRODUCT_REVIEWS_SUCCESS Action. 下圖的 ProductReviewsReducer 接收到該 Action，從其 payload 中解析出實際評論資料並返回。這些返回的資料會被 NgRx 框架接收，併合併到 Store 中去。
![](https://img-blog.csdnimg.cn/img_convert/76b21a318a5e84b8c268dee0f376408e.png)

* Selector：純函式，作為應用程式從 NgRx Store 中讀取最新資料的介面。

理清楚 SAP Commerce Cloud UI 使用 NgRx 進行狀態管理的細節之後，對於文章開頭的客戶定製化需求，也就不難實現了。

既然下圖所示的 SAP Commerce Cloud UI 標準的 Effects 無法擴充套件，我們注意到 UI 元件的 Service 層，才是所有事件流的起始點，因此可以實現新的 Service，來替換 SAP 電商雲 UI 標準的 Service，然後基於該定製化 Service，實現配套的 Effects 和 Action.

如此一來，標準的和使用者評論相關的邏輯流(如下圖 1-2-3 所示)將不會再得到執行，取而代之的是我們自己定製化的執行流，如下圖 A-B-C 所示，其中藍色的圖例均為 Partners 需要開發的定製化程式碼。

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

這個解決方案的簡要介紹：

(1) 建立新的 Action CustPostProductReview，CustPostProductReviewSuccess 和 CustPostProductReviewFail. 其實就是在標準的實現類之前，新增 Cust 的字首。

(2) 建立新的 CustProductReviewService，繼承標準的 ProductReviewService. 過載其 add 方法，丟擲新的 CustPostProductReview Action.

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

(3) 新建 CustProductReviewsEffects，接收新的 Action CUST_POST_PRODUCT_REVIEW(第25行)，仍舊呼叫 Connector 將使用者評論持久化到 Commerce 後臺(第28行)，然後丟擲新的 Action CustPostProductReviewSucess.

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

自定義 Effect 接收到新的 Action CUST_POST_PRODUCT_REVIEW_SUCCESS 之後，就可以進行自定義邏輯編寫。

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

(4)將自定義的 Effect 和 Service 實現，透過 Angular 依賴注入框架，配置到對應的 Module 中。

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

本需求在 SAP Spartacus 3.1 版本測試透過。

**更多閱讀**

*   [SAP UI5 OData謠言粉碎機：極短時間內傳送兩個 Odata request, 前一個會自動被cancel 掉嗎](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect)

*   [SAP UI5 和 Angular的函式防抖(Debounce)和函式節流(Throttle)實現原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491343&idx=1&sn=0e7aa53525157d8ef8af8681d79d7b64&chksm=ead5ad98dda2248e44955e59e89c95d81d5a4ae4fa3380486c74252e67515bc2c0883bd49967&scene=21#wechat_redirect)

*   [SAP UI 渲染模式：客戶端渲染 VS 伺服器端渲染](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)

*   [SAP UI 的載入動畫效果和幽靈設計(Ghost Design)](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491512&idx=1&sn=a44d166f7685b7a23aabaa22bc46c3a7&chksm=ead5ad2fdda22439755b9434a7364afd97356e1a7a623beb94f5375dc2ec47559d9efa60985f&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 產品一脈相承的 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 UI5 框架程式碼系列之八：談談 SAP UI5 的檢視控制元件 ID，以及其和 Angular 檢視的異同](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492187&idx=1&sn=a8dbaa645c472b5c22771e512ed1b971&chksm=ead650ccdda1d9dab86ba16fb71ea5e90aa15918f3e3ac2c4237c9f5f03d51a12dac40280e70&scene=21#wechat_redirect)

*   [對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492258&idx=1&sn=7d3910109f2721dc316c0b8890091690&chksm=ead65035dda1d923924a5b186d4296a65d6efe2d08d8f4705abc52c42b349b2e95c255337f21&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 UI5 應用中整合第三方庫 ：一個在移動裝置上檢視 Web 應用列印除錯資訊的小技巧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492659&idx=1&sn=dd2b61252e04d2c22ed9eef6761a7fc3&chksm=ead656a4dda1dfb27ff0a6a61357455c29fa5ddf679686e482f28216637899a58c31803e1b87&scene=21#wechat_redirect)

*   [SAP Commerce Cloud UI 的使用者會話管理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493059&idx=1&sn=3e56adfcd4b0562172ca87ec338fd536&chksm=ead65754dda1de4264f813da6bbdf91befd8fc0289a68048b19a4c944d2d5c64e03e65e0183b&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=2247493152&idx=1&sn=8b4ff586e8ae6820af1cafeae31f98c6&chksm=ead654b7dda1dda104cd79d6281a7943399cc46a3416127f41c6c0876ba83004014fa46dad1a&scene=21#wechat_redirect)

聊聊 SAP 產品 UI 上的訊息顯示機制

相關文章