这是Jerry 2021年的第 19 篇文章，也是汪子熙公众号总共第 290 篇原创文章。

本文分别针对 SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI，介绍两个通过更改 CSS 达到更改其 UI 显示风格的例子。

不少 SAP 产品都提供了个性化设置，允许 Key User 通过这些设置对 SAP 产品 UI 风格进行微调。下图是 SAP Cloud for Customer 个性化设置的界面。

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

除了这些个性化设置外，更灵活的界面风格调整，通常采用二次开发的方式进行。

Jerry 2015年所在的 SAP 成都研究院 CRM Fiori 开发团队，负责一个名叫 My Opportunities 的 Fiori 应用，该应用没有采取现在流行的 Fiori Elements + CDS view 实现，而是直接采用原生的 SAP UI5 开发而成。

当时有个客户，对 Fiori 应用 Footer 工具条里的 Edit 按钮的蓝色背景色提出质疑，因为该客户使用 Android 设备访问该应用，在 Android 设备上，任何按钮被点击的瞬间，背景都会被蓝色高亮。因此当时 SAP UI5 Edit 按钮这个默认显示的蓝色背景色，让客户很难区分该按钮是否真正被点击过。

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

因此客户联系 SAP，询问是否能够将该 Edit 按钮的蓝色背景色去掉，让其和上图右边的 Follow Up 及 Messages 按钮显示风格一致。
 
Jerry 接到客户的抱怨后，分析了 SAP UI5 Footer 工具条的源代码，发现 Edit 按钮的蓝色背景色是有意为之：按照 Fiori UX Guideline，Edit 按钮的语义类型是 Emphasized ( 下图第87行的代码：sap.m.ButtonType.Emphasized)

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

而在 SAP UI5 标准的 CSS 文件里，Emphasized 类型的按钮，背景色被设置为深蓝色。

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

搞清楚 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行 ).

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

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

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

关于这个客户需求的更多细节，请参考我当时写的[博客](https://blogs.sap.com/2015/08/26/how-to-remove-the-blue-background-color-of-edit-button-in-footer-toolbar/).

看另一个举一反三的需求：如果客户想把 Edit 按钮旁边的 Follow Up 按钮的背景色设置成红色呢？

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

解决方案：在 SAP UI5 增强项目代码里，重新实现 SAP UI5 onAfterRendering hook, 找到 Follow Up 按钮的引用 ( 下图第二行 oButtonListHelper.aButtons 数组里，包含了 Footer 工具条里所有按钮，数组索引为1的元素即 Follow Up 按钮 ), 然后给其添加一个新的 CSS 类：jerryButton.

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

这个自定义的 CSS 类 jerryButton，嵌入在增强的 XML View 里，或者定义在增强项目自定义的 CSS 文件里均可。

最后的运行时效果：

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

下面再来说说 SAP Commerce Cloud (电商云) 的 UI 显示风格调整。

不同于 SAP CRM Fiori 应用，SAP Commerce Cloud UI 基于开源框架 SAP Spartacus，后者使用 Angular 进行开发，并通过 core，Storefront 和 styles 这些库文件的方式，发布给客户使用。

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

客户新建一个 Angular 应用，在 package.json里导入 Spartacus 库文件的依赖，就可以进行 Storefront UI 的二次开发工作了。

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

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：

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

我们可以在 styles.scss 文件里，对 SAP Commerce Cloud UI 的界面，按照需要进行 CSS 调整。

举个例子：假设我想调整购物车页面里这行 "ORDER SUMMARY" 的外观：

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

在 Chrome 开发者工具里，找到其对应的选择器为：cx-order-summary h4

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

然后在 styles.scss 里使用该选择器，覆盖掉 Spartacus styles 库里的原始设置即可：

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

最后运行时的效果：

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

假设我想把下图 Order Summary 和 Coupon 页面的文本颜色变成绿色，字体加粗：

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

为了减少工作量，避免对 Order Summary 和 Coupon 这两个区域对应的选择器，重复施加相同的 CSS 设置，我们可以将重复的 CSS 设置，定义在 %jerry-custom-div 里(类似编程语言里的宏), 然后在 cx-order-summary 和 cx-cart-coupon 里使用 @extend 直接引用这个公用定义。

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

最后的运行时效果：

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

# 更多阅读

*   [从产品展示页面谈谈Hybris的特有概念和设计结构](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247483969&idx=1&sn=06adb0a08f9a8e1177842a736bbb1efe&chksm=ead5b0d6dda239c0972f2cbceefe9884c75be07d03f087f0706463b16cc532823802d7891b6c&scene=21#wechat_redirect)

*   [从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484094&idx=1&sn=eb80fa4ac5c19066c343f7e9dbf850fb&chksm=ead5b029dda2393f58a1e46eb219db1dd724d654bdb89976ca16af0c42d59d2f55b21c10be38&scene=21#wechat_redirect)

*   [从产品展示页面谈谈Hybris系列之三：Hybris Service层介绍](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485067&idx=1&sn=aba6d36b14f03274e7a714e7d8413b90&chksm=ead5b41cdda23d0a07cf3a76dc6c6fe99dd7ba795d04ce7d358664ddffe3e0a96d8a6b8e034c&scene=21#wechat_redirect)

*   [SAP Spartacus简介](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490669&idx=1&sn=dd7ce8bf4c709266118f14e13a741d0b&chksm=ead5aefadda227ec4f677e23739e4bbf4628b74d7d46114f87694b098ca5c838c22f3d93bf0c&scene=21#wechat_redirect)

*   [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 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)

更多Jerry的原创文章，尽在："汪子熙":
![](https://img-blog.csdnimg.cn/img_convert/e4a8387dca5921e049fd05f96ef232ae.png)

ITPub博客

SAP CRM Fiori 应用和 SAP 电商云 UI 如何通过调整CSS来改变UI显示风格

最新文章