关于sap:各种-SAP-产品的自定义-UI-创建和集成方法一览

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

Jerry 之前通过下列两篇文章，介绍了形成 SAP 产品 UI 的逻辑单元：UI 组件和 UI 容器组件。

谈谈 SAP 产品 UI 开发中的组件概念
SAP 产品 UI 里的容器组件的概念和开发概述

对于合作伙伴来说，当 SAP 产品规范 UI 即便通过上面两篇文章介绍的加强技术，也无奈满足客户非凡的业务须要时，就能够思考创立自定义的 SAP UI 了。

SAP 产品的 Field Extensibility
SAP Cloud for Customer Extensibility 的设计与实现

创立 SAP 自定义 UI，当然须要开发前文形容的 UI 组件，通过这些组件出现视觉效果给最终用户，并响应用户操作，实现业务逻辑。然而很多 SAP 产品，除了 UI 组件和 UI 容器组件之外，还存在一个额定的 Frame 层，用来对立治理配置于其中的 UI 组件和 UI 容器组件，实现会话治理，UI 组件初始化以及利用生命周期治理等基础设施层面的工作。UI Frame 最为人所知的典型代表，当然就是 SAP Fiori Launchpad.

本文以 SAP CRM，SAP Cloud for Customer，SAP Fiori 和 SAP 电商云 Spartacus UI 这四种 SAP 产品里用到的 UI 开发技术来举例说明，在这些 SAP 产品里，当合作伙伴实现自定义 UI 组件开发之后，如何将其配置到对应的 UI Frame 中去。

当咱们应用 WebClient UI 实现一个 SAP CRM UI Component 开发后，能够在开发工具里点击 Test 按钮预览其外观：

预览后果如下：

大家把上图和下图通过 SAP CRM 登录页面拜访的产品明细页面进行比拟，不难发现 SAP CRM UI Frame 的身影，即下图红色高亮区域，形如一个颠倒的大写字母 L.

SAP CRM UI Frame 里，依照实现性能的不同，又分为不同的子区域，其中业务用户简直每天都会拜访到的是工作核心 (Work Centers) 和工作核心视图 (Work Center Views)，二者是业务用户应用 SAP 零碎的入口所在。

对于将 UI 组件配置到 SAP CRM UI Frame 的 Work Center 中去的具体步骤，请参考我在 SAP 社区上公布的 wiki 页面。

上面是一些自开发的 UI Component 配置到 SAP CRM UI Frame 之后的效果图：

在 SAP C4C 里应用 Cloud Application Studio 和 UI Designer 以所见即所得的形式实现新的 UI 组件开发。下图是 SAP C4C Sales Order 搜寻页面的实现组件，Sales Order OWL(Object Work List) 的开发界面，其 ID 为 COD_SAKESORDER_OWL:

该 UI 组件运行时同样被嵌入到 SAP C4C UI Frame 之中，下图右边绿色区域为 SAP C4C UI Frame 的一部分，蕴含了工作核心和工作核心视图的入口。

运行时咱们浏览器里关上上图 Sales 工作核心，拜访 Sales Order 工作核心视图，在 Chrome 开发者工具里可能察看到该容器组件的门路：

/BYD_COD/SalesOnDemand/SalesOrder/UI/COD_SALESORDER_WCVIEW.WCVIEW.uiwocview

依照该门路到 UI Designer 里查看，果然发现该工作核心视图里蕴含了 COD_SAKESORDER_OWL 这个 UI 组件。

因而，在 SAP C4C 里，要将一个组件纳入 UI Frame 的最间接方法，就是将其调配给一个工作核心视图。

除此之外，将自定义 UI 组件增加到 Embedded Component，再应用 UI 加强形式，将后者嵌入到 SAP C4C 其余规范 UI 组件里，也能达到同样的目标。

对于更多将自定义 UI 纳入 SAP C4C UI 运行体系的具体操作步骤，请参考我这篇文章：如何在 SAP Cloud for Customer 页面嵌入自定义 UI

SAP Fiori UI 并没有采纳工作核心和工作核心视图的概念，来作为用户拜访 SAP UI5 利用的入口。

开发人员应用 Business Application Studio 或者 Visual Studio Code 等开发工具实现 SAP UI5 利用开发之后，须要将其配置到 Fiori Launchpad 上，最终用户能力通过点击 Tile 的形式拜访到这些组件。Tile 和 SAP UI5 利用具备一一对应的关系。

