Skip to Content

Binding JSON Data Model to SAPUI5 Table

Hello,

I am trying to bind a query result to a SAPUI5 table but, it does not return any data.

The ajax function successfully prints the rowsets to console but I can't figure out how to bind it to the table.

All the other questions I have seen answered seem to work this way but I might be missing something?

Load url path looks like this :

http://<server>:<port>/XMII/Illuminator?service=OData&mode=FixedQuery&QueryTemplate=<templatename>&content-type=text/json

Please help.

My json type rowset looks like this when the url is entered straight into the browser:

{ "Rowsets" : { 
	"DateCreated" : "2018-01-19T07:41:08", "Version" : "15.1 SP3 Patch 31 (06-Jul-2017)", "StartDate" : "2015-07-14T10:33:05+0100", "EndDate" : "2017-12-11T10:33:21+0000", "CachedTime" : "", 
	"Rowset" : [ 
	{ "Columns" : { 
		"Column" : [ 
		{ "Name" : "TIME", "SourceColumn" : "TIME", "Description" : "TIME", "SQLDataType" : 12, "MinRange" : 1.0, "MaxRange" : 1.0 } ] }, 
	"Row" : [ 
		{ "TIME" : "0" } ]
		 } ]
	 }
 }

My code:

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>Page...</TITLE>
	<META http-equiv="X-UA-Compatible" content="IE=edge">
	<META http-equiv='cache-control' content='no-cache'>
	<META http-equiv='expires' content='0'>
	<META http-equiv='pragma' content='no-cache'>
     	<script src="https://sapui5.hana.ondemand.com/1.42.6/resources/sap-ui-core.js"
     	     type="text/javascript"
             id="sap-ui-bootstrap"
	     data-sap-ui-xx-bindingSyntax="complex"
             data-sap-ui-libs="sap.ui.ux3,sap.ui.commons,sap.ui.table,sap.viz, sap.suite.ui.commons, sap.ui.core" 
              data-sap-ui-theme="sap_ux">
         </script>


<script>
$(document).ready(function () {
var oTable = new sap.ui.table.Table({
               title : "Test Table",
                visibleRowCount : 10,
                width : "500px",
               selectionMode: sap.ui.table.SelectionMode.Single,
               editable: false
                            });




var oModel = new sap.ui.model.json.JSONModel();
var url = odata_url_link;
var jsonModel = oModel.loadData(url);
$.ajax({
	url : url,
	contentType : "text/json",
	dataType : 'json',
	type : 'POST',
	success : function (data, textStatus, jqXHR){
		oModel.setData(data);
                sap.ui.getCore().setModel(oModel);
		console.log(data);
	},
	
	error :  function(jqXHR,textStatus,errorThrown) {
	}
});

oModel.setData({modelData: jsonModel});
oTable.setModel(oModel);
oTable.bindRows("/Rowsets");
oTable.placeAt("content");
});
</script>
</HEAD>

<body>
<div id="content"></div>

</body>
</HTML>
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Jan 19 at 02:04 PM

    Try "/Rowsets/Rowset/0/Row"

    Regards,
    Christian

    Add comment
    10|10000 characters needed characters exceeded

    • Thanks Christain,

      This worked along with defining the available columns.

      Kind Regards,

      Yinka.

      <script>
      $(document).ready(function () {
      //Make Table
      var oTable = new sap.ui.table.Table({
                     title : "oData Model Example",
                      visibleRowCount : 5,
                      width : "500px",
                   selectionMode: sap.ui.table.SelectionMode.Single,
                    editable: false
                                  });
      //Add Column
      oTable.addColumn( new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "TIME"}),
                     template: new sap.ui.commons.TextView({text:"{TIME}"}),
                      sortProperty: "text",
                      filterProperty: "text",
                      width: "100px"
                  })
      );
      
      
      var oModel = new sap.ui.model.json.JSONModel();
      var url = 'odata_url_link';
      var jsonModel = oModel.loadData(url);
      
      oTable.setModel(oModel);
      oTable.bindRows("/Rowsets/Rowset/0/Row");
      oTable.placeAt("content");
      });
      
      
      </script>
      
  • avatar image
    Former Member
    Jan 23 at 05:34 PM

    Complementing, the code is sufficient if executed in the workbench, but if it runs out (Eclipse for example), will need the authentication and change the url, it follows:

    var url = "proxy/http/<server>:<port>/XMII/Illuminator?service=OData&mode=FixedQuery&QueryTemplate=<templatename>&content-type=text/json";

    var oHeaders = {

    "Authorization" : "Basic " + btoa(“user” + ":" + “password”)

    };

    var oModel = new sap.ui.model.json.JSONModel();

    var jsonModel = oModel.loadData(url, null, true, "GET", null, false, oHeaders);

    Add comment
    10|10000 characters needed characters exceeded