Hello Experts,
I an new at this world.
I need to add a filter field at the top of the table, that will filter data acoordind to the values of field "Maktx"
I get data from Odata model .
my code is like this:
| var searchField = new sap.m.SearchField("sf1", { | ||
| placeholder : "Search...", | ||
| width : '30rem', | ||
| enabled : true, | ||
| search : fnDoSearch | ||
| }); |
| var toolbarParm = { | |||
| content : [ new sap.m.Text({ text : "Tech am", | textAlign : "End" }), | ||
| new sap.m.ToolbarSpacer(), | |||
| searchField, | |||
| new sap.m.Button({ |
icon : "sap-icon://home",
tooltip : "Home",
press : function(oEvent) { goHome(); }
| }) ] | ||
| }; |
| var oTableHeader = new sap.m.Toolbar(toolbarParm); | ||
| var aColumns = [ | ||
| new sap.m.Column({ | ||
| hAlign : "Center", | ||
| header : new sap.m.Label({ | ||
| text : "material group", | ||
| textAlign : "Begin", | ||
| width : "10rem" | ||
| }) | ||
| }), | ||
| new sap.m.Column({ | ||
| hAlign : "Center", | ||
| header : new sap.m.Label({ | ||
| text : "material", | ||
| textAlign : "Begin", | ||
| width : "7rem" | ||
| }) | ||
| }), |
| new sap.m.Column({ | ||
| hAlign : "Center", | ||
| header : new sap.m.Label({ | ||
| text : "serial", | ||
| // | width : "18rem" | |
| }) | ||
| }), | ||
| new sap.m.Column({ | ||
| hAlign : "Center", | ||
| header : new sap.m.Label({ | ||
| text : "status" | ||
| }) | ||
| }), | ||
| new sap.m.Column({ | ||
| hAlign : "Center", | ||
| header : new sap.m.Label({ | ||
| text : "num avail", | ||
| textAlign : "Begin", | ||
| width : "9rem" | ||
| }) | ||
| }), | ||
| new sap.m.Column({ | ||
| hAlign : "Center", | ||
| header : new sap.m.Label({ | ||
| text : "amount" | ||
| }) | ||
| }), | ||
| ]; |
| var oTemplate = new sap.m.ColumnListItem({ | |||
| vAlign : "Middle", | |||
| type : "{type}", | |||
| cells : [ | |||
| new sap.m.Text({ | |||
| text : "{Wgbez}", | |||
| wrapping : true, | |||
| maxlines : "2" | |||
| }), | |||
| new sap.m.Text({ | |||
| text : "{Maktx}", | |||
| wrapping : true, | |||
| maxlines : "2" | |||
| }), | |||
| new sap.m.Text({ | |||
| text : "{Sernr}", | |||
| textDirection : "LTR", | |||
| wrapping : true, | |||
| maxlines : "2" | |||
| }), | |||
| new sap.m.Image({ | |||
| src : "{imageUrl}", | |||
| }), | |||
| new sap.m.Text({ | |||
| text : "{Num_days}", | |||
| textDirection : "LTR", | |||
| Width: "10px", | |||
| wrapping : true, | |||
| maxlines : "2" | |||
| }), | |||
| new sap.m.Text({ | |||
| text : "{Labst}", | |||
| Width: "15rem", | |||
| wrapping : true, | |||
| maxlines : "2" | |||
| }), | |||
| ] | |||
| }); |
| var oTableCol = new sap.m.Table({ | ||
| showNoData : false, | ||
| growingThreshold : 5, | ||
| growingScrollToLoad : false, | ||
| columns : aColumns, | ||
| }); |
| var oTable = new sap.m.Table({ | ||||||
| growingThreshold : 5, | ||||||
| growingScrollToLoad : false, | ||||||
| /// | footerText : "End of data", | |||||
| //headerToolbar : oTableHeader, | ||||||
| columns : aColumns, | ||||||
| }); |
| var oScrollContainer = new sap.m.ScrollContainer({ | ||
| height : "800px", | ||
| vertical : true, | ||
| focusable : true, | ||
| content : [ oTable ] | ||
| }); |
| // ----- Load available stock | |||||
| var msgModel = new sap.ui.model.json.JSONModel(); | |||||
| msgModel | |||||
| .loadData( | |||||
| "/sap/opu/odata/sap/ZTECH_AVAILABLE_SRV/AvailableStockSet?$format=json", | |||||
| {}, false); |
| var msgs = msgModel.getProperty("/d/results"); |
| msgModel.setProperty("/d/results", msgs); |
| sap.ui.getCore().setModel(msgModel); | |
| oTable.setModel(msgModel); | |
| oTable.bindItems("/d/results", oTemplate); |
| var oPage = new sap.m.Page({ | ||||||
| title : "Tech amount", | ||||||
| enableScrolling : true, | ||||||
| // | footer: oTableActions, | |||||
| content : [ oTableCol, oScrollContainer ], | ||||||
| customHeader : oTableHeader | ||||||
| }); |
| oApp.addPage(oPage).placeAt("content"); |
| myTable = oTable; |
</script>
</head>
The report look like this:
I want to add the filter field above the search.
Help will be appreciate.
Thanks & Rergards
Amir