Create a Table dynamically

[Former Member]

Hi Experts,

I have a requirement where I have to create dynamic tabs with table when I hit the service ill get the different types.

For example: I have a service  which has multiple types (let say type1 , type2).how many types that I have in service that many icontabFilters i need to create withe respect to table.

I'm getting binding issue for table. Please can any one help me on this.

IconTab--> Main

IcontabFilter1    IcontabFilter2

Table1                    table2

Code: 

var data = {"TABLES":{}};

  for(var i in charctersticTable.getItems()){

  var oDynamicTable = new sap.m.Table({

  columns:[

  new sap.m.Column({

  header:[new sap.m.Label({text:"Characteristics"}),

  ]

  })

  ]

  });

  var oColumnListItem = new sap.m.ColumnListItem({

  cells:[

  new sap.m.Label({text:"{CharacteristicsModel>ATBEZ}"})

  ]

  });

  var tabl = charctersticTable.getItems()[i]

     tabl.addContent(oDynamicTable);   

     var oGrnam = charctersticTable.getItems()[i].getProperty('text');

     var contextFilter = new sap.ui.model.Filter([new sap.ui.model.Filter("GRNAM", sap.ui.model.FilterOperator.EQ,oGrnam),

                                          new sap.ui.model.Filter("CLASS", sap.ui.model.FilterOperator.EQ,"BATCH_CLASS")],true)

  var characteristics = [] // which is array it has multiple objects

  var oModelChar = this.getView().getModel("CharacteristicsModel");

  if(oModelChar !== undefined){

  // oModelChar.getData().TABLES[oGrnam]=[];

  // for(var i in characteristics){

  // oModelChar.getData().TABLES[oGrnam].push(characteristics[i]);

  // }

  // oModelChar.refresh();

  }else{

  data.TABLES[oGrnam]= characteristics;

  var oModel = new sap.ui.model.json.JSONModel(data);

         this.getView().setModel(oModel, "CharacteristicsModel");

  }

         oDynamicTable.bindItems("CharacteristicsModel>/TABLES/"+oGrnam,oColumnListItem);

  }

Thanks,

Ashok.

[Former Member · Accepted solution]

hope this helps

Dynamic Binding of SAPUI5 Table Columns and Rows | sap abap | sapui5 made easy

[Former Member · Accepted solution]

Hi,

Can you have any example for m Table with named model.

Thanks,

Ashok.

[Former Member · Accepted solution]

hope this helps

JS Bin - Collaborative JavaScript Debugging

Regards

[Former Member · Accepted solution]

Hi,

Thanks for your mail.But I want to create table dynamically with data.

let me explain my requirement again:

1. When I hit the service i'll get different types. lets say I got two different types(t1 and t2). Now I have 2 types so, I have to show two different tabs(these tabs should add dynamically). If I get 3 types in service I have to show 3 tabs.

2. Now I have a types, I have to pass these types into another service to create a table(If I have two types I have to create 2 table and each table is displayed with that particular tab).

tab1 has table1

tab2 -->table2

I'm able to get the point 1 but im unable to get point 2. below is my code to create dynamic table with data.

for(var i in charctersticTable.getItems()){

  var oDynamicTable = new sap.m.Table({

  columns:[

  new sap.m.Column({

  header:[new sap.m.Label({text:"Characteristics"}),

  ]

  })

  ]

  });

  var oDescription = new sap.m.Label();

  var oColumnListItem = new sap.m.ColumnListItem({

  cells:[oDescription]

  });

  var tabl = charctersticTable.getItems()[i] // to get icon tab filter

     tabl.addContent(oDynamicTable);   

     var oGrnam = charctersticTable.getItems()[i].getProperty('text'); // type that I selected

     var contextFilter = new sap.ui.model.Filter([new sap.ui.model.Filter("GRNAM", sap.ui.model.FilterOperator.EQ,oGrnam),

                                          new sap.ui.model.Filter("CLASS", sap.ui.model.FilterOperator.EQ,"BATCH_CLASS")],true)

// var characteristics = [] // when I hit the service I'll get array of records

  var oModelChar = this.getView().getModel("CharacteristicsModel");

  if(oModelChar !== undefined){

  oModelChar.getData().TABLES[oGrnam]=[];

  for(var i in characteristics){

  oModelChar.getData().TABLES[oGrnam].push(characteristics[i]);

  }

  oModelChar.refresh();

  }else{

  data.TABLES[oGrnam]= characteristics;

  var oModel = new sap.ui.model.json.JSONModel(data);

         this.getView().setModel(oModel, "CharacteristicsModel");

  }

         oDynamicTable.bindItems("CharacteristicsModel>/TABLES/"+oGrnam,oColumnListItem);

  oDescription.bindProperty("text","CharacteristicsModel>ATBEZ");

  }

Thanks in advance.

Thanks,

Ashok.

[Former Member · Accepted solution]

I got the solution. I created dynamic model.

Thanks,

Ashok.

[agentry_src · Accepted solution]

Please mark this Discussion with a Correct Answer (closes, but does not lock the Discussion) and Helpful Answer where appropriate. See http://scn.sap.com/community/support/blog/2013/04/03/how-to-close-a-discussion-and-why   Even if you discovered the solution without any outside contributions, it helps others to understand what the solution turned out to be. 

Do not use Assumed Answered as it confuses anyone looking for the specific answer.  If you dig into the Getting Started link (top right of each SCN page), you are only instructed to mark Helpful or Correct Answers to Discussion responses. 

Thanks, Mike (Moderator)

SAP Technology RIG