设为首页收藏本站
开启辅助访问
SAP FIORI专题之二：用webide构建带导航栏的fiori 您所在的位置：网站首页 › wip在制品构建只能构建一次吗sap › SAP FIORI专题之二：用webide构建带导航栏的fiori

SAP FIORI专题之二：用webide构建带导航栏的fiori

2023-09-20 10:12| 来源: 网络整理| 查看: 265

带导航栏的fiori 1 master-detail简介2.相关程序2.1 后端service2.1.1 导入销售订单及行项目的Enitity Types，对应VBAK和VBAP两个表2.1.2 在Associations中建立两张表的关联关系2.1.3 发布生成模型层、数据层和服务层接口2.1.4 进入DPC的ABAP工作台写代码2.1.5 建后端服务2.1.6 测试 2.2 创建HCP测试账号，现在云端已经不是原先的web ide了，是升级版的2.3 配置connect2.3.1 进入https://tools.hana.ondemand.com/2.3.2 双击安装，默认登录https://localhost:8443/2.3.3 添加HCP注册获取的测试子账户2.3.4 云端到本地虚拟映射（利用RPC，这个暂时没研究）2.3.4 云端到本地虚拟映射（利用HTTP，主要用这种）2.3.5 添加资源 2.4 SCP配置到本地主机的链接2.5 新一代的web ide ，SAP Business Application Studio初入门2.5.1 确认cloud Founity是否启用2.5.2 订阅SAP Business Application Studio2.5.3 配置角色集合2.5.4 登录SAP Business Application Studio，创建空间 2.6 云端构建master-detail程序2.6.1 从模板构建2.6.2 运行，不会配置运行。。暂时放弃，新的SAP Business Application Studio资料太少了 2.7 本地环境web ide（这个目前资料多）2.7.1 下载IDE2.7.2 修改端口并启动2.7.3 新增配置文件2.7.4 启动，新建账户测试，看是否能读出来服务 2.8 继续创建master-detail程序2.8.1 输入一些关键信息2.8.2 测试运行，久违的期待的地址及内容可算出现了2.8.3 用postman可以测试后端地址，是一个好利器。 2.9 将master-detail程序发布到SAP服务器2.10 查看发布的应用2.10.1 查看事务代码：SICF，服务名称输入：ZLGZ*2.10.2 点击右键测试服务，如果启用了https，那么需要访问https的地址 2.11 将该服务配置到磁贴 3 遇到的坑3.1 第一个大坑就是云端的webide怎么用不知道3.2 第二个大坑就是服务器启用了https安全验证，链接要配置为https

1 master-detail简介

就是左右分割的，左边点击，右边跟随着变动。

现在SAP已经从webide升级到SAP Business Application Studio，在云端的开发环境已经找不到webide了，替换为SAP Business Application Studio，而SAP Business Application Studio功能更强大，支持将程序发布到云环境、本地以及sap服务器中，但是受限于资料很少，目前仅测试SAP Business Application Studio能基于模板构建程序，但是怎么运行和发布，还没研究出来。。这个以后再查官方文档详细研究。

2.相关程序 2.1 后端service 2.1.1 导入销售订单及行项目的Enitity Types，对应VBAK和VBAP两个表

1.VBAK 在这里插入图片描述 在这里插入图片描述

在这里插入图片描述

2.VBAP 在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.1.2 在Associations中建立两张表的关联关系

其中Navigation Property用于两个表之间的导航，这样前台可以引用该属性获取数据 其中SaleOrderToItems代表关联关系的名，OrderToItem代表关联的属性 在这里插入图片描述

在这里插入图片描述 在这里插入图片描述

这样在销售订单的ET里面，就多了一个导航属性了

在这里插入图片描述

2.1.3 发布生成模型层、数据层和服务层接口

就是DPC MPC等 在这里插入图片描述

2.1.4 进入DPC的ABAP工作台写代码

