SAPUI5 (36) - OData Model 连接后端 SAP 系统 (下)

2024-02-05 13:48
文章标签 36 系统 连接 model sap odata sapui5

本文主要是介绍SAPUI5 (36) - OData Model 连接后端 SAP 系统 (下)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

继续上一篇的内容，完成使用 OData Model 连接到后端 SAP 系统，实现 CRUD 操作。

程序界面：

点击 Create 按钮，弹出对话框：

输入 id, name 和 Address，点击 Save 按钮保存数据，点击 Cancel 按钮取消。

单击 table 中某行后，点击 Edit 按钮，弹出对话框：

可以进行修改操作。

单击 table 中某行后，点击 Delete 按钮，提示确认删除对话框，可以进行删除操作。

要点：

  • SAP Web IDE 实现代理
  • 配置数据源
  • 连接到 SAP 后端并实现 CRUD 操作

SAP Web IDE 代理配置

我使用的 IDE 是 Web IDE personal edition，如果把 Web IDE 的安装目录称作 webide_home 的话，我们需要在 webide_home\config_master\service.destinations\destinations 下配置连接，这个连接对于所有 Project 都可以使用。请参考本系列的第 33 篇。

本次我们连接的后端系统标识为 DPH，所以我们的配置文件名为 DPH，没有扩展名。配置文件的内容如下：

Description=DP Hana
Type=HTTP
TrustAll=true
Authentication=NoAuthentication
WebIDEUsage=odata_abap,dev_abap,ui5_execute_abap
Name=DPH
WebIDEEnabled=true
URL=HTTP\://dph01.nodomain\:8180
ProxyType=OnPremise
WebIDESystem=DPH
sap-client=100

配置数据源

在 SAP Web IDE 中，创建类型为 SAPUI5 Application 的项目，这种类型项目的文件结构相对来说是最简单的。创建完成后，项目的文件结构如下：

配置 neo-app.json 文件

在 neo-app.json 文件中，增加一项 path 配置，内容如下：

    {"path": "/sap/opu/odata","target": {"type": "destination","name": "DPH","entryPath": "/sap/opu/odata"},"description": "DP Hana"}

配置 Application descriptor

Application descriptor 就是 webapp 下面的 manifest.json 文件，使用 App Descriptor Editor 打开，切换到 Data Sources 页签，点击 “+” 号来添加一个数据源：

系统弹出对话框简化配置，切换到 Service URL，选择在前面配置的 SAP 连接，第一行 DP Hana 保存的是 domain 信息，第二行配置的是 service url 的 path:

点击 Test 按钮，提示输入用户名和密码，如果一切 OK, 系统读取到 OData service 并且加载：

选中 EmployeeCollection ，点击 Next 按钮即可完成配置。

metadata.xml 文件会被配置到 model 文件夹下面。但我的 Web IDE 版本将实际文件放在 localServices 文件夹下面，需要手工调整位置。这个文件也可以通过在浏览器中 $metadata 参数的方法得到。

然后在 manifest.json 文件中增加默认 model 为刚才配置的 data source：

"sap.ui5": {"_version": "1.1.0","rootView": {"viewName": "zui5_odata_sap_crud.view.App","type": "XML"},"dependencies": {"minUI5Version": "1.30.0","libs": {"sap.ui.core": {},"sap.m": {},"sap.ui.layout": {}}},"contentDensities": {"compact": true,"cozy": true},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "zui5_odata_sap_crud.i18n.i18n"}},"": {"dataSource": "zempprj_srv","settings": {"metadataUrlParams": {"sap-documentation": "heading"}}}},"resources": {"css": [{"uri": "css/style.css"}]}}

此时运行程序，应该会提示输入用户名和密码，表示数据源配置成功。

界面设置

主界面

因为不打算使用 routing，直接在 root view ，即 App.view.xml 文件中设置主要的 UI 元素：

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"controllerName="zui5_odata_sap_backend_crud.controller.App"><App><pages><Page title="{i18n>title}"><content><Table noDataText="No data" id="idTable" items="{path:'/EmployeeCollection'}"><items><ColumnListItem type="Navigation" press="onItemPress"><cells><Text text="{EmpId}"/><Text text="{EmpName}"/><Text text="{EmpAddr}"/></cells></ColumnListItem></items><columns><Column id="EmpIdCol"><header><Label text="Employee ID"/></header></Column><Column id="EmpNameCol"><header><Label text="Name"/></header></Column><Column id="EmpAddrCol"><header><Label text="Address"/></header></Column></columns></Table></content><footer><Bar><contentRight><Button icon="sap-icon://create" text="Create" press="onCreate"/><Button icon="sap-icon://edit" text="Edit" press="onEdit"/><Button icon="sap-icon://delete" text="Delete" press="onDelete"/></contentRight></Bar></footer></Page></pages></App>
</mvc:View>

