这是Jerry在2021年的第70篇文章，也是王子熙的第347篇原创文章公众号。Jerry之前在以下两篇文章中介绍了组成SAP产品UI的逻辑单元：UIComponents和UIContainerComponents。下面说说SAP产品UI开发中组件的概念。SAP产品UI中容器组件的概念和发展概览。当业务需要时，您可以考虑创建自定义SAPUI。FieldExtensibilitySAPCloudforCustomerExtensionibilityofSAPproducts的设计与实现要创建一个SAP自定义UI，当然需要开发上面介绍的UI组件，通过这些UI组件将视觉效果呈现给最终用户，响应用户操作来实现业务逻辑。但是在很多SAP产品中，除了UI组件和UI容器组件之外，还多了一个Frame层，用来统一管理其中配置的UI组件和UI容器组件，完成session管理、UI组件初始化和应用生命周期管理。在基础设施层面开展工作。UIFrame最广为人知的典型代表当然是SAPFioriLaunchpad。本文以SAPCRM、SAPCloudforCustomer、SAPFiori和SAP电商云SpartacusUI为例，介绍了四款SAP产品中使用的UI开发技术，在这些SAP产品中，合作伙伴完成自定义UI组件的开发后，如何将它们配置到相应的UIFrame中。SAPCRM当我们使用WebClientUI完成一个SAPCRMUIComponent的开发时，我们可以点击开发工具中的测试按钮预览其外观：预览结果如下：请使用访问的产品详情页面用于查看上方和下方图像的SAPCRM登录页面。相比之下，不难发现SAPCRMUIFrame的身影，也就是下图中红色高亮区域，形状像一个倒置的大写字母L。在SAPCRMUIFrame中，分为根据不同的功能分成不同的子区域，其中业务用户几乎每天都访问的是WorkCenters和WorkCenterViews，这是业务用户使用SAP系统的入口。将UI组件配置到SAPCRMUIFrame的工作中心的详细步骤可以参考我在SAP社区发布的wiki页面。以下是在SAPCRMUIFrame中配置自研UI组件的部分效果图：SAPCloudforCustomer使用SAPC4C中的CloudApplicationStudio和UIDesigner，以所见即所得的方式完成新UI组件的开发。下图是SAPC4CSalesOrder搜索页面的实现组件，SalesOrderOWL（ObjectWorkList）的开发接口，其ID为COD_SAKESORDER_OWL：这个UI组件也是嵌入在SAPC4CUIFrame的时候运行，图中左侧绿色区域是SAPC4CUIFrame的一部分，包含工作中心入口和工作中心视图。运行时，我们在浏览器中打开上面的Sales工作中心，访问SalesOrder工作中心视图，在Chrome开发者工具中观察容器组件的路径：/BYD_COD/SalesOnDemand/SalesOrder/UI/COD_SALESORDER_WCVIEW.WCVIEW.uiwocview根据检查UIDesigner中的路径，结果发现工作中心视图包含UI组件COD_SAKESORDER_OWL。因此，在SAPC4C中，将组件合并到UIFrame中最直接的方法是将其分配给工作中心视图。另外，在EmbeddedComponent中加入自定义的UI组件，然后使用UI增强将后者嵌入到SAPC4C的其他标准UI组件中，也可以达到同样的目的。更具体的将自定义UI合并到SAPC4CUI操作系统的步骤可以参考我的文章：HowtoembedacustomUISAPFioriontheSAPCloudforCustomerpageSAPFioriUI没有采用工作中心和工作中心的概念view，作为用户访问SAPUI5应用程序的入口点。开发人员使用BusinessApplicationStudio或VisualStudioCode等开发工具完成SAPUI5应用的开发后，需要在FioriLaunchpad上进行配置，最终用户可以通过点击Tile来访问这些组件。Tile和SAPUI5应用程序之间存在一一对应关系。以SAPCRMFiori为例，当点击Launchpad上的某个Tile比如MyOpportunities时，SAPUI5框架向后台Gateway系统发起的第一个INTEROP请求就是请求该Tile对应的SAPUI5应用信息：在请求的响应数据中，包含了这个SAPUI5应用在Gateway系统中的存储路径，如下图所示：在SAPS/4HANAFioriLaunchpad中，这个请求返回的响应包含了SAP的更多细节被点击的Tile对应的UI5应用。比如我们点击ServiceContractIssuesTile：在响应数据中，我们可以查看到基于SAPUI5应用的OData服务名称和SAPUI5应用的ID：F4032根据这个ID，去Jerry的文章SAPFiori应用索引大全提到官网查询，可以获得更多SAPUI5应用的技术和配置细节：如何将SAPUI5应用配置到FioriLaunchpad，可以参考我的文章：SAPFioriLaunchpadTile,UI5application,与PFCG角色对应关系。SAP电商云SpartacusUISAP电商云SpartacusUI是基于Angular开发的，在AngularRoute框架的基础上做了一层路由封装。这个封装层就是本文讨论的UIFrame。如果我们绕过UIFrame，直接一个自定义的AngularComponent，通过AngularRouterModule并入到Spartacus路由系统中，然后通过配置好的路由路径访问，会怎么样呢？我们在Spartacus应用中配置一个新的路由路径：当路由路径更改为jerry时，会触发一个到JerryComponent的路由。下图是SAP电商云SpartacusUI的默认首页：在地址栏的网址末尾输入jerry，回车，会看到一个非常难看的页面。上面主页中包含的语言和国家下拉列表、购物车图标、登录用户名、SAPLogo等元素全部消失。原因是SAP电商云的SpartacusUIFrame中没有包含Angular组件JerryComponent。之前Jerry介绍过，SAPEcommerceCloudUI是以CMS驱动的方式设计的，所以如果我们要创建一个自定义页面，我们需要先在CommerceCloud后台系统中创建一个CMSContentPage，然后创建相应的Angular组件。我们可以在SAPCommerceCloudBackoffice，或者在SmartEdit，或者在HAC中导入Impex新建一个ContentPage：上图中Impex的内容是新建一个ContentPage，id为jerryOrderPage，赋值给页面模板AccountPageTemplate，页面标签为/my-account/jerry-order。后者将用作SpartacusUI路由路径。继续为此页面创建一个ContentSlot和JerryOrderComponent，并将后者分配给新创建的ContentSlot。两者都是SAPCommerceCloudCMS的独特概念。具体可以参考Jerry之前的文章：SAPProductUI中容器组件的概念和开发概述。最后在Spartacus中新建一个AngularComponent，并将其映射到上面刚刚在SAPCommerceCloud后台创建的CMSComponent，这样就完成了自定义UI创建的完整步骤。这个自定义UI在SAP电商云SpartacusUI中的显示效果如下，可以观察到预期的UIFrame又回来了。至此，SAPUI开发中的UI组件、UI容器组件和UIFrame三大要素介绍完毕。感谢您阅读。SAPUI和SalesforceUI开发浅谈SAP同线产品的UI增强思路，体现在SAPCommerceCloud（电商云）UI增强的实现响应式编程是UI开发中的一种实践SAP标准产品浅谈SAP产品UI开发组件的概念SAP产品UISEO搜索引擎优化-SearchEngineOptimization浅谈SAP产品UI上的消息展示机制SAP产品UI中容器组件的概念与开发概览SAP产品领域可扩展性SAPCloudforCustomerExtensibility的设计与开发实现Jerry更多原创文章，尽在：《汪子熙》：