1.销售订单抬头，SALEORDERSSET_GET_ENTITY方法，获取某一具体销售订单，把抬头的数据放到et_entityset： 可以接收条件

DATA ls_key LIKE LINE OF it_key_tab. DATA lv_value TYPE vbak-vbeln. CLEAR ls_key. READ TABLE it_key_tab INTO ls_key WITH KEY name = 'Vbeln'. lv_value = ls_key-value. CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT' EXPORTING input = lv_value IMPORTING output = lv_value. SELECT SINGLE * INTO CORRESPONDING FIELDS OF er_entity FROM vbak.

2.销售订单抬头SALEORDERSSET_GET_ENTITYSET方法，获取所有销售订单

DATA: lw_entityset LIKE LINE OF it_filter_select_options, lr_netwr LIKE lw_entityset-select_options. DATA: ls_order LIKE LINE OF it_order, ls_sortorder TYPE abap_sortorder, lt_sortorder TYPE abap_sortorder_tab. * "过滤 IF it_filter_select_options[] IS NOT INITIAL. CLEAR lw_entityset. CLEAR: lr_netwr[]. LOOP AT it_filter_select_options INTO lw_entityset. CASE lw_entityset-property. WHEN 'Netwr'. lr_netwr = lw_entityset-select_options. ENDCASE. ENDLOOP. SELECT * INTO CORRESPONDING FIELDS OF TABLE et_entityset FROM vbak UP TO 100 ROWS WHERE netwr IN lr_netwr. ELSE. SELECT * INTO CORRESPONDING FIELDS OF TABLE et_entityset FROM vbak UP TO 100 ROWS. ENDIF. "排序 IF it_order[] IS NOT INITIAL. CLEAR lt_sortorder[]. LOOP AT it_order INTO ls_order. CLEAR ls_sortorder. ls_sortorder-name = ls_order-property. IF ls_sortorder-name = 'Vbeln'. ls_sortorder-name = 'VBELN'. ELSEIF ls_sortorder-name = 'Netwr'. ls_sortorder-name = 'NETWR'. ENDIF. IF ls_order-order = 'desc'. ls_sortorder-descending = 'X'. ELSE. ls_sortorder-descending = ''. ENDIF. APPEND ls_sortorder TO lt_sortorder. ENDLOOP. SORT et_entityset BY (lt_sortorder). ENDIF.

3.行信息，SALEORDERITEMSSE_GET_ENTITYSET方法根据抬头过滤的数据放到et_entityset：

DATA ls_key LIKE LINE OF it_key_tab. DATA lv_value TYPE vbak-vbeln. CLEAR ls_key. READ TABLE it_key_tab INTO ls_key WITH KEY name = 'Vbeln'. lv_value = ls_key-value. CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT' EXPORTING input = lv_value IMPORTING output = lv_value. SELECT * INTO CORRESPONDING FIELDS OF TABLE et_entityset FROM vbap WHERE vbeln = lv_value. 2.1.5 建后端服务

在这里插入图片描述

2.1.6 测试

1.单独测试销售订单 在这里插入图片描述 2.单独测试行项目

在这里插入图片描述 3.测试销售订单上加上关联条件，如果在销售订单加上?$expand=OrderToItem，这样就能把销售订单+行信息能全部取出来。

在这里插入图片描述

其中OrderToItem就是下图中建的关联关系

在这里插入图片描述

在这里插入图片描述

2.2 创建HCP测试账号，现在云端已经不是原先的web ide了，是升级版的

欧洲子账号又不能用了，只能搞个美国的账号。

具体步骤可以参见： https://developers.sap.com/tutorials/hcp-create-trial-account.html 在这里插入图片描述

记住下面两个标红的地方，后面会用到

在这里插入图片描述

2.3 配置connect 2.3.1 进入https://tools.hana.ondemand.com/

下载

在这里插入图片描述

2.3.2 双击安装，默认登录https://localhost:8443/

用户名和密码： Administrator 密码： manage

