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

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

不少 SAP 產(chǎn)品都提供了個性化設(shè)置，允許 Key User 通過這些設(shè)置對 SAP 產(chǎn)品 UI 風(fēng)格進(jìn)行微調(diào)。下圖是 SAP Cloud for Customer 個性化設(shè)置的界面。

除了這些個性化設(shè)置外，更靈活的界面風(fēng)格調(diào)整，通常采用二次開發(fā)的方式進(jìn)行。

Jerry 2015年所在的 SAP 成都研究院 CRM Fiori 開發(fā)團(tuán)隊(duì)，負(fù)責(zé)一個名叫 My Opportunities 的 Fiori 應(yīng)用，該應(yīng)用沒有采取現(xiàn)在流行的 Fiori Elements + CDS view 實(shí)現(xiàn)，而是直接采用原生的 SAP UI5 開發(fā)而成。

當(dāng)時有個客戶，對 Fiori 應(yīng)用 Footer 工具條里的 Edit 按鈕的藍(lán)色背景色提出質(zhì)疑，因?yàn)樵摽蛻羰褂?Android 設(shè)備訪問該應(yīng)用，在 Android 設(shè)備上，任何按鈕被點(diǎn)擊的瞬間，背景都會被藍(lán)色高亮。因此當(dāng)時 SAP UI5 Edit 按鈕這個默認(rèn)顯示的藍(lán)色背景色，讓客戶很難區(qū)分該按鈕是否真正被點(diǎn)擊過。

因此客戶聯(lián)系 SAP，詢問是否能夠?qū)⒃?Edit 按鈕的藍(lán)色背景色去掉，讓其和上圖右邊的 Follow Up 及 Messages 按鈕顯示風(fēng)格一致。

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

而在 SAP UI5 標(biāo)準(zhǔn)的 CSS 文件里，Emphasized 類型的按鈕，背景色被設(shè)置為深藍(lán)色。

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

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

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

關(guān)于這個客戶需求的更多細(xì)節(jié)，請參考我當(dāng)時寫的博客.

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

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

這個自定義的 CSS 類 jerryButton，嵌入在增強(qiáng)的 XML View 里，或者定義在增強(qiáng)項(xiàng)目自定義的 CSS 文件里均可。

最后的運(yùn)行時效果：

下面再來說說 SAP Commerce Cloud (電商云) 的 UI 顯示風(fēng)格調(diào)整。

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

客戶新建一個 Angular 應(yīng)用，在 package.json里導(dǎo)入 Spartacus 庫文件的依賴，就可以進(jìn)行 Storefront UI 的二次開發(fā)工作了。

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

在 Partners 基于 SAP Spartacus 創(chuàng)建的 SAP Commerce Cloud UI Angular 應(yīng)用里，有一個自動生成的 styles.scss 文件，里面有一行 import 語句，導(dǎo)入了 SAP Spartacus 所有標(biāo)準(zhǔn)的 CSS styles：

我們可以在 styles.scss 文件里，對 SAP Commerce Cloud UI 的界面，按照需要進(jìn)行 CSS 調(diào)整。

舉個例子：假設(shè)我想調(diào)整購物車頁面里這行 “ORDER SUMMARY” 的外觀：

在 Chrome 開發(fā)者工具里，找到其對應(yīng)的選擇器為：cx-order-summary h4

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

最后運(yùn)行時的效果：

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

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

最后的運(yùn)行時效果：

更多閱讀

• 從產(chǎn)品展示頁面談?wù)凥ybris的特有概念和設(shè)計(jì)結(jié)構(gòu)

• 從產(chǎn)品展示頁面談?wù)凥ybris系列之二: DTO, Converter和Populator

• 從產(chǎn)品展示頁面談?wù)凥ybris系列之三：Hybris Service層介紹

• SAP Spartacus簡介

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

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

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

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

總結(jié)

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

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