cancel
Showing results for 
Search instead for 
Did you mean: 

Populate table columns dynamically using oData or SQL

Former Member
0 Kudos

Hi All,

I've created an application that accesses and renders a HANA table on a webpage. However, the tables columns are static and the headers are hard-coded.

Is there a way to dynamically display the table columns and headers without having to hard code it? So, when new columns are added to the table, I wont need to go back and write more code to accommodate the new column/s

Here's a sample of my table.


//Create Table

  oTable = new sap.ui.table.DataTable({

  id: "productTable",

    title: "Carbon Footprint Data",

    selectionMode : sap.ui.table.SelectionMode.Single,

  visibleRowCount: 20,

  editable : false,                                  

       enableColumnReordering:true

    });

 

    //Add Columns Statically - Want this to be done dynamically in case I add more columns to the table.

 

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text:"ID"}),

  template: new sap.ui.commons.TextField().bindProperty("value","ID"),

  sortProperty: "ID",

  filterProperty: "ID"}));

 

 

    oTable.addColumn(new sap.ui.table.Column({

    label:new sap.ui.commons.Label({text:"Country"}),

    template: new sap.ui.commons.TextField().bindProperty("value","Country"),

    sortProperty: "Country",

    filterProperty: "Country"}));

 

    oTable.addColumn(new sap.ui.table.Column({

    label:new sap.ui.commons.Label({text:"Emitter Type"}),

    template: new sap.ui.commons.TextField().bindProperty("value","Emitter"),

    sortProperty: "Emitter",

    filterProperty: "Emitter"}));

 

    oTable.addColumn(new sap.ui.table.Column({

    label:new sap.ui.commons.Label({text:"Quarter - Year"}),

    template: new sap.ui.commons.TextField().bindProperty("value","Quarter"),

    sortProperty: "Quarter",

    filterProperty: "Quarter"}));

 

    oTable.addColumn(new sap.ui.table.Column({

    label:new sap.ui.commons.Label({text:"Carbon Footprint"}),

    template: new sap.ui.commons.TextField().bindProperty("value","Carbon_Footprint"),

    sortProperty: "Carbon_Footprint",

    filterProperty: "Carbon_Footprint"}));

 

    //Data Binding

 

    oTable.setModel(oModel);

      oTable.bindRows("/CarbonData");

   

    oTable.placeAt("master");

Can this be done with oData or SQL?

Thank you!

Accepted Solutions (1)

Accepted Solutions (1)

surendra_pamidi
Contributor
0 Kudos

Hi Saneth,

Use for loop to do that. After getting oData you can know howmany number columns are there. So that create one column template and use for loop. If there are 'n' number of columns. Use that number in for loop. So that it will automatically create that number of columns.

Here the main thing is addin path in variables. Use carefully adding variables in the place of 'bindProperty' path... You should get it by doing that...

Regards,

Surendra.

Former Member
0 Kudos

Thanks Surendra,

Could you please tell me how I would get the Column count of my table? Is there a particular method that returns the value?

I tried looking it up in the UI5 API reference, but couldn't find anything.

Please let me know.

Thanks again!

Saneth

surendra_pamidi
Contributor
0 Kudos

Hi Saneth,

You are getting data from oData. Inside get json if you define column template, it will automatically create 'n' number of columns.

And set the model also inside getjson..

Regards,

Surendra.

kammaje_cis
Active Contributor
0 Kudos

The moment you instantiate the model, model instance will contain the metadata.

Example:

var oModel = sap.ui.model.odata.ODataModel('http://services.odata.org/V2/OData/OData.svc');

Now,

oModel.oMetadata.oMetadata.dataServices.schema[0] will ocntain all the Entity Types and each of those entity type will have properties inside.

Thanks

Krishna

surendra_pamidi
Contributor
0 Kudos

        $ .getJSON(

  url,

  function(data) {

     oModel.setData({

  path : data.d.results

  });

    

       oTable.addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text: ""}),

  template: new sap.ui.commons.TextView().bindProperty("text", ""),

  width: "200px"

  }));

  oTable.setModel(oModel);

            oTable.bindRows("/path");

});

Former Member
0 Kudos

Hi Krishna,

Below is the code I'm trying to use;


oModel.read("/CarbonData",null,null,null,function(){

  var metadata = oModel.getServiceMetadata();

  var entityRef = metadata.dataServices.schema[0].entityType[2]; //-----------------------------> Error in this line

  var listOfProperties = entityRef.property;

  for ( var i = 0; i < listOfProperties.length; i++) {

  oTable.addColumn(new sap.ui.table.Column().setLabel(

  new sap.ui.commons.Label({

  text : listOfProperties[i].name,

  })).setTemplate(

  new sap.ui.commons.TextField().bindProperty("value",

  listOfProperties[i].name))) }

  oTable.setModel(oModel);

  oTable.bindRows("/CarbonData");

  });

But I'm getting an error like;

Any idea what the mistake is?

Former Member
0 Kudos

Thank you Surendra,

I tried your method, but wasn't able to get an output.

Could you please check the code in the reply below? That seems to be working to some extent.

kammaje_cis
Active Contributor
0 Kudos

You need to read the metadata after you instantiate the model. Not inside the callback method of read method.

former_member91307
Contributor
0 Kudos

Hi Saneth,

entityType[2] in the post refers to entity 'Customer' of http://services.odata.org/V3/Northwind/Northwind.svc/$metadata which is this third in the array

Similarly entity 'CarbonData' might be at a different index other 2 than in the entityType array.

Thanks and Regards, Venkatesh

Answers (2)

Answers (2)

Former Member
0 Kudos

Hello Saneth Kumar,

Could you please share the solution for your question?

Thanks

Sangamesh

Former Member
0 Kudos

Hi Sangamesh,

Sorry for the delay!

Here's a snippet of the code.


//CREATE TABLE

oTable = new sap.ui.table.Table( 'table',

  {

    selectionMode : sap.ui.table.SelectionMode.Single,

  visibleRowCount: 20,

  editable : false,                                   

      

    });

//LOAD TABLE

function loadTable()

  {

  oModel.read(oDataPath,null,null,null,function(){

  metadata = oModel.getServiceMetadata();

  entityRef = metadata.dataServices.schema[0].entityType[oDataIndex];

  listOfProperties = entityRef.property;

  oTable.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text:"Edit/Delete"}),

    template: oButtonLayout,

    width: "120px"

  

    }));

  for ( var i = 0; i < listOfProperties.length; i++) {

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text : listOfProperties[i].name}),

  template: new sap.ui.commons.TextField().bindProperty("value", listOfProperties[i].name)

  })) 

  }

  oTable.setModel(oModel); // set model to Table

  oTable.bindRows(oDataPath); // oDataPath is the alias of the table in the oData Service

  });

  }d

Please let me know if you need any clarification.

Thanks!

Former Member
0 Kudos

Hello Saneth,

Thank you so much!!

Regards

Sangamesh

kammaje_cis
Active Contributor
0 Kudos

Saneth,

That would require you to read the metadata of the service and create one column for each property of the entity.

If you see the oData Explorer inside 'Gateway as a Service' in the trial Hana Cloud platform, this concept was used there.