第一次登录后，选择Master

2.3.3 添加HCP注册获取的测试子账户

点击页面左上方的 Connector，然后点击右上方 Add Subaccount

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.3.4 云端到本地虚拟映射（利用RPC，这个暂时没研究）

在这里插入图片描述

在这里插入图片描述

不使用负载平衡 在这里插入图片描述

输入服务和实例 在这里插入图片描述

虚拟不变 在这里插入图片描述

云端映射本机成功

在这里插入图片描述

2.3.4 云端到本地虚拟映射（利用HTTP，主要用这种）

在这里插入图片描述

在这里插入图片描述

输入自己hana服务器的IP地址和端口，端口就是后端服务的端口，就是用postman能调通的那个端口 在这里插入图片描述

虚拟的暂时不改（虚拟的是为对外的重命名，是怕真实IP地址被攻击）

在这里插入图片描述

映射类型选择无

在这里插入图片描述

对外使用虚拟的地址

在这里插入图片描述

在这里插入图片描述

2.3.5 添加资源

添加虚拟主机可访问的资源，输入URL路径：/sap/bc/adt，/sap/bc/ui5_ui5，/sap/opu/odata 如下图：

1.在RPC下添加的如下： 在这里插入图片描述

在这里插入图片描述

2.在http下添加的如下：

在这里插入图片描述

在这里插入图片描述

2.4 SCP配置到本地主机的链接

在这里插入图片描述

在这里插入图片描述

