SAPUI5: Table without content despite JSON data binding

[timkudla]

Hi community,

I need your help, because I have a problem with a SAPUI5 table.

Short some background information. The following code examples worked well when I use a static JSON file. Now I integrated a oData Service, but the structure of the JSON remains the same.
Although there were no other code changes the table shows only "No Data".

Main.view.xml:

<Table id="table" width="auto" items="{ path: '/systemOverview', sorter: { path: 'systemOverview', descending: false } }">
	<columns>
	  <Column id="nameColumn">
            <Text text="{i18n>tableHeadline}" id="systemColumnTitle"/>
	  </Column>
	  <Column>
	    <Text text="Quantity"/>
	  </Column>
	</columns>
	<items>
	  <ColumnListItem type="Navigation" press="showDetail">
	  <cells>
	    <ObjectIdentifier title="{/systemName}"/>
	      <x:StackedBarMicroChart>							<x:bars>								  <x:StackedBarMicroChartBar value="{/quantities/case1}"/>
		  <x:StackedBarMicroChartBar value="{/quantities/case2}"/>
		  <x:StackedBarMicroChartBar value="{/quantities/case3}"/>
		  <x:StackedBarMicroChartBar value="{/quantities/case4}"/>
		  <x:StackedBarMicroChartBar value="{/quantities/case5}"/>		</x:bars>
	      </x:StackedBarMicroChart>
	    </cells>
	  </ColumnListItem>
	</items>
</Table>

Main.controller.js:

onInit: function() {
	this.getView().setModel(new JSONModel({
		systemOverview: []
	}));
},

/*<br>  some other functions such as call of fillTable()<br>*/

fillTable: function(data) {
	this.getView().getModel().setProperty("systemOverview", data);
	console.log(JSON.stringify(data));
			
}

The result of "console.log(JSON.stringify(data));"

[
  {
    "systemName":"sys1",
    "quantities":
    {
      "case1":29,
      "case2":29,
      "case3":29,
      "case4":29,
      "case5":29
    }
  }
]

I hope someone can find the mistake I did in my code, because I have no idea how to fix and there is no error message in the console...

Thanks in advance!

Tim

[timkudla · Accepted solution]

Thanks both for your replies!

The problem was at the onInit() function. I don´t know why, but the function was called twice and so the model was not accessable.

I solved it as follows:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
	"use strict";

	var flag = 0;

	return Controller.extend("LicenseManagementDashboard.controller.Main", {

		onInit: function() {
			if (flag === 0) {
				this.getView().setModel(new JSONModel({
					systemOverview: []
				}));
				flag++;
			}
		},

[former_member266477]

Hi Tim,

1. If you are using OData model as a default model for your application, "/systemOverview" will trigger a call to the back end system. In such case "/systemOverview" should be replaced with the corresponding entity set name. Also, you have to remove "/" from the binding path of the cells, as this should be the relative path.
2. Give some id to your JSON model and try.

this.getView().setModel(new JSONModel({
		systemOverview:[]}), "oModel");

For binding Items:

<Tableid="table" width="auto" items="{ path: 'oModel>/systemOverview', sorter: { path: 'oModel>systemOverview', descending: false } }">

for property binding:

<x:StackedBarMicroChartBar value="{oModel>quantities/case1}"/>

[junwu]

the path should be /oData/systemOverview

[Sharathmg]

The path: '/systemOverview' does not seem to be part of the JSON file returned by the oData service. Just Keep "/" instead of systemOverview

[timkudla]

That seems not correct because if I log the model with "console.log(this.getView().getModel())", I can see that the data was stored inside: