Using sap.m.Table for creating a table and populating the contents

[former_member187447]

Hi Folks,

I have created a table and populated the contents from a json structure into the table successfully using the following view code. But now I am trying to acheive the same using sap.m library and I am having issue even displaying the table rows and columns. Also I have the code using the sap.m library below. Please suggest.

sap.ui.jsview("appjson.v1", {
/** Specifies the Controller belonging to this View. 
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf appjson.v1
*/ 
getControllerName : function() {
return "appjson.v1";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
* Since the Controller is given to this method, its event handlers can be attached right away. 
* @memberOf appjson.v1
*/ 
createContent : function(oController) {

       var value = {mycomp:[{Empno:'1234',Ename:'test'},{Empno:'93939',Ename:'abcd'}]};
       var omodel = new sap.ui.model.json.JSONModel();
       omodel.setData(value);

var tb = new sap.ui.table.Table();

var col1 = new sap.ui.table.Column();

var l2 = new sap.ui.commons.Label();
    l2.setText('Employee Number');
col1.setLabel(l2);
tb.addColumn(col1);
var tv1 = new sap.ui.commons.TextView();
tv1.bindProperty('text',{path:'Empno'});
col1.setTemplate(tv1);

col1 = new sap.ui.table.Column();
l2 = new sap.ui.commons.Label();
l2.setText('Employee Name');
col1.setLabel(l2);
tb.addColumn(col1);
var tv2 = new sap.ui.commons.TextView();
tv2.bindProperty('text',{path:'Ename'});
col1.setTemplate(tv2);

tb.setModel(omodel);
tb.bindRows('/mycomp');
tb.placeAt('content');

}
});

The code using sap.m library, please suggest corrections

sap.ui.jsview("appmjson.v1", {
/** Specifies the Controller belonging to this View. 
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf appmjson.v1
*/ 
getControllerName : function() {
return "appmjson.v1";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
* Since the Controller is given to this method, its event handlers can be attached right away. 
* @memberOf appmjson.v1
*/ 
createContent : function(oController) {
 return new sap.m.Page({
title: "Title",

    mycomp: [
{Empno:'1234',
 Ename:'test'
},
{
 Empno:'93939',
 Ename:'abcd'
}
]
});
  var omodel = new sap.ui.model.json.JSONModel();
  omodel.setData(mycomp);

 var tb = new sap.m.Table();
var col1 = new sap.m.Column();

    var l2 = new sap.m.Label("lb1",{text:'Employee Number'});
l2.setText('Employee Number');
col1.setLabel(l2);
tb.addColumn(col1);
var tv1 = new sap.m.TextView();
tv1.bindProperty('text',{path:'Empno'});
col1.setTemplate(tv1);

col1 = new sap.ui.table.Column();
l2 = new sap.m.Label("lb2",{text:'Employee Name'});
l2.setText('Employee Name');
col1.setLabel(l2);
tb.addColumn(col1);
var tv2 = new sap.m.TextView();
tv2.bindProperty('text',{path:'Ename'});
col1.setTemplate(tv2);

tb.setModel(omodel);
oTable.bindRows('/mycomp');
oTable.placeAt('content');
}
});

[Joseph_BERTHE]

Hello,

Use XML Views, it is the best practice recommend by SAP. And for sure, it is simplier then JS View

Regards,