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

本文分別針對 SAP CRM Fiori 應用和 SAP Commerce Cloud (電商云) UI，介紹兩個通過更改 CSS 達到更改其 UI 顯示風格的例子。

不少 SAP 產品都提供了個性化設置，允許 Key User 通過這些設置對 SAP 產品 UI 風格進行微調。下圖是 SAP Cloud for Customer 個性化設置的界面。

除了這些個性化設置外，更靈活的界面風格調整，通常采用二次開發的方式進行。

Jerry 2015年所在的 SAP 成都研究院 CRM Fiori 開發團隊，負責一個名叫 My Opportunities 的 Fiori 應用，該應用沒有采取現在流行的 Fiori Elements + CDS view 實現，而是直接采用原生的 SAP UI5 開發而成。

當時有個客戶，對 Fiori 應用 Footer 工具條里的 Edit 按鈕的藍色背景色提出質疑，因為該客戶使用 Android 設備訪問該應用，在 Android 設備上，任何按鈕被點擊的瞬間，背景都會被藍色高亮。因此當時 SAP UI5 Edit 按鈕這個默認顯示的藍色背景色，讓客戶很難區分該按鈕是否真正被點擊過。

因此客戶聯系 SAP，詢問是否能夠將該 Edit 按鈕的藍色背景色去掉，讓其和上圖右邊的 Follow Up 及 Messages 按鈕顯示風格一致。

Jerry 接到客戶的抱怨后，分析了 SAP UI5 Footer 工具條的源代碼，發現 Edit 按鈕的藍色背景色是有意為之：按照 Fiori UX Guideline，Edit 按鈕的語義類型是 Emphasized ( 下圖第87行的代碼：sap.m.ButtonType.Emphasized)

而在 SAP UI5 標準的 CSS 文件里，Emphasized 類型的按鈕，背景色被設置為深藍色。

搞清楚 Fiori 應用按鈕背景色的實現原理之后，解決方案也就不難設計了。My Opportunities 這個 CRM Fiori 應用，在其 Footer 工具條的渲染邏輯上，留了一個 extension hook ( ABAP 開發人員可以將其理解成 SAP UI5 版本的 BAdI Definition).

最后我建議客戶，實現這個 extension hook，在代碼里將 SAP UI5 Footer 工具條標準的 Edit 按鈕刪除(下圖第9行代碼)，然后在 hook 里自行創建一個普通的按鈕 ( 第3行 ) 即可。當然這個按鈕點擊之后，執行的邏輯需與刪除的標準 Edit 按鈕完全一致，因此需要給其 onBtnPressed 屬性，綁定上原始 Edit 按鈕的點擊事件處理函數：onEdit ( 第5行 ).

最后的效果：Edit 的高亮背景色消失了，客戶很滿意。

關于這個客戶需求的更多細節，請參考我當時寫的博客.

看另一個舉一反三的需求：如果客戶想把 Edit 按鈕旁邊的 Follow Up 按鈕的背景色設置成紅色呢？

解決方案：在 SAP UI5 增強項目代碼里，重新實現 SAP UI5 onAfterRendering hook, 找到 Follow Up 按鈕的引用 ( 下圖第二行 oButtonListHelper.aButtons 數組里，包含了 Footer 工具條里所有按鈕，數組索引為1的元素即 Follow Up 按鈕 ), 然后給其添加一個新的 CSS 類：jerryButton.

這個自定義的 CSS 類 jerryButton，嵌入在增強的 XML View 里，或者定義在增強項目自定義的 CSS 文件里均可。

最后的運行時效果：

下面再來說說 SAP Commerce Cloud (電商云) 的 UI 顯示風格調整。

不同于 SAP CRM Fiori 應用，SAP Commerce Cloud UI 基于開源框架 SAP Spartacus，后者使用 Angular 進行開發，并通過 core，Storefront 和 styles 這些庫文件的方式，發布給客戶使用。

客戶新建一個 Angular 應用，在 package.json里導入 Spartacus 庫文件的依賴，就可以進行 Storefront UI 的二次開發工作了。

SAP Commerce Cloud UI 這種基于 Spartacus 庫文件的二次開發方式，使得其通過 CSS 調整 UI 風格的難度，同本文前半部分介紹的 SAP CRM Fiori 應用相比，要降低不少。

在 Partners 基于 SAP Spartacus 創建的 SAP Commerce Cloud UI Angular 應用里，有一個自動生成的 styles.scss 文件，里面有一行 import 語句，導入了 SAP Spartacus 所有標準的 CSS styles：

我們可以在 styles.scss 文件里，對 SAP Commerce Cloud UI 的界面，按照需要進行 CSS 調整。

舉個例子：假設我想調整購物車頁面里這行 “ORDER SUMMARY” 的外觀：

在 Chrome 開發者工具里，找到其對應的選擇器為：cx-order-summary h4

然后在 styles.scss 里使用該選擇器，覆蓋掉 Spartacus styles 庫里的原始設置即可：

最后運行時的效果：

假設我想把下圖 Order Summary 和 Coupon 頁面的文本顏色變成綠色，字體加粗：

為了減少工作量，避免對 Order Summary 和 Coupon 這兩個區域對應的選擇器，重復施加相同的 CSS 設置，我們可以將重復的 CSS 設置，定義在 %jerry-custom-div 里(類似編程語言里的宏), 然后在 cx-order-summary 和 cx-cart-coupon 里使用 @extend 直接引用這個公用定義。

最后的運行時效果：

更多閱讀

• 從產品展示頁面談談Hybris的特有概念和設計結構

• 從產品展示頁面談談Hybris系列之二: DTO, Converter和Populator

• 從產品展示頁面談談Hybris系列之三：Hybris Service層介紹

• SAP Spartacus簡介

• Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版

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

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

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

總結

以上是生活随笔為你收集整理的SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来改变UI显示风格的全部內容，希望文章能夠幫你解決所遇到的問題。

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