对话框

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form"><Dialog id="employeeDialog" title="Employee CRUD"><f:SimpleForm><Label text="Employee Id"/><Input id="EmpId" value="{EmpId}"/><Label text="Name"/><Input id="EmpName" value="{EmpName}"/><Label text="Address"/><Input id="EmpAddr" value="{EmpAddr}"/></f:SimpleForm><Toolbar><ToolbarSpacer/><Button id="SaveCreate" text="Save"/><Button id="SaveEdit" text="Save Edit"/><Button id="CancelButton" text="Cancel" /></Toolbar></Dialog></core:FragmentDefinition>

控制器代码

主要的代码都在 App.controller.js 中，先给出完整代码：

sap.ui.define(["sap/ui/core/mvc/Controller"
], function(Controller) {"use strict";var oModel;var sCurrentPath; // current pathvar sCurrentEmp; // cureent employeereturn Controller.extend("zui5_odata_sap_backend_crud.controller.App", {onInit: function() {oModel = this.getOwnerComponent().getModel();oModel.setUseBatch(false);this.getView().setModel(oModel);},openDialog: function() {var oView = this.getView();// Open dialogvar oEmpDialog = oView.byId("employeeDialog");if (!oEmpDialog) {oEmpDialog = sap.ui.xmlfragment(oView.getId(),"zui5_odata_sap_backend_crud.view.EmployeeDialog");oView.addDependent(oEmpDialog);}oEmpDialog.open();// Attach press event for CancelButtonvar oCancelButton = oView.byId("CancelButton");oCancelButton.attachPress(function() {oEmpDialog.close();});},// onCreate eventonCreate: function() {var oView = this.getView();this.openDialog();var oEmployeeDialog = oView.byId("employeeDialog");oEmployeeDialog.setTitle("Create Employee");oView.byId("EmpId").setEditable(true);oView.byId("SaveEdit").setVisible(false);oView.byId("SaveCreate").setVisible(true);// clearoView.byId("EmpId").setValue("");oView.byId("EmpName").setValue("");oView.byId("EmpAddr").setValue("");// commit saveoView.byId("SaveCreate").attachPress(function() {var oNewEntry = {"Mandt": "100","EmpId": "","EmpName": "","EmpAddr": ""};// populate value from formoNewEntry.EmpId = oView.byId("EmpId").getValue();oNewEntry.EmpName = oView.byId("EmpName").getValue();oNewEntry.EmpAddr = oView.byId("EmpAddr").getValue();// Commit creation operationoModel.create("/EmployeeCollection", oNewEntry, {success: function() {sap.m.MessageToast.show("Created successfully.");},error: function(oError) {window.console.log("Error", oError);}});// close dialogif (oEmployeeDialog) {oEmployeeDialog.close();}});},onEdit: function() {// no employee was selectedif (!sCurrentEmp) {sap.m.MessageToast.show("No Employee was selected.");return;}var oView = this.getView();this.openDialog();var oEmployeeDialog = oView.byId("employeeDialog");oEmployeeDialog.setTitle("Edit Employee");oView.byId("EmpId").setEditable(false);oView.byId("SaveEdit").setVisible(true);oView.byId("SaveCreate").setVisible(false);// populate fieldsoView.byId("EmpId").setValue(oModel.getProperty(sCurrentPath + "/EmpId"));oView.byId("EmpName").setValue(oModel.getProperty(sCurrentPath + "/EmpName"));oView.byId("EmpAddr").setValue(oModel.getProperty(sCurrentPath + "/EmpAddr"));// Attach save eventoView.byId("SaveEdit").attachPress(function() {var oChanges = {"Mandt": "100","EmpName": "","EmpAddr": ""};// populate value from formoChanges.EmpName = oView.byId("EmpName").getValue();oChanges.EmpAddr = oView.byId("EmpAddr").getValue();// commit creationoModel.update(sCurrentPath, oChanges, {success: function() {sap.m.MessageToast.show("Changes were saved successfully.");},error: function(oError) {window.console.log("Error", oError);}});// close dialogif (oEmployeeDialog) {oEmployeeDialog.close();}});},// onDelete eventonDelete: function() {var that = this;// no employee was selectedif (!sCurrentEmp) {sap.m.MessageToast.show("No Employee was selected.");return;}var oDeleteDialog = new sap.m.Dialog();oDeleteDialog.setTitle("Deletion");var oText = new sap.m.Label({text: "Are you sure to delete employee [" + sCurrentEmp + "]?"});oDeleteDialog.addContent(oText);oDeleteDialog.addButton(new sap.m.Button({text: "Confirm",press: function() {that.deleteEmployee();oDeleteDialog.close();}}));oDeleteDialog.open();},// deletion operationdeleteEmployee: function() {oModel.remove(sCurrentPath, {success: function() {sap.m.MessageToast.show("Deletion successful.");},error: function(oError) {window.console.log("Error", oError);}});},onItemPress: function(evt) {var oContext = evt.getSource().getBindingContext();sCurrentPath = oContext.getPath();sCurrentEmp = oContext.getProperty("EmpName");}});
});

