使用sapui5库设计一个内容丰富且用户友好的web应用程序可能有很多种方法。然而，设计这样一个应用程序，保持后端ERP的核心功能完整，是一项具有挑战性的任务，特别是当涉及到ESS福利登记时。

本博客讨论了关键的设计挑战和解决方案架构，这些都是在为ESS开发一个移动友好的web应用程序时确定和遵循的使用SAP UI和HR-BN组件的权益注册。

目标

使用SAP UI5库将ESS权益注册应用程序数字化转换为用户友好、设备和浏览器无关的web应用程序，将HR-BN组件作为核心。

背景

我们不想重新发明轮子，也不想从头开始设计整个福利模块。我们的想法是利用SAP提供的所有功能、配置和处理逻辑，同时在其上进行一些增强和添加，大数据对比，以适应新的UI，反之亦然。换言之，UI和后端功能必须相互支持，以适应彼此的需要。

对于我们的生产性使用，企业应用开发，我们主要关注以下类别，如果需要，我们可以将解决方案扩展到其他类别和计划类型。

健康计划和受养人储蓄账户支出账户保险计划其他库存计划

挑战

解决方案简而言之

持久性数据存储

创建了一个自定义存储库（注册购物车）作为持久性存储库，存储用户使用生成的报价对其进行的选择和更改。我们从下面的结构中获取了最常见和必需的属性来构建这个存储库RPBEN\ U CONTRIB\ U TRANS公司RPU贡献RPBEN\ U CONTRIB\ U限制rpbendp

此存储库中的数据是临时的，一旦用户退出应用程序，这些数据就会被删除。这类似于今天在基于FPM的ABAP Webdynpro应用程序中使用共享内存缓冲区实现的持久性。

网关服务

设计并开发了一种全新的定制网关服务，用于向前端用户界面提供数据。每个类别都有自己的信息类型，因此需要网关模型中的一个实体。

该模型基于一个单一的利益领域，所有属性大多从SAP中可用的标准DDIC结构（RPBEN*）导入。每个父实体和子实体之间的关系/关联是使用所有信息类型的公共键属性创建的。

调整原因→计划类型计划类型→健康计划健康计划→家属计划类型→节省计划类型→保险计划类型→支出计划类型→库存计划类型→其他调整原因→注册购物车

该服务处于软状态，允许在前端UI5应用程序对网关服务的第一个OData entityset调用中使用BAPI\ EMPLOYEE\ U enqueue对员工创建锁（排队）。

有几个标准SAP提供的功能模块和RFC可以帮助您获得提供、参与计划、验证选择并保存对信息类型的更改（下面列出了一些重要的更改）。他们需要按一定的顺序被调用，工业物联网，以便在整个应用生命周期内保持报价、选择和更改的一致性和干净性。

HR\U BEN\U ESS\U RFC\U ENRO\U REASONS→获取符合条件的调整原因列表HR\u BEN\u ESS\u GET\u LATEST\u OFFER→获取所选注册事件的报价HR\u BEN\u ESS\u GET\u OVERVIEW\u DATA→获取当前参与情况的概述HR\ U BEN\ U ESS\ U MODIFY\ U PLANS→添加/更新报价中的选项人力资源部检查一致性→进行全面验证HR\u BEN\u ESS\u SAVE\u PLANS→将所选内容提交到Infotypes

关键考虑事项–

确保将员工所选内容添加/更新到购物车中，并在更新前后进行验证，以便全面检查计划并验证任何先决条件或共同条件。→Addresses Challenge 1

UI5 Application

UI5应用程序的设计使得对后端的HTTP/oData调用的数量得到优化，并且仅在需要时的关键实例中使用。如上图所示，只有在4个事件中才会触发呼叫。

应用程序初始加载将为员工获取符合条件的调整原因列表，同时也为PREL创建一个锁。如果锁定失败，应用程序应该让用户知道此时无法注册。

只要用户驻留在应用程序中，并且在用户退出应用程序或关闭浏览器窗口为员工解锁PREL时调用webRFC，该锁定就会保持。我们在这里选择了使用$.ajax的webRFC调用，大数据中心是什么，而不是常规的oData调用。→解决问题2

如果事件"beforeunload"不起作用，您也可以使用浏览器窗口事件"unload"。

选择调整原因会为员工带来最新报价，并且所有数据都存储在涉及的每个信息类型/类别的全局JSON模型中。这些全局JSON模型可以使用sap.ui.getCore（）.setModel（），并且可以在需要绑定或创建本地副本时使用sap.ui.getCore（）.getModel（）.

为每个福利类别创建一个单独的视图和关联控制器，以显示符合条件的计划和提供的计划类似地，它们各自的细节/相关选择。每当用户导航到"计划概述"或"特定详细信息/相关视图"时，将根据注册购物车中的数据创建和调整全局JSON模型的本地副本，并刷新绑定。

我们使用jquery$.extend函数创建本地副本，并根据购物车中已存储的数据调整报价数据。→解决挑战3

关键注意事项–

当用户导航到登录页或退出应用程序时，存储在全局内存中的JSON模型被清除，注册购物车被刷新。

尝试用后端实体提供的属性/属性绑定细节视图上的各个元素（检查结构RPBEN\u SCREEN\u CTRL，RPBENOFFER等）它将处理通常由配置驱动的大多数事情。

例如：如果允许税前供款，则应根据指标显示或隐藏一个与税前供款字段分组的窗体。

某些福利类别（储蓄、股票和杂项）共享与之类似的成本/供款结构一定程度上，所以我们可以利用它来重用某些表单字段和

WebRFC↔ 消费者代理↔ 服务提供商

您可能想知道为什么如此复杂的体系结构被设计为只解锁锁定的PREL对象。原因如下：

为了在上述或未提及的任何情况下触发解锁而不出现任何问题，出现了使用代理服务用户终止软状态会话的想法。