在 SAP Business Application Studio 裡建立一個 SAP UI5 應用，應該具有如下的專案結構：

![](https://img-blog.csdnimg.cn/img_convert/5283b8b342bdc219989708a2ce9e3d44.png)

開啟 `Home.view.xml`, 新增一個 Create 按鈕：

```xml
<button id="createButton" icon="sap-icon://add" tooltip="Create" visible="true" press="onOpenAddDialog">
```
![image](https://img-blog.csdnimg.cn/img_convert/1ccce483dad11c0c7153623cc21e8525.png)

該按鈕被點選後，我們期望彈出一個對話方塊，該對話方塊的實現原始碼如下：
![](https://img-blog.csdnimg.cn/img_convert/1bb5da2b9d8b5a6c3dd02a6e582bd3c7.png)

![](https://img-blog.csdnimg.cn/img_convert/ae2dd478a26b03cf3110a980544315d3.png)

開啟和關閉對話方塊的原始碼：

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

對話方塊裡呼叫的 onCreate 方法程式碼如下：

```javascript
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` 鉤子函式里：

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

![image](https://img-blog.csdnimg.cn/img_convert/d6f057cb4ee34a50c1051cce05189545.png)

下面進行測試。點選 Create 按鈕，彈出對話方塊：

![](https://img-blog.csdnimg.cn/img_convert/4b30336545b86d4071f2c6e828e498ec.png)

維護了必填欄位後，點選 Create：
![](https://img-blog.csdnimg.cn/img_convert/2ee67933c6c104569636745f4335948c.png)

能看到成功建立的 Sales Order：
![](https://img-blog.csdnimg.cn/img_convert/4f2766efe1e03e8ccb76e837f1caa1cc.png)

下面進行刪除操作的實現。

我們設計一個 Edit 按鈕，只有再進入 Edit 模式，才允許點選刪除按鈕：

```xml
<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">
```
![](https://img-blog.csdnimg.cn/img_convert/1528a2de4762df78f9fa3db6b00001ad.png)

Edit 按鈕的實現邏輯：

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

實現 `onDelete` 函式：

```javascript
onDelete: function(){

OData V4 模型允許開發人員指定是否將請求捆綁並作為批處理請求(Batch request)傳送，以及何時傳送請求。

引數 groupId 指定預設批處理組，預設為 `$auto`。 開發人員可以使用引數 updateGroupId 為更新請求設定批處理組。 如果不設定此引數，將使用 groupId。

以下程式碼例項化了一個模型，該模型將批處理組“myAppUpdateGroup”中的所有更新請求捆綁在一起； 然後可以使用 oModel.submitBatch("myAppUpdateGroup") 傳送批處理請求。

```javascript
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"
    });
});
```</button></button></button>

在 SAP BAS 裡使用 SAP UI5 應用消費 OData 的 Create 和 Delete 操作

相關文章