要点说明：

Model

我们使用的是 OData Model，但是并没有任何代码来显示申明。OData Model 的声明来自 manifest.json。根据 OpenUI5 SDK，如果 DataSource 为 OData，没有指定 type，则默认的 type 为 OData v2，这正是我们想要的。

然后在 Controller 的 onInit 事件中绑定 view 和 model:

onInit: function() {oModel = this.getOwnerComponent().getModel();oModel.setUseBatch(false);this.getView().setModel(oModel);
}

新增记录 ( create )

var oNewEntry = {"Mandt": "100","EmpId": "","EmpName": "","EmpAddr": ""
};// populate value from form
oNewEntry.EmpId = oView.byId("EmpId").getValue();
oNewEntry.EmpName = oView.byId("EmpName").getValue();
oNewEntry.EmpAddr = oView.byId("EmpAddr").getValue();// Commit creation operation
oModel.create("/EmployeeCollection", oNewEntry, {success: function() {sap.m.MessageToast.show("Created successfully.");},error: function(oError) {window.console.log("Error", oError);}
});

修改记录

var oChanges = {"Mandt": "100","EmpName": "","EmpAddr": ""
};// populate value from form
oChanges.EmpName = oView.byId("EmpName").getValue();
oChanges.EmpAddr = oView.byId("EmpAddr").getValue();// commit creation
oModel.update(sCurrentPath, oChanges, {success: function() {sap.m.MessageToast.show("Changes were saved successfully.");},error: function(oError) {window.console.log("Error", oError);}
});

删除记录

deleteEmployee: function() {oModel.remove(sCurrentPath, {success: function() {sap.m.MessageToast.show("Deletion successful.");},error: function(oError) {window.console.log("Error", oError);}});
}

源码

36_01_zui5_odata_sap_backend_crud
36_02_zui5_odata_sap_backend_crud

参考资料

  • Connecting Remote Systems in SAP Web IDE Personal Edition
  • Descriptor for Applications, Components, and Libraries
  • Connect to Remote Server SAP WEB IDE local
  • Connect the SAPWebIDE On-Premise to your SAP Gateway system On-Premise
  • Create a Project based on a SAP Gateway Service ( OData ) with WebIDE On-Premise

这篇关于SAPUI5 (36) - OData Model 连接后端 SAP 系统 (下)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/681104。

相关文章

不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
基于人工智能的图像分类系统

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务，目标是自动识别图像中的对象类别。通过卷积神经网络（CNN）等深度学习技术，我们可以构建高效的图像分类系统，广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统，包括环境
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善，其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性， 将与教育相关的数据要素在区块链上进行存证确权，在确保数据可信的前提下，促进教育的公平、透明、开放，为教育教学质量提升赋能，实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护，支撑教育资源共享、教学质量评估、
阅读更多...
软考系统规划与管理师考试证书含金量高吗？

软考系统规划与管理师考试证书含金量高吗？

2024年软考系统规划与管理师考试报名时间节点： 报名时间：2024年上半年软考将于3月中旬陆续开始报名 考试时间：上半年5月25日到28日，下半年11月9日到12日 分数线：所有科目成绩均须达到45分以上（包括45分）方可通过考试 成绩查询：可在“中国计算机技术职业资格网”上查询软考成绩 出成绩时间：预计在11月左右 证书领取时间：一般在考试成绩公布后3~4个月，各地领取时间有所不同
阅读更多...
系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

本章知识考点：         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2