关于crm:SAP-CRM-Fiori-应用和-SAP-Commerce-Cloud-电商云-UI-如何通过调整CSS来改变UI显示风格

35次阅读

共计 2495 个字符，预计需要花费 7 分钟才能阅读完成。

这是 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 间接援用这个专用定义。

最初的运行时成果：