以 SAP CRM Fiori 为例，点击 Launchpad 某个 Tile 比方 My Opportunities 时，SAP UI5 框架向后盾 Gateway 零碎发动的第一个 INTEROP 申请，就是询问该 Tile 对应的 SAP UI5 利用信息：

该申请的响应数据里，蕴含了此 SAP UI5 利用在 Gateway 零碎中的存储门路，如下图所示：

在 SAP S/4HANA Fiori Launchpad 里，这个申请返回的响应，蕴含了被点击的 Tile 对应的 SAP UI5 利用更多的明细。

比方咱们点击 Service Contract Issues 这个 Tile：

在响应数据里，能查看该 SAP UI5 利用基于的 OData 服务名称，以及 SAP UI5 利用的 ID：F4032

依据此 ID 到 Jerry 这篇文章 SAP Fiori 利用索引大全 提到的网站上进行查问，能失去该 SAP UI5 利用的更多技术和配置细节：

对于如何将 SAP UI5 利用配置到 Fiori Launchpad，请参考我这篇文章：SAP Fiori Launchpad Tile，UI5 利用，和 PFCG Role 的对应关系 。

SAP 电商云 Spartacus UI 基于 Angular 开发，在 Angular Route 框架的根底上做了一层路由封装，该封装层即本文始终探讨的 UI Frame.

如果咱们绕过该 UI Frame，间接将一个自定义的 Angular Component，通过 Angular RouterModule 将该组件纳入到 Spartacus 路由体系中去，而后通过配置好的路由门路拜访该组件，后果会如何呢？

咱们在 Spartacus 利用里配置一条新的路由门路：当路由门路更改为 jerry 时，会触发到 JerryComponent 的路由。

下图是 SAP 电商云 Spartacus UI 默认的 homepage：

在地址栏 URL 尾部输出 jerry，回车，会看到一个很俊俏的页面。上图 homepage 里蕴含的语言和国家下拉列表，购物车图标，登录用户名，SAP Logo 等元素通通隐没了。

究其原因，是因为该 Angular 组件 JerryComponent 并没有被纳入到 SAP 电商云的 Spartacus UI Frame 中去。

Jerry 之前曾经介绍过，SAP 电商云 UI 采取 CMS 驱动的形式设计，因而咱们要想新建一个自定义页面，须要先在 Commerce Cloud 后盾零碎里创立一个 CMS Content Page，而后为该 CMS 页面创立一个对应的 Angular 组件。

咱们能够在 SAP Commerce Cloud Backoffice 里，或者在 SmartEdit 里，或者通过在 HAC 里导入 Impex 的形式，创立新的 Content Page：

上图的 Impex 内容为，创立一个 Content Page，id 为 jerryOrderPage, 调配给页面模板 AccountPageTemplate, 页面 label 为 /my-account/jerry-order. 后者会作为 Spartacus UI 路由门路应用。

持续为该页面创立 ContentSlot 和 JerryOrderComponent，并将后者调配给新建的 ContentSlot 去。二者都是 SAP Commerce Cloud CMS 特有的概念，细节请参考 Jerry 之前的文章：SAP 产品 UI 里的容器组件的概念和开发概述 。

最初，在 Spartacus 中新建 Angular Component，并映射到上述刚刚在 SAP Commerce Cloud 后盾创立的 CMS Component，即实现了自定义 UI 创立的残缺步骤。

这个自定义 UI 在 SAP 电商云 Spartacus UI 中显示成果如下，能够察看到冀望的 UI Frame 又回来了。

至此 SAP UI 开发中的 UI 组件，UI 容器组件和 UI Frame 三大因素全副介绍结束，感激浏览。

SAP UI 和 Salesforce UI 开发漫谈
SAP 产品一脉相承的 UI 加强思路，在 SAP Commerce Cloud(电商云) UI 加强实现中的体现
响应式编程在 SAP 规范产品 UI 开发中的一个实际
谈谈 SAP 产品 UI 开发中的组件概念
对于 SAP 产品 UI 的搜索引擎优化 SEO – Search Engine Optimization
聊聊 SAP 产品 UI 上的音讯显示机制
SAP 产品 UI 里的容器组件的概念和开发概述
SAP 产品的 Field Extensibility
SAP Cloud for Customer Extensibility 的设计与实现

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