Skip to Content
0
Sep 16, 2016 at 05:15 AM

SAP UI5 Application - Data is not dsiplaying

210 Views

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.