Transferring complex structured data from UI to XSJS – POSTing JSON

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”