Skip to Content

SAP UI5 Application - Data is not dsiplaying

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.

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • author's profile photo Former Member
    Former Member
    Posted on Sep 16, 2016 at 07:07 AM

    Hi 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
    10|10000 characters needed characters exceeded

  • 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
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.