在 Business Application Studio 里使用 SAP UI5 应用消费 OData 的 Create 和 Delete 操作

简介: 在 Business Application Studio 里使用 SAP UI5 应用消费 OData 的 Create 和 Delete 操作

SAP Business Application Studio 里创建一个 SAP UI5 应用,应该具有如下的项目结构:

打开 Home.view.xml, 添加一个 Create 按钮:

<Button id="createButton" icon="sap-icon://add" tooltip="Create" visible="true" press="onOpenAddDialog">

该按钮被点击后,我们期望弹出一个对话框,该对话框的实现源代码如下:

打开和关闭对话框的源代码:

onOpenAddDialog: function () {
   this.getView().byId("OpenDialog").open();
},
onCancelDialog: function (oEvent) {
   oEvent.getSource().getParent().close();
},

对话框里调用的 onCreate 方法代码如下:

onCreate: function () {
                var oSo = this.getView().byId("idSo").getValue();
                if (oSo !== "") {
                    const oList = this._oTable;
                        const oBinding = oList.getBinding("items");
                        const oContext = oBinding.create({
                            "soNumber": this.byId("idSo").getValue(),
                            "customerName": this.byId("idCustName").getValue(),
                            "customerNumber": this.byId("idCustomer").getValue(),
                            "PoNumber": this.byId("idPo").getValue(),
                            "inquiryNumber": this.byId("idInqNumber").getValue()      
                        });
                        oContext.created()
                        .then(()=>{
                                // that._focusItem(oList, oContext);
                                this.getView().byId("OpenDialog").close();
                        });
                }else {
                    MessageToast.show("So cannot be blank");
                }
            },

this._oTable 的赋值,发生在 onInit钩子函数里:

this._oTable = this.byId("table0");

下面进行测试。点击 Create 按钮,弹出对话框:

维护了必填字段后,点击 Create:

能看到成功创建的 Sales Order:

下面进行删除操作的实现。

我们设计一个 Edit 按钮,只有再进入 Edit 模式,才允许点击删除按钮:

<Button id="deleteButton" icon="sap-icon://delete" tooltip="Delete" visible="false" press="onDelete">
<Button id="editModeButton" visible="true" icon="sap-icon://edit" tooltip="Edit" press="onEditMode">

Edit 按钮的实现逻辑:

onEditMode: function(){
     this.byId("editModeButton").setVisible(false);
     this.byId("saveButton").setVisible(true);
     this.byId("deleteButton").setVisible(true);
     this.rebindTable(this.oEditableTemplate, "Edit");
}

实现 onDelete 函数:

onDelete: function(){
                var oSelected = this.byId("table0").getSelectedItem();
                if(oSelected){
                    var oSalesOrder = oSelected.getBindingContext("mainModel").getObject().soNumber;
                    oSelected.getBindingContext("mainModel").delete("$auto").then(function () {
                        MessageToast.show(oSalesOrder + " SuccessFully Deleted");
                    }.bind(this), function (oError) {
                        MessageToast.show("Deletion Error: ",oError);
                    });
                } else {
                    MessageToast.show("Please Select a Row to Delete");
                }
            },

OData V4 模型允许开发人员指定是否将请求捆绑并作为批处理请求(Batch request)发送,以及何时发送请求。


参数 groupId 指定默认批处理组,默认为 $auto。 开发人员可以使用参数 updateGroupId 为更新请求设置批处理组。 如果不设置此参数,将使用 groupId。


以下代码实例化了一个模型,该模型将批处理组“myAppUpdateGroup”中的所有更新请求捆绑在一起; 然后可以使用 oModel.submitBatch(“myAppUpdateGroup”) 发送批处理请求。

sap.ui.define(["sap/ui/model/odata/v4/ODataModel"], function (ODataModel) {
    var oModel = new ODataModel({
        serviceUrl : "/sap/opu/odata4/IWBEP/V4_SAMPLE/default/IWBEP/V4_GW_SAMPLE_BASIC/0001/",
        synchronizationMode : "None",
        updateGroupId : "myAppUpdateGroup"
    });
});
相关文章
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
31 0
|
1月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
18 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
2月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
48 0
|
2月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
25 0
|
20天前
|
存储
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
19 0

热门文章

最新文章