Generate a JSON structure based on the data obtained from your AJAX POST response. Connect the specific cell in your table to this newly created JSON model. To filter and display data from the JSON model based on the OData values for each row, utilize a formatter function with custom logic.
Explore an example showcasing data retrieval from Northwind along with a fabricated JSON model: https://jsbin.com/racenaqoki/edit?html,output
Demonstrate a real-time AJAX call scenario:
https://jsbin.com/jivomamuvi/edit?html,output
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- linking a controller method to the Button's "press" event
- incorporating some plain HTML elements
note: usually stored in a separate file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Page>
<Table items="{/Orders}" updateFinished="onTableUpdateFinished">
<columns>
<Column >
<Text text="Value Obtained From OData"/>
</Column>
<Column>
<Text text="Value Extracted From AJAX Response"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{CustomerID}"/>
<ObjectIdentifier text="{parts:[{path:'CustomerID'}, {path:'myOtherModel>/'}], formatter: '.myFormatter'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</Page>
</mvc:View>
</script>
<script>
// defining a basic Controller type
sap.ui.controller("my.own.controller", {
onInit: function(){
var myOtherModel = new sap.ui.model.json.JSONModel();
this.getView().setModel(myOtherModel, "myOtherModel");
//Perform an AJAX call here to retrieve data through a POST request
/*
$.ajax({
type: "POST",
url: url,
data: data,
success: this.ajaxSuccess,
dataType: dataType
});
*/
//Simulate a successful API response by providing sample data
var data = {
VINET: {
message: "VINET Rocks!!"
},
WARTH: {
message: "WARTH is good company!!"
},
RICSU: {
message: "RICSU I don't like"
},
HANAR: {
message: "HANAR was my first customer"
}
}
this.ajaxSuccess(data);
},
ajaxSuccess: function(data){
this.getView().getModel("myOtherModel").setData(data)
},
myFormatter: function(sCustomerID, otherModelData){
// Custom formatter executed per table row
// First parameter holds value bound in the initial column
// Second parameter includes node to extract from the second model
//Implement desired operations and return output for 'text' property
if(otherModelData[sCustomerID]){
// Check if given Customer ID has corresponding node in second model, return its message
return otherModelData[sCustomerID].message;
}
//Else return empty string
return "";
}
});
/*** APPLICATION CODE ***/
// Establish a Model and link it to the View
// Utilizing HEROKU Proxy to handle potential CORS restrictions
var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access
var oNorthwindModel = new sap.ui.model.odata.ODataModel(uri, {
maxDataServiceVersion: "2.0"
});
// Create the View instance
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// Set the OData Model
myView.setModel(oNorthwindModel);
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>