其中WebIDEUsage要输入：odata_abap,ui5_execute_abap,dev_abap,odata_gen,apihub_catalog,api_sandbox (这些都是按需配置的）

测试连接，提示连接成功了。 在这里插入图片描述

2.5 新一代的web ide ，SAP Business Application Studio初入门 2.5.1 确认cloud Founity是否启用

在这里插入图片描述

2.5.2 订阅SAP Business Application Studio

在这里插入图片描述

2.5.3 配置角色集合

在这里插入图片描述

添加Administrator，Developer角色，以及用户 在这里插入图片描述

2.5.4 登录SAP Business Application Studio，创建空间

创建空间

在这里插入图片描述

扩展的一些工具都选择上 在这里插入图片描述

待应用空间启动完成，就能进入web ide的在线开发平台了。点击lgz进入

在这里插入图片描述

2.6 云端构建master-detail程序 2.6.1 从模板构建

在这里插入图片描述

在这里插入图片描述

此处选择ui风格的，list-Detail应用 在这里插入图片描述

在这里插入图片描述

按模板选择

Object collection：表示左侧数据集 Object collection key：数据集的唯一ID Object ID：显示在前端的ID Object number：显示的内容，本次选择显示销售订单的净价Netwr Object unit of measure：净值度量，本次选择Waerk作为净值的货币 Line item collection：连接detail的navigation，本次选择后端的OrderToItem Line item collection key：链接到行的关键字段，本次选择Vbeln销售订单编号 Line item ID：行项目ID，本次选择Posnr Line item number：行项目显示的内容，本次依然选择净价Netwr Line item unit of measure：行项目的度量，依然是Waerk

在这里插入图片描述

在这里插入图片描述

2.6.2 运行，不会配置运行。。暂时放弃，新的SAP Business Application Studio资料太少了

在这里插入图片描述

2.7 本地环境web ide（这个目前资料多） 2.7.1 下载IDE

https://tools.hana.ondemand.com/#sapui5

下载后直接解压即可 在这里插入图片描述

2.7.2 修改端口并启动

在这里插入图片描述

http://localhost:9090/webide/index.html

2.7.3 新增配置文件

注意建文件夹：\config_master\service.destinations\destinations，新建文件S4H 在这里插入图片描述

内容如下：

Description= description Type=HTTP TrustAll=true Authentication=NoAuthentication Name=S4H ProxyType=Internet URL=http\://mysap.goodsap.cn\:50400 WebIDEUsage=odata_abap,odata_gen,ui5_execute_abap,dev_abap,bsp_execute_abap,odata_xs WebIDESystem=S4H WebIDEEnabled=true sap-client=400

有些服务器，启用了安全验证服务，比如访问fiori前端是https的，那么url地址要指向https了，如下：

Description= description Type=HTTP TrustAll=true Authentication=BasicAuthentication Name=S4H ProxyType=Internet URL=https\://mysap.goodsap.cn\:44300 WebIDEUsage=odata_abap,odata_gen,ui5_execute_abap,dev_abap,bsp_execute_abap,odata_xs WebIDESystem=S4H WebIDEEnabled=true sap-client=400 User=U156 Password=***** 2.7.4 启动，新建账户测试，看是否能读出来服务

在这里插入图片描述

从模板创建

在这里插入图片描述

在这里插入图片描述

输入登录sap系统的用户名和密码（U156/****），如果前面配置文件配置了用户名和密码，那么这儿可以不用输入。 在这里插入图片描述

下一步OK了

2.8 继续创建master-detail程序 2.8.1 输入一些关键信息

Object collection：表示左侧数据集 Object collection key：数据集的唯一ID Object ID：显示在前端的ID Object number：显示的内容，本次选择显示销售订单的净价Netwr Object unit of measure：净值度量，本次选择Waerk作为净值的货币 Line item collection：连接detail的navigation，本次选择后端的OrderToItem Line item collection key：链接到行的关键字段，本次选择Vbeln销售订单编号 Line item ID：行项目ID，本次选择Posnr Line item number：行项目显示的内容，本次依然选择净价Netwr Line item unit of measure：行项目的度量，依然是Waerk

在这里插入图片描述

在这里插入图片描述

各关键信息代表也可以看下图： 在这里插入图片描述

2.8.2 测试运行，久违的期待的地址及内容可算出现了

在这里插入图片描述

2.8.3 用postman可以测试后端地址，是一个好利器。

有时候如果后端服务报错的话，可以用postman进行测试 在这里插入图片描述

地址拼接如下： http://mysap.goodsap.cn:50400/sap/opu/odata/sap/ZLGZ_SALEORDERS_SRV/SaleOrdersSet?sap_client=400

2.9 将master-detail程序发布到SAP服务器

右键工程名-》deploy-》发布到ui5 abap服务器

在这里插入图片描述

在这里插入图片描述

选择或新建请求号

在这里插入图片描述

在这里插入图片描述

2.10 查看发布的应用 2.10.1 查看事务代码：SICF，服务名称输入：ZLGZ*

在这里插入图片描述

2.10.2 点击右键测试服务，如果启用了https，那么需要访问https的地址

要命，这个令牌错误怎么又出现了。。

在这里插入图片描述

修改为https模式访问，是没问题的。

https://mysap.goodsap.cn:44300/sap/bc/ui5_ui5/sap/zlgzsaleorders/index.html?sap-client=400

在这里插入图片描述

2.11 将该服务配置到磁贴

暂时没做测试，理论上是一样的。

3 遇到的坑 3.1 第一个大坑就是云端的webide怎么用不知道

云端的资源使用原理：

云端开发怎么能读取到自己的abap服务器呢？

1.是通过cloud connect连接到自己abap服务器的。使用cloud connect关联云端子账户，然后启用一个类似于虚拟的代理服务

2.云端查找这个子账户以及对外开放的虚拟地址，就可以读取到本地的abap后端服务了。

为什么不云端直接连接本地abap服务呢？这个问题就留给后来者思考了。

3.2 第二个大坑就是服务器启用了https安全验证，链接要配置为https

本地的webide，在配置时，由于本地abap服务器启用了安全验证，必须配置为带https的地址及端口。

端口查找方法可以通过sicf-转到-端口信息查看

在这里插入图片描述

目前通过sap hana studio和webide都成功开发、部署、发布了SAP UI5的程序了，总算迈出了第一步。恭喜大家。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有