Personal Insights

Alex Dong

October 9, 2022

如何开始SAP BTP无代码服务 – 构建一个端到端的BP展示页面

如果你从任何一个地方了解到SAP BTP的无代码解决方案AppGyver，开始有以下想法：

AppGyver是什么，长什么样
如何快速开始
纸上得来终觉浅，绝知此事要躬行，动手玩一玩

那么相信本篇文章会对你有用。

跟以往不同，这里不放架构图以免大家云里雾里。简单描述需求就是我们有SAP S/4 HANA的系统，然后该系统有一些OData API可以调用比如Business Partner，我现在想构建一个APP去跟该API进行交互，比如通过一个list展示然后实现翻页功能，同时又不想搞一堆前后期的开发工作，比如搭建开发环境，思考开发框架，测试部署等等，那么无代码开发工具AppGyver可以帮你快速实现这个需求。

概览

SAP AppGyver是 SAP 的专业无代码平台，使您能够构建适用于所有形式因素的应用程序，包括移动设备、桌面设备、浏览器等，它有以下特点：

SAP产品所以和SAP的系统有无缝集成
拖拽完成应用开发
跨平台部署
轻松集成后台API
有400+公式可以使用进行无代码逻辑转换
Web页面进行预览，无需搭建服务器

在S/4 HANA系统上激活标准OData Service

SAP的S/4 HANA系统上有很多标准的OData Serivce可以参考使用，这里我们采用Business Partner。激活方法如下，

步骤1:

1) 进入系统并输入Tcode STC01

2)Task列表：

注意：确保取消选择第二行。

3)输入数据生成器参数。

4)输入您的当地货币, 然后Enter。

5)然后Save。

执行。

6)您将获得绿色标志。

步骤 2：激活 OData 服务

1)启用Odata服务。

技术服务名称：

2.*API_BUSINESS_PARTNER

事务： /n/ IWFND /MAINT_SERVICE

添加服务

2)系统别名： LOCAL

API_BUSINESS_PARTNER *

3)选择 API_BUSINESS_PARTNER。添加选定的服务。

向下滚动。选择本地对象。

4)Odata服务现在应该反映在服务目录中

步骤3：检查服务

1)事务： SICF

2)搜索服务 ZAPI_BUSINESS_PARTNER 并单击执行。

3)右键单击服务然后测试服务

OData返回服务文档。

在 BTP Cockpit 中订阅 SAP AppGyver

1.在服务市场中搜索“ AppGyver ”并点击“创建”按钮订阅

注意：如果您在 Service Marketplace 中找不到它，请通过您的 BTP 全球账户下的“实体分配”菜单确保已将权利分配给您当前的子账户。

2.针对用户创建和分配角色集合 – LCNC_Administrator

请首先创建此角色集合并包含以下角色，“ AppGyverAdmin ”、“ AppGyverDeveloper ”、“Developer”、“ RegistryAdmin ”、“ RegistryDeveloper ”。

3.在 Instances and subscriptions 下，单击 SAP AppGyver的转到应用程序图标

4.您还应该准备好 S/4HANA 业务合作伙伴 API 的目的地，如下面的屏幕截图所示。这里就不展开了，其实说白了就是要配置好SAP的云连接器打通S4和BTP。请确保设置了两个属性，“HTML5.DynamicDestination”为真，“ WebIDEEnabled ”为真。

创建显示业务合作伙伴信息的AppGyver Web 应用程序

1.创建AppGyver项目

给项目命名“商业伙伴”

2.添加SAP BTP 身份验证

之后单击“启用身份验证”按钮。

3.将数据集成添加到 S/4 HANA 后端

选择与“业务伙伴”对应的目的地。之后，您可以看到数据实体列表。选择“ A_BusinessPartner ”并单击“启用数据实体”按钮。您可以点击“BROWSE DATA”预览载荷数据。

4.定义数据变量

在建立到 S/4 HANA 目标的连接后，下一步是创建一个将与此连接交互的数据变量。该变量将作为应用程序数据模型并执行 CRUD 操作，例如读取、删除、创建。

确保数据变量类型为“收集数据记录”，然后单击“分页”下的“X”按钮。

单击“具有属性的对象”。

如以下屏幕截图所示更改相应的值。

现在我们已经完成了集成和数据模型的设置。

5.添加 UI 控件

