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:
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:
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:
3. Convert the JSON string to a JavaScript object
var vjson = JSON.parse(ojson.AGREEMENT_JSON);
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 ]
});
}
});
Output
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
10 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |