Skip to Content
Actions

Transferring complex structured data from UI to XSJS – POSTing JSON

June 23, 2014 | 2,629 Views |
 Databasedeveloper centerhana devcenterhana developer centerhana-studiojsonjsonmodel
Follow RSS

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 ).

table.JPG

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 :

call.JPG

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”

To report this post you need to login first.

16 Comments

You must be Logged on to comment or reply to a post.

    1. Sreehari V Pillai Post author

      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 ?

      (0) 
  3. Sergio Guerrero

    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 –

    (0) 
          2. SAVITH S

            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

            (0) 
    1. Sreehari V Pillai Post author

      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

      (0) 
  6. pulakesh sardar

    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

    (0) 
    1. Sreehari V Pillai Post author

      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

      (0) 

Leave a Reply