Quantcast
Channel: SCN : All Content - SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 6178

How to get Custom column label name

$
0
0

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.


Viewing all articles
Browse latest Browse all 6178

Trending Articles