sap.ui.table not showing data - odata

Question

I am new to SAPUI5. Currently I am trying to create a simple app, showing a table based reporting with data from an SAP-system (odata). I use the SAP Web IDE as environment.
In the first attempt, I used the standard control sap.m.table. The worked fine for me. Now I wanted to use a simple sort function for my columns. Therefore I changed to sap.ui.table (seems a bit better for that need).
Starting the application, only the header part is showing (title) but my table doesn't appaer.
Debugging the apploication shows me correct data binding. Variable oTable gets the data, that is in variable oJsonModel.
What is missing for showing my table and why? The console in Chrome doesn't throw any error.
My application consists of one xml-view:
<mvc:View xmlns="sap.ui.table" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified" xmlns:m="sap.m"
xmlns:c="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="Z_HCM_CICO_REP_2.controller.zbkTable">
<m:Page title="{i18n>appTitle}" showHeader="true">
<m:content>
<Table id="zbkTable" rows="{/TimeEntrySet}">
<columns>
<Column id="pernr" sortProperty="pernr">
<m:Label text="{i18n>pernr}" textAlign="Center"/>
<template>
<m:Text text="{Pernr}"/>
</template>
</Column>
<Column id="ename" sortProperty="ename">
<m:Label text="{i18n>ename}" textAlign="Center"/>
<template>
<m:Text text="{Name}"/>
</template>
</Column>
<Column id="date" sortProperty="date">
<m:Label text="{i18n>date}" textAlign="Center"/>
<template>
<m:Text text="{Ldate}"/>
</template>
</Column>
<Column id="time" sortProperty="time">
<m:Label text="{i18n>time}" textAlign="Center"/>
<template>
<m:Text text="{Ltime}"/>
</template>
</Column>
<Column id="satza" sortProperty="satza">
<m:Label text="{i18n>satza}" textAlign="Center"/>
<template>
<m:Text text="{Ddtext}"/>
</template>
</Column>
<Column id="note" sortProperty="note">
<m:Label text="{i18n>note}" textAlign="Center"/>
<template>
<m:Text text="{NoticeText}"/>
</template>
</Column>
</columns>
</Table>
</m:content>
</m:Page>
My controller coding is as follows:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/table/SortOrder",
"sap/ui/model/Sorter"
], function(Controller, SortOrder, Sorter) {
"use strict";
return Controller.extend("Z_HCM_CICO_REP_2.controller.zbkTable", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf Z_HCM_CICO_REP_2.view.zbkTable
*/
onInit: function() {
//load cicos
var oJsonModel = new sap.ui.model.json.JSONModel();
var oView = this.getView();
var oModel = this.getOwnerComponent().getModel();
var oTable = oView.byId("zbkTable");
oTable.setModel(oJsonModel);
// var that = this;
oModel.read("/TimeEntrySet", {
success: function(oData, oResponse) {
oJsonModel.setData(oData);
var aTimeList = oJsonModel.getData().results;
$.each(aTimeList, function(index, value) {
});
//that.getOwnerComponent().setModel(oJsonModel);
},
error: function(oError) {
}
});
oView.setModel(oJsonModel);
//this.getOwnerComponent().setModel(oJsonModel);
//oTable.bindItems("/TimeEntrySet");
//Initial sorting
var oDateColumn = oView.byId("date");
//oView.byId("zbkTable").sort(oDateColumn, SortOrder.Ascending);
}
});
My component coding is:
sap.ui.generic.app.AppComponent.extend("Z_HCM_CICO_REP_2.Component", {
metadata: {
"manifest": "json"
}
});
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device"
], function(UIComponent, Device) {
"use strict";
return UIComponent.extend("Z_HCM_CICO_REP_2.Component", {
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* #public
* #override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
var oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleName: "Z_HCM_CICO_REP_2.i18n.i18n"
});
sap.ui.getCore().setModel(oResourceModel, "i18n");
//load cicos
var sServiceUrl = "/sap/opu/odata/sap/ZHCM_CICO_REP_SRV/";
var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl, true);
this.setModel(oModel);
}
});
thanks in advance and best regards
Christian

Answer 1

I didn't read all your code, but you are defining your OData model in your component and then creating another JSON model in your controller. The JSON Model (the one set to the Table and the view) has the data you read 'inside /TimeEntrySet', therefore I guess there is not '/TimeEntrySet' node inside it. Just the children nodes. So the binding your are doing in your 'rows="/TimeEntrySet"' can't be resolved.
I think you don't need to replicate your data creating a JSON model in your controller. You should be able to access your OData model you define in the component.
Could you please delete all your code in the 'onInit()' function and try again?

Answer 2

Actually Rafael's answer is true. Because data should be sorted on server side, not client side. This way you would not need a json model. But anyway in addition to Rafaels answer, this should do the trick :
oModel.read("/TimeEntrySet", {
success: function(oData, oResponse) {
oJsonModel.setProperty("/TimeEntrySet",oData.results);
Your row binding should work now .