SAP 产品一脉相承的 UI 加强思路，在 SAP Commerce Cloud(电商云) UI 加强实现中的体现

时间 2021-03-21

标签数据库 json 安全框架 async 工具学习 spa 设计 3d 栏目云服务繁體版

原文原文链接

本文首先快速回顾几种 SAP 产品中的 UI 加强思路，而后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 加强中贯彻实施的。数据库

Jerry 以前的文章：Jerry 在 2020 SAP 全球技术大会的分享：SAP Spartacus 技术介绍的文字版，曾经提到，SAP 电商云的新一代标准 UI，由众多 Angular Component 组成，这些 Component 经过 SAP Spartacus 开源项目，以库文件的方式发布给客户使用。json

客户经过在 Angular 应用的 package.json 里，导入 @spartacus/storefront 的依赖，就能够访问到 SAP 电商云的标准 UI Component.安全

Jerry 以前的文章 从一个实际的例子出发，谈谈 SAP Commerce Cloud(电商云)的 UI 自定义开发，介绍了 SAP 电商云 UI 二次开发的方式之一：基于 UI Component 的替换。框架

咱们假设 SAP 电商云 UI 由 SAP 标准发布的 Angular Component A, B, C, D... 组成，Jerry 文章介绍的二次开发方式，分享了 Partners 如何开发新的 Angular Component A', B', C', D'... ，而后如何经过配置告诉 SAP Commerce Cloud UI，运行时使用 A', B', C', D' 来渲染 UI.async

本文会介绍 SAP 电商云另外一种 UI 加强方式，不是经过开发新的 Component A' 去替换 A，而是直接对 A 作加强，好比添加一个新的字段 a, 嵌入到 Component A 中，这样 A 就成为了 Aa . 工具

这种在原有 UI 基础上添加新字段的加强方式，并不是 SAP 电商云特有，在SAP 不少其余产品里也能看到。学习

Jerry 以前的文章 SAP产品加强技术回顾，曾经回顾过 SAP 产品包括字段和流程在内的加强技术。就界面字段加强而言，好比 SAP CRM 里，咱们能够先建立一个数据库表，插入一些数据进去，而后利用 AET( Application Extension Tool)，建立一个新的扩展字段 JVM Type，类型为下拉列表，下拉列表中的内容来自咱们自定义的数据库表。spa

在使用 SAP CRM AET 建立扩展字段以前，先要选择基于哪个 BO 的哪个节点来建立，即选择 Object Part. 设计

建立好的类型为下拉列表的 CRM 扩展字段以下：3d

下图则是 SAP Cloud for Customer 加强字段的建立界面。Business Context 是一组能被扩展的 UI 界面的逻辑抽象，针对某个 Business Context 建立的扩展字段，会自动出如今对应的 UI 界面上。这个术语 Business Context 在 SAP Commerce Cloud 里会再次出现，只是换了个称呼，叫作 Outlet.

至此，咱们已经了解了 SAP CRM 里的 Object Part，以及 SAP Cloud for Customer 里的 Business Context，这些概念都是用于界定待建立的加强字段的上下文，即加强字段出如今 UI (以及其余模型，好比 BO，接口等) 的具体位置。

到了 SAP CRM Fiori 应用里，加强字段上下文的称呼变成了：Extension Point.

看一个我以前指导 Partners 完成的实际加强需求。

Sales Office 和 Sales Group 是 SAP CRM WebClient UI 上的标准字段：

然而这两个字段并未出如今对应的 CRM Fiori 应用里。

不过，Partners 仍然能够利用该 Fiori 应用 UI 上预留的 ExtensionPoint，即 salesAreaInfoTabContentBottomExtension，来自行将这两个字段添加到 Fiori UI 上：

Partners 自行建立一个 view fragment，里面包含 Sales Office 和 Sales Group 两个字段：

而后将该 view fragment 配置到 salesAreaInfoTabContentBottomExtension 上便可。最后，包含在 view fragment 里的自定义字段，就会出如今 Fiori 应用 Sales Area 面板的对应位置，以下图所示：

至此，咱们了解到的 SAP 产品里定义扩展字段上下文的术语罗列以下：

SAP CRM：Object Part
SAP Cloud for Customer：Business Context
SAP CRM Fiori：ExtensionPoint

经过以上方式在 SAP 标准 UI 上建立的加强字段，并非经过直接修改标准 UI 源代码的方式实现的。加强字段同被加强的 UI 相比，两者物理上是不一样的模型，存储逻辑也各不相同，所以这种加强方式是升级安全的，即便标准 UI 发生变化，只要扩展字段上下文保持稳定，则被加强 UI 上的这些扩展字段，不会受到 SAP 标准 UI 升级或者故障修复的影响。

下面是扩展字段上下文概念在 SAP Commerce Cloud 里的称呼：Outlet. 有了前面这么多铺垫，也就不难理解 SAP Commerce Cloud UI 的字段加强方式的工做原理了。

下图黑色区域是 SAP 电商云的 footer 区域，假设咱们须要在 footer 区域的顶部和尾部，再增添一些自定义字段。换个更技术一些的说法，咱们须要基于自定义字段上下文，即 Outlet = footer 的 UI 区域，建立一些自定义字段。

具体作法：在 Chrome 开发者工具里找到 footer 区域的 ID：cx-footer.

建立一个新的 Angular Component(类比 SAP CRM Fiori 的 View Fragment)，在里面使用 cxOutletRef 指令，将两个新的字段 before footer 和 after footer，关联到 ID 为 cx-footer 的 Outlet 上(类比 SAP CRM Fiori 的 ExtensionPoint)，出现的位置分别用 cxOutletPos 指定成 before 和 after，即但愿这两个扩展字段，分别出如今 SAP Commerce Cloud footer 区域以前和以后。

这两个扩展字段最后运行时的显示效果：

同SAP 其余产品相比，由于 SAP Commerce Cloud UI 基于 Angular，因此借助 Outlet，不只能够像 SAP CRM Fiori 那样，经过插入普通的 HTML 标签来添加加强字段，并且能使用 Angular 模板表达式，达到添加新的逻辑的目的。

好比我在 SAP Commerce Cloud 产品明细页面，基于 ProductDetailsPageTemplate 这个 Outlet 建立了两个新的字段，一个字段为 h1 静态标签，另外一个 p 标签的内容，使用 Angular async 管道订阅 product$, 再以 json 格式显示当前产品的所有数据：

当前产品的数据明细，绑定到 product$ 上，一个 Observable 对象，经过注入的 CurrentProductService 服务调用 getProduct 方法返回。

最后运行时的两个加强字段，在 SAP 电商云产品明细页面显示的效果以下：

至此，本文经过 SAP CRM，SAP Cloud for Customer，SAP CRM Fiori，以及 SAP Commerce Cloud 产品里建立扩展字段来实现 UI 加强需求的逐一介绍，给你们展现了 SAP 产品一脉相承的 UI 加强思路。

实际上 SAP 这些产品的加强方式，只要弄清楚其中一个产品的加强实现细节，再学习其余SAP 产品时就容易触类旁通了。

你们若是对 SAP Commerce Cloud 新一代基于 SAP Spartacus 框架的 UI 加强有任何疑问或者需求，欢迎联系本人。我会搜集你们的反馈，分享给个人团队。

感谢阅读。

更多阅读

更多Jerry的原创文章，尽在："汪子熙":