Skip to Content

SAPUI5: Table without content despite JSON data binding

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    Aug 30, 2017 at 06:57 AM

    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++;
    			}
    		},
    
    Add comment
    10|10000 characters needed characters exceeded

  • Aug 25, 2017 at 04:36 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 29, 2017 at 08:47 PM

    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}"/>
    Add comment
    10|10000 characters needed characters exceeded

  • Aug 29, 2017 at 02:30 PM

    the path should be /oData/systemOverview

    Add comment
    10|10000 characters needed characters exceeded