Personal Insights
如何开始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,希望和大家一起进步学习。
非常赞!
多谢支持