Skip to Content

While developing SAPUI5 applications there would be scenarios where you can’t set the oModel directly to an UI control (e.g.: sap.m.List or Table). We need to massage the data and change it to a structure that fulfils the requirement then set it.

We had one scenario wherein the back-end system was sending JSON data with a quite complex structure. NW gateway needed to expose the data into oData.

There were two options:

  1. Break the JSON into different operations/entities using ABAP and link them in NW gateway project
  2. Just pass the JSON to UI client side as a string and convert it into an JavaScript object

We had chosen the second option to avoid lots of ABAP work at NW gateway. NW gateway is not very friendly for complex or deep structured oData services.

Here I will explain the steps:

  1. Expose a NW gateway oData that responds the JSON as a string
  2. Make a oModel.read (HTTP GET) call to get the string at client side
  3. Convert the JSON string to a JavaScript object
  4. Convert the main JavaScript object to smaller objects as per your need
  5. Create JSON Model and map it to your control
  1. Expose a NW gateway oData that responds the JSON as a string

JSON.PNG

  2. Make a oModel.read (HTTP GET) call to get the string at client side


ui5.utils.getData = function(ojson){
  var sServiceUrl = "/sap/opu/odata/sap/ZGW_REST_SRV";   
// create OData model instance with service URL and JSON format
  var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true );
  try {
   oAbort = oModel.read("/AGREEMENT('')",
                              undefined,
                              undefined,
                              false,
                              function _OnSuccess(oData, response) {
                                     window.ojson = oData;
                                 },
                              function _OnError(oError){                               
                                 }                            
         );
  }
   catch(ex) {
   alert(ex);
  }
}

Output:

ojson.PNG

oData.PNG

3. Convert the JSON string to a JavaScript object


var vjson = JSON.parse(ojson.AGREEMENT_JSON);

Parse.PNG

4. Convert the JSON string to a JavaScript object

      loop through vjson object to create your own json objects. In this example I am directly using vjson to create the JSON model.

5. Create JSON Model and map it to your control


sap.ui.jsview("ui5.ui5", {
  getControllerName : function() {
  return "ui5.ui5";
  },
  createContent : function(oController) {
  var vjson = JSON.parse(ojson.AGREEMENT_JSON);
  var list = new sap.m.List("list", {
     headerText: "Quote List",
     growing: true,
     growingThreshold: 4,
     growingScrollToLoad: false
  })
  var oModel = new sap.ui.model.json.JSONModel(vjson.data);
  list.setModel(oModel);
  var StList = new sap.m.StandardListItem("StList", {
  title: "{id}",
  description: "{type}"
  });
  list.bindAggregation("items", "/",StList);
  return new sap.m.Page({
  title: "Quote",
  content: [ list ]
  });
  }
});

ou.PNG

Output

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply