Hello All,
I am new to SAP UI5 development. I created simple ODATA service and try to get data from UI5 application.But i am unable to bind data into display screen .so i was wondering if you could help me to resolve the issue.
My code as follows .
Controller.js
sap.ui.controller("sapui5_ex1.sapui_js_ex1", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf sapui5_ex1.sapui_js_ex1
*/
onInit: function() {
var sServiceUrl = "/sap/opu/odata/sap/ZNWG_UI5_SRV/";
var oPath = "/RequestSet(EmpId='')?$format=json";
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,{ json: true, loadMetadataAsync: true });
var oJsonModel = new sap.ui.model.json.JSONModel();
oModel.read(oPath, null, null, false, function(oData,response){
oJsonModel.setData({ items:oData });
});
sap.ui.getCore().setModel(oJsonModel);
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf sapui5_ex1.sapui_js_ex1
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf sapui5_ex1.sapui_js_ex1
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf sapui5_ex1.sapui_js_ex1
*/
// onExit: function() {
//
// }
});
View.js
sap.ui.jsview("sapui5_ex1.sapui_js_ex1", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf sapui5_ex1.sapui_js_ex1
*/
getControllerName : function() {
return "sapui5_ex1.sapui_js_ex1";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf sapui5_ex1.sapui_js_ex1
*/
createContent : function(oController) {
var oPage = new sap.m.Page({
title: "Employee Details",
});
//Table or Dashboard to show the Employee Data
var oTable = new sap.m.Table({
id: "Employees",
itemPress : [ oController.ItemPress,oController ],
columns: [
new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Emp ID" }) }),
new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Name" })
}),
new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Address"
})
}),
new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Designation"
})
})
]
});
oTable.bindItems(
"/items", new sap.m.ColumnListItem({
cells: [
new sap.m.Label({
text: "{EmpId}"
}),
new sap.m.Label({
text: "{EmpName}"
}),
new sap.m.Label({
text: "{EmpAddress}"
}),
new sap.m.Label({
text: "{EmpDesig}"
})
]
}));
oPage.addContent(oTable);
return oPage;
}
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("sapui5_ex1");
var app = new sap.m.App({initialPage:"idsapui_js_ex11"});
var page = sap.ui.view({id:"idsapui_js_ex11", viewName:"sapui5_ex1.sapui_js_ex1", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Thanks.
2 Answers
-
Former MemberPosted on Sep 16, 2016 at 07:07 AMHi Suresh ,
Actually you need to get the array data from the result set of OdataModel to the item set of the JsonModel :
you can check the odata model response in networks tab of chrome .. you will see the results set
replace oJsonModel.setData({ items:oData }); with oJsonModel.setData({ items:oData.results});
if this doesnt work than can you check in the network tab that data is coming from the backend ...
thanks
Viplove
Add a comment
-
Posted on Sep 16, 2016 at 07:44 AM
Hi Suresh,
your binding path to table cells are wrong, your data is inside "items" and also "results" array may exists in your oData (in side service response), so your binding would not be only {EmpId}.
need to change your code instead of :
oModel.read(oPath, null, null, false, function(oData, response) {
oJsonModel.setData({
items: oData
});
});
to:
oModel.read(oPath, null, null, false, function(oData, response) {
//check oData in debug whether records are inside "results" array or not
//if "results" exists
oJsonModel.setData(oData.results);
//else
oJsonModel.setData(oData);
});
or change your property binding path from {EmpId} to {items/results/EmpId} may be.
Regards,
Akhilesh
Add a comment
Add a comment