Enable CRUD Operations in Smart Table SAPUI5 with JSON Model

[former_member205625]

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.

 

[maheshpalavalli]

🙂 Nice Hack!! that should come with "Do it at your own risk" 😄

[former_member205625]

Haha 🙂 Yes

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

[maheshpalavalli]

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

[maheshpalavalli]

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

[Hubert]

It should, because you have a binding on the XML definition, but waiting for the confirmation 🙂

[maheshpalavalli]

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

[former_member612936]

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.

[former_member617007]

That's a real good one! Nice blog...keep going! 🙂

[yellappam]

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

[former_member612936]

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.

[former_member612936]

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

[maheshpalavalli]

Hi vagoel,

Thanks for the update and That's good to hear 🙂 🙂 Will try out for sure 🙂

Regards,

Mahesh

[yellappam]

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.

[former_member612936]

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

[yellappam]

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

[former_member612936]

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

[former_member215511]

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

[former_member205625]

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

[hitesh2]

Vaibhav,

 

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

 

Regards,

Hitesh

[vaibhav_goel_sap_1986]

Hi Hitesh,

 

Its in the XML View code.

customData:useSmartField = "false"

customData: useSmartToggle="true"

 

Regards,

Vaibhav

 

[hitesh2]

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

[vaibhav_goel_sap_1986]

Superb!

Happy to help 🙂

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

Any thing interesting will be good to know

 

Thanks.

[former_member757119]

Awesome blog .

[former_member205625]

Thanks Prashanth

[former_member13323]

@yellappam

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)

[SilvanoSilva]

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?

[former_member831919]

Hello! I'm having the same error but when i apply the customData:useSmartField="false" it breaks the app and without it i have the:

Uncaught (in promise) TypeError: aColumns[i].getTemplate().getDisplay is not a function

Is there a new way to do it?

 

Thanks in advance