Skip to Content
0
Jun 22, 2015 at 02:31 PM

How to get Custom column label name

319 Views

Hi All,

I have a requirement like adding manual Filter textbox in openui5 table columns(tables having default filter functionality that I should not use). That I have achieved with below code snippet.

I have created customcontrol folder in webContent and added columnTextfield.js file

columnTextfield.js

sap.ui.core.Control.extend("customcontrol.columnTextfield",{
  metadata:{
  properties :{
  "title" : "string",
  "id":"string"

  },

  events:{
  "select" : {}  
  }
  },

  init:function(){

  },
  renderer:{
  render:function(oRm,oControl){
  oRm.write('<div style="width:100%";>');
  oRm.write('<span class="custom_Filter_Column">');
  oRm.writeEscaped(oControl.getTitle());
  oRm.write('</span>');
  oRm.write('<br>');
  oRm.write('<input id="txtFilter" type="text" style="width:100%;" >');
  oRm.write('</div>');
  }
  }
});

and I have added js script into index.html file like below

<script>

sap.ui.localResources("customcontrol");

jQuery.sap.require("customcontrol.columnTextfield");

</script>

I have created Table instance and add columns into table. In those columns, instead of column label I have added my custom control like below code snippet.

//Create table instance
var oTable2 = new sap.ui.table.Table({

  //visibleRowCount: 10,
  firstVisibleRow: 3,
  selectionMode: sap.ui.table.SelectionMode.None,
  navigationMode: sap.ui.table.NavigationMode.Paginator
});
//Define columns for tables
oTable2.addColumn(new sap.ui.table.Column({
  //label: new sap.ui.commons.Label({text: "Transaction ID"}),
  label: new customcontrol.columnTextfield({ title:"Transaction ID",id:"TRANSACTION_ID"+"-"+Math.floor((Math.random() * 10000) + 1)}),
  template: new sap.ui.commons.TextView().bindProperty("text", "TRANSACTION_ID"),
  sortProperty: "TRANSACTION_ID",
  filterProperty: "TRANSACTION_ID",
  width: "150px",
  hAlign : "Center", 
  showFilterMenuEntry:false
  }));
oTable2.addColumn(new sap.ui.table.Column({
  //label: new sap.ui.commons.Label({text: "Change by"}),
  label: new customcontrol.columnTextfield({ title:"Change by",id:"CHANGE_BY"+"-"+Math.floor((Math.random() * 10000) + 1)}),
  template: new sap.ui.commons.TextView().bindProperty("text", "CHANGE_BY"),
  sortProperty: "CHANGE_BY",
  filterProperty: "CHANGE_BY",
  width: "150px",
  hAlign : "Center",
  showFilterMenuEntry:false
  }));
oTable2.addColumn(new sap.ui.table.Column({
  // label: new sap.ui.commons.Label({text: "Material"}),
  label: new customcontrol.columnTextfield({ title:"Material",id:"MATERIAL_NBR"+"-"+Math.floor((Math.random() * 10000) + 1)}),
  template: new sap.ui.commons.TextView().bindProperty("text", "MATERIAL_NBR"),
  sortProperty: "MATERIAL_NBR",
  filterProperty: "MATERIAL_NBR",
  width: "150px",
  hAlign : "Center",
  showFilterMenuEntry:false
  }));

//Define model and load the json data
var oModel = new sap.ui.model.json.JSONModel();
  oModel.loadData("model/dummy.json");
  oTable2.setModel(oModel);
  oTable2.bindRows("/results");  

My json data like below:-

{

"results":

[

{

"transactionid":"54366199-SIACT2",

"changeby":"CDM_2_3101_01_SOACT1_SIACT1 ",

"material":"2350375",

},

{

"transactionid":"54369241-SIACT2",

"changeby":"CDM_2_3101_01_SOACT1_SIACT1",

"material":"2350801",

}

]

}

So the Final out will be like attached screenshots.

Now the problem is I want to Export the table data as a CSV Format when I click the Export Link button. that code snippet I have added below

var oExportlink = new sap.ui.commons.Link({
  text:"Export",
  press:function(){
  console.log("test");
  oTable2.exportData().saveFile('sample');

  }
  });

While click the Export button I am getting the error Like TypeError: C.getLabel(...).getText is not a function. If I am using native sap label in columns(like below code snippet), I can able to Export the data as CSV

oTable2.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "Transaction ID"}),
  //label: new customcontrol.columnTextfield({ title:"Transaction ID",id:"TRANSACTION_ID"+"-"+Math.floor((Math.random() * 10000) + 1)}),
  template: new sap.ui.commons.TextView().bindProperty("text", "TRANSACTION_ID"),
  sortProperty: "TRANSACTION_ID",
  filterProperty: "TRANSACTION_ID",
  width: "150px",
  hAlign : "Center", 
  showFilterMenuEntry:false
  }));

I know the problem is like oTable2.exportData().saveFile('sample') not able to get my custom control label name.

Now My question is How to get the Custom Label values and columns? Hope I would explained clearly.. Can some one help me on this issue? Any Help would be greatly Appreciated.

Attachments

Screenshot_1.png (8.9 kB)