SAP同线产品的UI增强思想体现在SAPCommerceCloud（电商云）的UI增强实现上。在Cloud（电子商务云）UI增强中实现。Jerry上一篇文章：Jerry在2020SAP全球技术大会上的分享：SAPSpartacus技术介绍文字版。提到SAP电商云的新一代标准UI是由很多AngularComponents组成的。这些组件通过SAPSpartacus开源项目，作为库文件发布给客户。通过在Angular应用的package.json中导入@spartacus/storefront的依赖，客户可以访问SAP电商云的标准UIComponent。Jerry上一篇文章从一个实际例子出发，讲了SAPCommerceCloud（电商云）UI定制开发，介绍了SAP电商云UI的二次开发方式之一：UIComponent-basedreplacement。我们假设SAP电商云UI由SAP标准发布的AngularComponentsA,B,C,D...组成。Jerry文章中介绍的二次开发方法，分享伙伴们如何开发新的Angular组件A',B',C',D'...，然后如何通过配置告诉SAPCommerceCloudUI使用A',B',C',D'在运行时呈现UI。本文将介绍SAP电商云的另一种UI增强方法，不是通过开发一个新的ComponentA'来替换A，而是直接对A进行增强，比如增加一个新的字段a，嵌入到ComponentA中，这样A就变成了啊。这种在原有UI基础上增加新领域的增强方式并不是SAP电商云独有的，在很多其他SAP产品中也能看到。Jerry之前的文章《SAP产品增强技术回顾》曾经回顾了SAP产品的增强技术，包括字段和流程。在接口字段增强方面，比如在SAPCRM中，我们可以先创建一个数据库表，往里面插入一些数据，然后用AET（ApplicationExtensionTool）新建一个扩展字段JVM类型，类型是drop-downlist，下拉列表中的内容来自于我们自定义的数据库表。在使用SAPCRMAET创建扩展字段之前，首先要选择根据哪个BO创建哪个节点，即选择ObjectPart。创建的CRM扩展字段类型下拉列表如下：下图是SAPCloudforCustomer增强字段创建界面。业务上下文是一组可扩展的UI界面的逻辑抽象。针对某个业务场景创建的扩展字段会自动出现在相应的UI界面上。BusinessContext这个词会在SAPCommerceCloud中再次出现，不过它叫做Outlet。到目前为止，我们已经了解了SAPCRM中的对象部分和SAPCloudforCustomer中的业务上下文。这些概念用于定义要创建的增强字段的上下文，即增强字段在UI（以及其他模型，如BO、界面等）中出现的具体位置。在SAPCRMFiori应用程序中，增强字段上下文的名称变为：ExtensionPoint。看看我指导合作伙伴完成的实际增强需求。SalesOffice和SalesGroup是SAPCRMWebClientUI上的标准字段：但是这两个字段不会出现在相应的CRMFiori应用程序中。但是合作伙伴仍然可以使用Fiori应用UI上预留的ExtensionPoint，即salesAreaInfoTabContentBottomExtension，将这两个字段添加到FioriUI中：将视图片段配置为salesAreaInfoTabContentBottomExtension。最后，视图片段中包含的自定义字段会出现在Fiori应用的SalesArea面板的相应位置，如下图：至此，我们介绍的SAP产品中定义扩展字段上下文的术语学习过的列举如下：SAPCRM:ObjectPartSAPCloudforCustomer:BusinessContextSAPCRMFiori:ExtensionPoint通过以上方法在SAP标准UI上创建的增强字段，不是直接修改标准UI源码实现的。与增强型UI相比，增强型字段在物理上是不同的模型，存储逻辑也不同。因此，这种增强方式升级是安全的。即使标准UI发生变化，只要扩展字段上下文保持稳定，那么增强型UI上的这些扩展字段将不会受到SAP标准UI升级或错误修复的影响。以下是SAPCommerceCloud中扩展字段上下文概念的名称：Outlet。有了这么多铺垫，就不难理解SAPCommerceCloudUI的字段增强方法的工作原理了。下图中黑色区域是SAP电商云的页脚区域。假设我们需要在页脚区域的顶部和末尾添加一些自定义字段。更专业的说，我们需要根据自定义字段的上下文创建一些自定义字段，也就是Outlet=footer的UI区域。具体方法：在Chrome开发者工具中找到页脚区域的ID：cx-footer。新建一个AngularComponent（类似于SAPCRMFiori的ViewFragment），使用其中的cxOutletRef指令设置两个新字段beforefooter和Afterfooter，关联ID为cx-footer的Outlet（类似于SAPCRMFiori的ExtensionPoint），它出现的位置由cxOutletPos指定为before和after，即希望这两个扩展字段分别出现在SAPCommerceCloud页脚区域的前后。上次运行这两个扩展字段的展示效果：与其他SAP产品相比，由于SAPCommerceCloudUI是基于Angular的，借助Outlet，你不仅可以像SAP一样通过插入普通的HTML标签来添加增强字段CRMFiori，并且可以使用Angular模板表达式来达到添加新逻辑的目的。比如在SAPCommerceCloud的商品详情页面，我在OutletProductDetailsPageTemplate的基础上新建了两个字段，一个字段是h1静态标签，一个是p标签的内容。我使用Angular异步管道订阅product$，然后以json格式显示当前内容。商品所有数据：当前商品的数据详情，绑定到product$，一个Observable对象，通过注入的CurrentProductService服务调用getProduct方法返回。上次运行时SAP电商云产品详情页显示的两个增强字段效果如下：至此，本文通过在SAPCRM、SAPCloudforCustomer、SAPCRMFiori中创建扩展字段实现UI，以及SAPCommerceCloud产品的增强需求一一介绍，将SAP产品的UI增强思路展示给大家。其实只要搞清楚其中一款SAP产品的增强实现细节，学习其他SAP产品时就很容易举一反三了。如果您对基于SAPSpartacus框架的新一代SAPCommerceCloudUI增强有任何疑问或需求，请联系我。我会收集您的反馈并与我的团队分享。谢谢阅读。阅读更多Jerry在2020SAP全球技术大会上的分享：SAPSpartacus技术介绍文本版SAP产品字段扩展性介绍基于SAPKyma的OrderArrangementEnhancementSAPCloud对客户扩展性的设计与实现从一个实际例子出发，谈谈浅谈SAPCommerceCloud电商云UI自定义开发SAPCommerceCloud（电商云）UISAPCRMFiori应用和SAPCommerceCloud（电商云）UI的延迟加载功能如何通过调整改变UI显示风格CSSSAPproductsEnhancedTechnologyReview更多Jerry原创文章，尽在：《王子熙》：
