OData Update Operation in UI5 Application on BAS for CAPM Full Stack UI5 Development

Welcome to the Eight episode (Not the last) of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have created Development Space in BAS with project structure for development, created entities, exposed Odata services and done Update & Delete Operation. In this episode, we will do Edit Operation in the created table.

Assumption(OR Must Have to Start):

• You have followed our previous episode where we created the UI application.

Your project structure should look like below if you carefully followed all our previous episodes.

Now, open Home Controller and add 2 Dependencies: ColumnlistItem & Input.

"sap/m/ColumnListItem",
"sap/m/Input"

function (Controller, MessageToast,ColumnListItem,Input)

Lets create a Global function this.oEditableTemplate in onInit. This will convert text fields of the table to Input Fields.

this.oEditableTemplate = new ColumnListItem({
                    cells: [
                        new Input({
                            value: "{mainModel>soNumber}",
                            change: [this.onInputChange, this]
                        }), new Input({
                            value: "{mainModel>customerName}",
                            change: [this.onInputChange, this]
                        }), new Input({
                            value: "{mainModel>customerNumber}",
                            change: [this.onInputChange, this]
                        }), new Input({
                            value: "{mainModel>PoNumber}",
                            change: [this.onInputChange, this]
                        }),  new Input({
                            value: "{mainModel>inquiryNumber}",
                            change: [this.onInputChange, this]
                        })
                    ]
                });

Let’s create a rebindTable function to apply the Template.

rebindTable: function(oTemplate, sKeyboardMode) {
                this._oTable.bindItems({
                    path: "mainModel>/SalesOrder",
                    template: oTemplate,
                    templateShareable: true
                }).setKeyboardMode(sKeyboardMode);
            },

Now, let’s call this function in onEditMode to make them editable by pressing Edit Button.

this.rebindTable(this.oEditableTemplate, "Edit");

Now, let’s test it. Click on Edit Button this should make the Fields Editable.

Now let’s work on Save Logic. Add onInputChange function on Change Event of Input Field. Can copy & replace this.EditableTemplate with below code or Cherry Pick the change event.

 this.oEditableTemplate = new ColumnListItem({
                    cells: [
                        new Input({
                            value: "{mainModel>soNumber}",
                            change: [this.onInputChange, this]
                        }), new Input({
                            value: "{mainModel>customerName}",
                            change: [this.onInputChange, this]
                        }), new Input({
                            value: "{mainModel>customerNumber}",
                            change: [this.onInputChange, this]
                        }), new Input({
                            value: "{mainModel>PoNumber}",
                            change: [this.onInputChange, this]
                        }),  new Input({
                            value: "{mainModel>inquiryNumber}",
                            change: [this.onInputChange, this]
                        })
                    ]
                });

Now lets create 2 functions onInputChange & refreshModel. These will handle the input changes.

onInputChange: function(){
                this.refreshModel("mainModel");

            },
            
refreshModel: function (sModelName, sGroup){
                return new Promise((resolve,reject)=>{
                    this.makeChangesAndSubmit.call(this,resolve,reject,
                    sModelName,sGroup);
                });
                
            },

Now let’s add a method makeChangesAndSubmit to Save or to do the Update Operation.

makeChangesAndSubmit: function (resolve, reject, sModelName,sGroup){
                const that = this;
                sModelName = "mainModel";
                sGroup = "$auto";
                if (that.getView().getModel(sModelName).hasPendingChanges(sGroup)) {
                    that.getView().getModel(sModelName).submitBatch(sGroup).then(oSuccess =>{
                        that.makeChangesAndSubmit(resolve,reject, sModelName,sGroup);
                        MessageToast.show("Record updated Successfully");
                    },reject)
                    .catch(function errorHandler(err) {
                        MessageToast.show("Something Went Wrong ",err.message); // 'Oops!'
                      });
                } else {
                    that.getView().getModel(sModelName).refresh(sGroup);
                    resolve();
                }
            },

Now, let’s run the code, click on Edit Button & Change the Inquiry Number of First Row.

Now do an Enter or Come out or Click outside the Input Field & your Record will get Updated.

Now let’s add an onSave Function to Switch back to Display Mode.

onSave: function(){
                this.getView().byId("editModeButton").setVisible(true);
                this.getView().byId("saveButton").setVisible(false);
                this._oTable.setMode(sap.m.ListMode.None);
                this.rebindTable(this.oReadOnlyTemplate, "Navigation");
                
            },

Add another function _createReadOnlyTemplates.

_createReadOnlyTemplates: function () {
                this.oReadOnlyTemplate = new sap.m.ColumnListItem({
				cells: [
					new sap.m.Text({
						text: "{mainModel>soNumber}"
					}),
					new sap.m.Text({
						text: "{mainModel>customerName}"
					}),
                    new sap.m.Text({
						text: "{mainModel>customerNumber}"
					}),
					new sap.m.Text({
						text: "{mainModel>PoNumber}"
					}),
                    new sap.m.Text({
						text: "{mainModel>inquiryNumber}"
					})
				]
			});
        },

Let’s add these functions in the onInit Function.

this._createReadOnlyTemplates();
this.rebindTable(this.oReadOnlyTemplate, "Navigation");

Now our code is ready. Open Application, table will open in Display Mode. Click on Edit Button.

This will make the fields Editable.

And now when we click on the Save button it will set the Fields to Display Mode.

Feel free to drop your comments in the comment section.

In this blog post, we have learnt how to do Updates in SAPUI5 Application in BAS.

Further reading – https://cap.cloud.sap/docs/guides/

Congratulations, you have learnt how to create a CAPM Full Stack UI5 Application with CRUD Operations. We started from scratch, doing all the initial setup & finally concluded with a UI5 Application that supports all CRUD Operations.

But, this is not the end. There are more blogs to come related to or in continuation to this Blog Series. So stay connected for all the upcoming episodes of the series.