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

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

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

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

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

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

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

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

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

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

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

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

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

看另一個(gè)舉一反三的需求：如果客戶想把 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 按鈕 ), 然后給其添加一個(gè)新的 CSS 類(lèi)：jerryButton.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更多閱讀

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

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

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

• SAP Spartacus簡(jiǎn)介

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

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

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

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

總結(jié)

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

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