将标题名称更改为“Business Partners”并删除文本控件。

拖动“列表项”并放在标题下。

单击列表项，然后单击“重复”。

单击“数据和变量”。

点击“数据变量”

选择数据变量“A_BusinessPartner1”。

回到UX设计页面，点击“Primary label”下的“ABC”按钮。

点击“重复数据项”

选择“ BusinessPartnerFullName ”并单击“保存”。

同样，回到UX设计页面，对“Secondary label”执行相同的步骤，选择“ BusinessPartner ”作为绑定字段。现在你的页面应该是这样的。单击“保存”按钮。

6.从预览门户进行测试

单击“LAUNCH”菜单并打开预览页面。

打开一个新选项卡，您应该会看到包含业务伙伴结果的页面。

7.添加分页功能

接下来让我们通过两个按钮添加分页功能，一个用作上一页，另一个用作下一页。

从“布局”面板下的左侧拖动 UI 控件“行”。将其放在列表下方。

然后，将两个按钮拖放到该行的每个单元格中。

将名称更改为“ Prev ”和“Next”。您还可以通过右侧的“样式”选项卡指定按钮样式。

通过右侧的“LAYOUT”选项卡更改“ Prev ”按钮的一些布局设置。

同样，对“下一步”按钮执行相同的操作。请注意，您需要将位置更改为右对齐。

下一步是为这两个按钮添加逻辑。

首先，我们需要创建一个控制当前页面索引的变量。点击“查看-变量”，切换到变量页面。

创建“页面变量”并将其命名为“页面”。将数据类型设置为“数字”并赋予初始值“1”。

返回 UX 设计页面并点击“ Prev ”按钮。在底部，将“LOGIC”面板向上滚动一点，然后将“Set page variable”拖到逻辑空白区域。

通过拖动线连接将“组件点击”事件连接到“设置页面变量”。

点击“设置页面变量”，在右侧点击“赋值”下的绑定按钮。然后点击“公式”。

这里我们给出减法的逻辑SUBTRACT( pageVars.page,1)，当点击“ prev ”按钮时，页面将是最后一页。

但是请注意，当我们停留在第一个列表页面时，我们不需要显示这个“ Prev ”按钮。因此，让我们单击“保存”并返回按钮的属性。单击“可见”下的按钮并设置“公式”。这里我们可以给出一些条件NOT( IS_EQUAL( pageVars.page , 1))。因此，该按钮仅在我们不在第一页时可见。

单击“保存”并返回到逻辑流程。由于我们已经更新了页码，我们需要调用后端服务来刷新数据，然后将其设置到我们的数据模型中。将“获取记录集合”从左侧面板拖放到“设置页面变量”后面。同时将“设置数据变量”拖放到“获取记录集合”后面。正如以下屏幕截图所示。

点击“获取记录集合”。在右侧属性面板上，单击“分页”下的按钮。然后选择“具有属性的对象”。我们需要在操作中指定寻呼号。

如以下屏幕截图所示填写数据。我们将页面大小设置为 10，将页码设置为变量“page”，我们将通过“ Prev ”和“Next”按钮进行控制。

单击“保存”并返回到逻辑流程面板。现在单击“设置数据变量”。在右侧属性面板中，单击“记录集合”下的绑定按钮，然后选择“另一个节点的输出值”。如下图所示设置绑定，

点击“保存”。至此我们完成了“ Prev ”按钮的逻辑。现在让我们对“下一步”按钮重复相同的步骤。不同的是，当我们单击“下一步”按钮时，页码应通过ADD( pageVars.page , 1) 为 +1。

现在页面看起来像这样。

8.添加详情页面

我们希望在单击每个业务伙伴数据时显示详细信息页面。让我们通过单击左上角的页面标题来添加另一个页面。然后单击“添加新页面”。将页面名称命名为“BP 详细信息”，它应该会打开新的详细信息页面。

注意：您可以随时在此处切换页面。

在我们操作 UI 控件之前，我们需要指定一个数据变量和一个页面参数。通过点击“View & Variables”切换按钮切换到变量视图。选择左侧的“DATA VARIABLES”并添加数据变量“Business Partner”。选择“PAGE PARAMETERS”并添加参数“ BusinessPartnerID ”。

在右侧属性面板上，选择“单条数据记录”。点击绑定按钮，选择页面参数“ BusinessPartnerID ”作为输入。