on 01-07-2014 10:05 PM
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!
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
$ .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");
});
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?
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
Hello Saneth Kumar,
Could you please share the solution for your question?
Thanks
Sangamesh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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!
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
84 | |
25 | |
12 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.