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.