Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
AlexDong
Product and Topic Expert
Product and Topic Expert
如果你从任何一个地方了解到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,希望和大家一起进步学习。
2 Comments