cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Binding JSON Data Model to SAPUI5 Table

Go to solution
Former Member

on ‎01-19-2018 9:07 AM

0 Kudos

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>&c...

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>
Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

former_member185280
Active Contributor
‎01-19-2018 2:04 PM
0 Kudos

Try "/Rowsets/Rowset/0/Row"

Regards,
Christian

Show replies
Show replies
Former Member
‎01-22-2018 1:11 PM
0 Kudos

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>

Answers (1)

Answers (1)

pablosilva80
Explorer
‎01-23-2018 5: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);

Show replies
Show replies
Ask a Question