Skip to Content
Technical Articles
Author's profile photo Vaibhav Goel

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.

 

Assigned tags

      26 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      πŸ™‚ Nice Hack!! that should come with "Do it at your own risk" πŸ˜€

      Author's profile photo Vaibhav Goel
      Vaibhav Goel
      Blog Post Author

      Haha πŸ™‚ Yes

      But we have implemented it and moved to Prod also. So far no issues.

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      That's good to hear!!!, BTW you can add 'With JSON model' to your blog title.

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      And a small question, are the validations, formatting and other stuff that comes with smart fields, like value help and stuff were working?

      Author's profile photo Hubert Falkowski
      Hubert Falkowski

      It should, because you have a binding on the XML definition, but waiting for the confirmation πŸ™‚

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      I don't think it will work as the binding is being changed in the code.. If it works it would be good.

      Author's profile photo Vaibhav Goel
      Vaibhav Goel

      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.

      Β 

      Β 

      Author's profile photo Vaibhav Goel
      Vaibhav Goel

      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

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      Hi Vaibhav Goel,

      Thanks for the update and That's good to hear πŸ™‚ πŸ™‚ Will try out for sure πŸ™‚

      Regards,

      Mahesh

      Author's profile photo Aishwarya Mani
      Aishwarya Mani

      That's a real good one! Nice blog...keep going! πŸ™‚

      Author's profile photo Yellappa Madigonde
      Yellappa Madigonde

      Nice blog. Is it possible to do the same thing with Responsive table?

      Author's profile photo Vaibhav Goel
      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.

      Β 

      Author's profile photo Yellappa Madigonde
      Yellappa Madigonde

      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.

      Author's profile photo Vaibhav Goel
      Vaibhav Goel

      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

      Author's profile photo Yellappa Madigonde
      Yellappa Madigonde

      Below is the sample XML file with two fields bound to responsive table. Please note that I have used only display purpose.

      Author's profile photo Vaibhav Goel
      Vaibhav Goel

      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

      Author's profile photo Samuel Mok Kay Wai
      Samuel Mok Kay Wai

      @Yellappa Madigonde

      Did you manage to get it work dynamically?

      Vaibhav Goel:

      The trouble is the Items binding info won't be known until after data is received.
      Maybe if you can try a quick plnkr example that would be great (dynamic version)

      Author's profile photo Silvano Silva
      Silvano Silva

      I have de same problem. I need to change the column template for a responsive smart table based on some configurations.

      Make some collums dynamically changed by code for example change a Text to an Link.

      For grid I could change its template.

       

      Any suggestion?

      Author's profile photo viswanath thammineni
      viswanath thammineni

      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

      Author's profile photo Vaibhav Goel
      Vaibhav Goel
      Blog Post Author

      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

      Author's profile photo Hitesh Thakore
      Hitesh Thakore

      Vaibhav,

       

      I am seeing the same error as Viswa, Where to turn off Smartfield?

       

      Regards,

      Hitesh

      Author's profile photo Vaibhav Goel
      Vaibhav Goel

      Hi Hitesh,

       

      Its in the XML View code.

      customData:useSmartField = "false"

      customData: useSmartToggle="true"

       

      Regards,

      Vaibhav

       

      Author's profile photo Hitesh Thakore
      Hitesh Thakore

      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

      Author's profile photo Vaibhav Goel
      Vaibhav Goel

      Superb!

      Happy to help πŸ™‚

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

      Any thing interesting will be good to know

       

      Thanks.

      Author's profile photo Prashanth Rajasekaran
      Prashanth Rajasekaran

      Awesome blog .

      Author's profile photo Vaibhav Goel
      Vaibhav Goel
      Blog Post Author

      Thanks Prashanth