Hi Folks,
Introduction
I would like to share one idea with you guys . I have seen couple of questions posted in SCN(and outside SCN too) regarding how to create deep entity set , how to update complex structures through OData operations etc. Well, this blog does not talk about handling these scenarios using OData calls but trying to achieving such scenarios using XSJS . Here, I am explaining how we can pass complex JSON structure directly to the XSJS context for processing.
Designing the UI5
Here we are designing the UI5 application from where the POST call will be triggered to the back end XSJS service. For this I created on simple table control with 6 columns and bind it with an OData service ( for testing it, I am using JSON model ).
Triggering the XSJS service with the JSON Data using AJAX Call
In the submit button click, we will get the table binding context and get the corresponding JSON object associated with the table. Which would contain the current values in the table. It will automatically hold any data change that we have made in the table entries.
return new sap.ui.commons.layout.MatrixLayout({
id : "matrix1",
layoutFixed : false
}).createRow(oTable).
createRow(new sap.ui.commons.Button({
text : "Submit",
press : function(evt){
//Getting the JSON data bound to the table object (oTable)
var JSONData = oTable.getBinding().getModel().oData.modelData;
//Converting the JSON object to a string variable (formalluy serialization)
var JSONString = JSON.stringify(JSONData);
//Making an AJAX POST call
$.post("proxy/Finance/XSApps/test.xsjs",//this is the target URL
{ JSON_DATA: JSONString } //Data passing with attribute naem JSON_DATA
).done(function( data ) {//Success function call
alert( "Data returned rom XSJS: " + data );
});
}In the above code snippet, all what I am doing is generating the JSON data, serializing it and attaching the same in the POST call made against the target XSJS service.
Designing the XSJS back end
Designing the XSJS back end is quite easy . We have sent the JSON data to the target XSJS through a POST call. So the required data will be available in the request object. It is a key value pair, where the key name here is JSON_DATA and the value will be the serialized JSON object. We now need to de serialize the JSON string to JSON object . JSON.parse() method would help us for this task.
var JSONString = $.request.parameters.get("JSON_DATA");//Reading the input JSON string
var JSONObj = JSON.parse(JSONString);//serializing the input string
// Now we have the JSON object with us. Do what ever manipulation you want to do on it.
//For the test case i am just returning the number of rows in the JSON object
$.response.setBody(JSONObj.length);Testing the service :
This is the smallest blog I have written.But for me , it was too helpful . When you face such a situation where you need to send complex structured data to the back end , this method would help you.
Share your views regarding performance(or anything).
Sreehari V Pillai
“Save Nature For the Future”
Good one!
very useful information.
Thank you Sree š
Could you kindly share how we can do the same without using Designing the UI5 ?
As we aware, XSJS is a web service . If not SAPUI5, same other client tool has to post the data. The reason I chose JavaScript based tool is because , here it is easy to build the JSON structure. From where you are trying to pass the data to XSJS ?
thanks for sharing this blog.. however, a quick comment here:
for POST (request) you should read the body of the request.
for GET (request) you should read the parameter.get as you have on your blog.
hope this is clear –
Hi Sergio,
What is the code to read the body of the POST request? Is there a resource I could find this?
Suneet,
you could use this line of code to get your request as a JSON object on the XSJS side
var req = JSON.parse($.request.body.asString());
Thanks Sergio. Is there a document/link that talks about these basics? Or is it the HANA developer guide?
Hello. How can we get parameters from $.request.body? And where I can search for API reference?
Hello Eugeny,
I am not sure you get parameters in a POST. You get that in a GET call.
Regards
Suneet
Hi Zabus,
Normally POST methods are passing values through the body not using the header/url. So there is no parameter concept/it is neither visible in front of user nor attaching with URL. That is the main difference here. So for extracting values, you have to extract it from json file.
var body = $.request.body;Ā // access the body of JSON
var json = JSON.parse(body); // parse the body
//extract
var values = json.C;
var temp_store = [];
for(var i in values){
temp_store[i] = values[i].Name + values[i].Mark2;
}
// assume json file contains a Parent Key “C” under that- Name: “cs” and Mark: “234”
Hope it helps –
Regards
Savith Satheesh
#very late reply -:) may be useful for others
could We transfer image from UI to xsjs???
should be possible with a multi part … Could you solve this issue ?
Sree
HiĀ Ā Former MemberĀ ,
If you set body with JSON object, something like this $.response.setBody(JSONObj) then I am assuming some sort of file will get download?
surely not. setBody will set the http body part with the given string. JSONObj in
$.response.setBody(JSONObj)
must be a string type. So , its propagated to the UI as a plain text. Not as a file . ( File download needs headers to append )
Sreehari
Hi Sreehari,
I need your help urgently on an XSJS project. I am creating a chatbot like app. And I have created an ODATA service which is fetching purchase order details from SAP backend. so from my chatbot I want to send parameters details and fetch accordingly, but I am unable to create POST function in xsjs. Please connect with me at pulakesh.05@gmail.com.
Please help me out.
Pulakesh
Hi Pulakesh,
Please describe your issues as a question in SCN and share the link here. It will be helpful to other community members as well.
Sreehari