Gateway Odata service not returning data from backend in SAP UI5

Question

I am trying to build one application where i am trying to fetch data through ODATA service and trying to populate the table in SAP UI5. Below is the code

<script>    
        var oTable = new sap.ui.table.Table({
                                            title: "Outstanding Balance",
                                            visibleRowCount: 5,
                                            //firstVisibleRow: 5,
                                            selectionMode: 
                                            sap.ui.table.SelectionMode.Single

                                        });

    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "CustomerID"}),
        template: new sap.ui.commons.TextField().bindProperty("value",                                             "Customer"),
    //  sortProperty: "Customer",
        //filterProperty: "Customer",
        width: "200px"
    }));

    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Name"}),
        template: new sap.ui.commons.TextField().bindProperty("value", "Name"),
        //sortProperty: "Name",
        //filterProperty: "Name",
        width: "100px"
    }));

    var oModel = new sap.ui.model.odata.ODataModel(
    "/sap/opu/odata/sap/Z_ATC_CUSTOMER_OUTSTANDING_SRV",true,"ABCD","1234");
    oTable.setModel(oModel);
    // bind path of oDataModel to table rows
        oTable.bindRows("/CUSTOMERSet");
    oTable.placeAt("content");
        //}


//  })

Kindly help me where i am wrong. My code is running fine in the server but no data is getting populated in the table.

Rafael López Martínez Rafael López Martínez · Accepted Answer · 2017-05-27T09:35:38

Your code worked on my side using Northwind through the Heroku proxy, so you code and bindings are ok.

<!DOCTYPE html>
<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.ui.table, sap.ui.commons'
			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
		 - binding a controller method to the Button's "press" event
		 - also mixing in some plain HTML
		 note: typically this would be a standalone file -->

		<script id="view1" type="sapui5/xmlview">
		
        </script>


		<script>          
          
          var oTable = new sap.ui.table.Table({
                                            title: "Outstanding Balance",
                                            visibleRowCount: 5,
                                            //firstVisibleRow: 5,
                                            selectionMode: 
                                            sap.ui.table.SelectionMode.Single

                                        });

    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "CustomerID"}),
        template: new sap.ui.commons.TextField().bindProperty("value","CustomerID"),
    //  sortProperty: "Customer",
        //filterProperty: "Customer",
        width: "200px"
    }));

    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Orders"}),
        template: new sap.ui.commons.TextField().bindProperty("value", "OrderID"),
        //sortProperty: "Name",
        //filterProperty: "Name",
        width: "100px"
    }));

    var oModel = new sap.ui.model.odata.ODataModel(
    "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc",true,"ABCD","1234");
    oTable.setModel(oModel);
    // bind path of oDataModel to table rows
        oTable.bindRows("/Orders");
    oTable.placeAt("content");

          
		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

As you are hardcoding the service URL in your code, check in the HTTP trace if you are accesing the correct place of your service.

Find the request in your trace, get the URL where you are accessing in the "header" tab and open it in a new tab. If there is empty data there, your problem is in the Gateway/OData service. If you have an error, probably you are accessing the wrong path. Check picture

Gateway Odata service not returning data from backend in SAP UI5

1 Answers