Skip to Content
Technical Articles

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.

 

/
22 Comments
You must be Logged on to comment or reply to a post.
        • Hi Mahesh,

          Good question!

          The catch here is, I did not used SmartFields if you noticed in the Table XML definition in the VIEW.

          I have just used smartToggle.

          But, as we have the JSON Model binding, we need to do it manually.

          I have not tried it though, but should work.

          And to answer to your question I guess Annotations may not work, as they work with smart fields only.

          Β 

          Β 

        • Hi Mahesh,

           

          All the F4 helps works good.

          Tried and tested.

          It picks up the F4 help from the Annotations automatically.

          Even I was worried about implementing F4 helps for all my columns, but it worked πŸ™‚

           

          Regards,

          Vaibhav Goel

    • Hi Yellappa,

      Β 

      I did not try with responsive table. But I guess should be feasible.

      It all depends on how/what you are getting in the template of each column in onInitialize event.

      Based on the type of control you can bind it’s value/text property to respective json model key.

      Β 

      • Hi Vaibhav,

         

        For Grid table, we have template available as part of the column aggregation. Whereas for responsive table, we don’t have template as part of column instead it is a separate aggregation( items). I have tried inline declaration in XML and it works. However, I am looking for dynamic creation with coding like you did for grid table.

        • Hi Yellappa,

          That’s great !

          Can you please share your XML view coding with us as well ?

          May be you can bind the items aggregation to JSON model ? There should be a way.

          Regards,

          Vaibhav

          • /
          • Hi Yellappa,

             

            So, like I have done the binding for template controls, in a similar way, you can get the items aggregation of the table.

            oSmartTable.getTable()…

            And then bind cells to your JSON properties.

            Should work

            Regards,

            Vaibhav

  • HI Vaibhav,

    aColumns[i].getTemplate().getDisplay().bindText(sPath);
    aColumns[i].getTemplate().getEdit().bindValue(sPath);

    Am getting the issue with getDispaly() and getEdit() methods.unable to get these methods and below is my code.

     

     

    Thanks,

    Viswa

    /
    • Hi Viswa,

      Are you using Smartfield ?

      If yes, you need to turn it off. Just use smart toggle, and use CSS to make the look and feel same like smarttable

      Regards,

      Vaibhav

          • Hi Vaibhav,

            I added above two properties as part of the smart table and above code worked very nicely.

            <smartTable:SmartTable id=”smartTable” customData:useSmartField=”false”Β  customData:useSmartToggle=”true”>

            </smartTable:SmartTable>

            Thank you.

            Hitesh

          • Superb!

            Happy to help πŸ™‚

            Please do share with us what is your design or requirement.

            Any thing interesting will be good to know

             

            Thanks.