Enable CRUD Operations in Smart Table SAPUI5 with JSON Model

Smart table is very quick and easy way of achieving any report by using oData Model.

But issue comes, when we need to have CUD operations.

This blog post will help you in understanding some tricks we can apply in smart table to bind it a local JSON Model instead of oData Model and make our life easy for the CUD operations when we actually want to commit them only on the click of SAVE button.

Just, initialize the smart table in XML view the way we do:

My entity set name is DataSourceSet (oData) and I have used a local JSON Model name for the tableBindingPath = “oModelMNA”

For enabling edit toggle mode, you need to pass customData:useSmartToggle =”true”

Sometimes, customData:useSmartField =”true” as well.

Write this code in onInit method of your view controller:

	onInit: function () {

			var oModel = this.getView().getModel();
			var sSet = "/" + "DataSourceSet";
			oModel.read(sSet, {
				success: function (oData) {
					var oModelMNA = new JSONModel();
					oModelMNA.setData(oData.results);
					this.getView().setModel(oModelMNA, "oModelMNA");
				}.bind(this),
				error: function (oResponse) {
					sap.m.MessageToast.show("oData fetching failed");
				}
			});

		},

Also, in the initialise event of smart table, put this code:

	onInitialise: function (oEvent) {

			var oTable = oEvent.getSource().getTable();
			var aColumns = oTable.getColumns();

			for (var i = 0; i < aColumns.length; i++) {
				var sPath = "oModelMNA>" + aColumns[i].data("p13nData").columnKey;
				aColumns[i].getTemplate().getDisplay().bindText(sPath);
				aColumns[i].getTemplate().getEdit().bindValue(sPath);
			}

			oTable.bindRows("oModelMNA>/");
		},

Here basically, we are changing the binding path to our local json model.

And you are all set !!!

Conclusion:

We can bind the smart tables with a JSON model as well.

Play around with the JSON Model “oModelMNA” for any operations.

On save click, just use submit changes and push all the changes to back-end for saving.