Skip to Content
Personal Insights
Author's profile photo Alex Dong

如何开始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 ”作为输入。

 

 

切换回详细信息页面,将“行”拖到 UI 并将“文本”拖到行内的每个单元格内。将标签名称设为“名称”。

 

 

 

对于值文本,单击“内容”下的绑定按钮,然后选择“数据和变量”。从数据变量“Business Partner”中选择“ BusinessPartnerFullName ”作为绑定值。

对其他字段重复相同的步骤。

 

9.测试应用程序

单击顶部的“LAUNCH”按钮,然后单击“OPEN APP PREVIEW PORTAL”。这会将您重定向到一个单独的页面,您可以在其中看到应用程序的最新效果。

 

 

单击“下一步”将跳转到第二页。

 

 

单击任何列表项将重定向到详细信息页面。

第 6 步:部署到 BTP

 

现在我们已经开发了应用程序,我们希望将其作为 html5 应用程序部署到 BTP。

在“open build service”页面后,点击Web App下的“BUILD”。然后选择“MTAR”和客户端运行时。

给出版本号,例如0.0.1,然后单击“BUILD”按钮。这个过程通常需要一些时间,比如 5~10 分钟。

获得 MTAR 文件后,您需要通过命令行“CF deploy mtar name >”推送它。 mtar ”或通过 Business Application Studio。在本教程中,我们不会深入探讨。只需将mtar文件上传到文件夹并右键单击并部署。

 

部署后,您将看到应用程序出现在 html5 应用程序列表中(您必须先订阅 Launchpad 服务)。

 

打开它,然后您可以看到已部署的应用程序。

总结

作为CSP每天都要学习新的东西,AppGyver是一个快速变化的产品,尤其是BTP上还不止一个服务,所以对于快速学习挑战很大。即使这样,我也认为CSP在某种程度上=架构师或者Consultant而不是客服,要想给客户带来价值,也只能make hands dirty,希望和大家一起进步学习。

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Wilson Wei
      Wilson Wei

      非常赞!

      Author's profile photo Alex Dong
      Alex Dong
      Blog Post Author

      多谢支持