回到第一部分

回到第二部分

回到第三部分

引言

欢迎来到这个博客系列的第四部分。如果您是本博客系列的新手，请使用上面的链接遵循本部分的先决条件，因为我们将直接进入本主题。

在本部分中，我们将创建一个插件，它将直接从SAP客户结帐UI中的出纳处收集数据。这部分我们将使用零售用户界面。用例是为所有临时客户提供一个客户年龄的输入字段。为此，我们将学习如何将javascript注入到salescreen中，创建html代码，对收据发布做出反应，通过REST POST将数据发送到我们的插件。我们还将创建一个用户定义的表来保存来自前端的数据，并以收据键作为参考。

当SAP Customer Checkout将收据发送到B1i时，我们将使用一个插件出口来扩展具有客户年龄的数据。

在B1i站点上，我们将使用partner edge提供的B1i示例扩展方案，但我也将将其包含在git存储库中。最后，我们需要做的是在SAP Business One中添加一个UDF字段创建后端逻辑以接收输入数据创建用户定义的表以保存数据截取b1i的接收post以添加输入数据导入b1i示例扩展在SAP Business One中添加UDF

注入Javascript代码

像往常一样，我们创建了一个maven项目，其中我们的基类扩展了SAP Customer Checkout提供的BasePlugin类。如果您需要更多的细节，您可以再次阅读第一部分，我在其中更详细地描述了这一点。

设置您的插件的Id、名称和版本，好评返现图片，如屏幕截图所示。

要插入javascript代码，我们将使用SAP Customer Checkout提供的注解@JSInject。此批注需要设置属性targetScreen。这决定了我们的javascript将被注入哪个UI屏幕。对于我们的目的是屏幕"销售"。

您可以这样确定屏幕：启动CCO并导航到您要注入代码的屏幕。查看浏览器中的url:

第一个示例为"sales"，第二个示例为"cashdeskclosing"。

接下来，我们将寻找一个可以添加输入字段的地方。这将是放置输入框的最佳位置。

按F12打开谷歌chrome开发者工具。点击这个小图标。

通过这个功能我们可以选择html站点的某些部分来检查它的结构。

相应的div部分是客户区。让我们检查一下这个div的结构，并确定我们自己的输入区域的正确位置。

div customer区域分为customerInfoContainer div和salesDetails main div。因此我们将输入放在customerInfoContainer之后。

实现下面的方法来注入javascript代码：

您可能有注意，这个方法从我们的项目返回一个资源流，它实际上是一个javascript文件。这意味着我们需要创建这个javascript文件。

现在我们将添加javascript代码。代码分为三部分，购返利，我将大致解释。

在第一部分中，什么大数据，我们添加了自己的div，它将保存输入字段。使用jquery函数。之后，我们将确定div将放置在何处。这将是我们之前确定的customerInfoContainer.

第二部分是所谓的"猴子补丁"。收据上发生的大多数操作都将通过BasicReceiptActionCommand的execute函数运行。您可以使用google chrome的开发工具查看javascript代码。将原始execute保存在我们称为origMethod的变量中。

第三部分是实现我们自己的execute方法，云服务器怎么用，然后由SAP Customer Checkout调用。在我们的方法中，我们可以实现自定义代码。之后，我们调用之前在变量origMethod中保存的原始SAP Customer Checkout execute函数。

在我们的自定义代码中，我们首先检查SAP Customer Checkout是否要创建收据。

我们还需要确定当前receiptkey和输入的客户年龄。我们得到输入值的元素是#customerAge，它是我们输入的id（请参阅）。

由于我们想向我们的插件发送一些数据，我们将通过POST发送数据。因此，我们需要在http请求主体中以JSON的形式发送数据。

通过jquery函数"ajax"，我们现在在JSON主体中发送接收键作为URL参数和客户年龄。请参考官方jquery文档以获取更多信息。

如果我们的请求成功，我们将检查我们的插件是否以状态==1回答，以便我们可以重置UI中的输入字段。稍后我们将学习如何处理来自UI的请求以及如何从我们的插件发送响应。

在我们的POST请求之后，我们将调用之前存储在我们自己变量中的原始函数。

现在我们可以构建我们的插件，我们可以用输入字段看到新创建的div元素。

创建后端逻辑以接收输入数据

接下来我们需要实现的是一些逻辑来处理我们在javascript端实现的POST请求。为此，我们可以使用插件出口"PluginServlet.callback.post插件". 还有一个用于get请求的servlet，名为"PluginServlet.callback.get获取". 对于我们的用例，我们坚持post.