How to filter odata service with mutiple filter input values from Filterbar control & bind the filtered result set to Table

Question

I need to filter the odata service with multiple filter items and bind result set to table. This whole action will take place on click of search button. Below is my Onsearch event code which is failing in read function and not returning a result and not able to bind it to table. Can anyone please me help on this?

Controller Code

onFinalFilter: function (oEvent) {

debugger; 
var oPlant = this.getView().byId("plant").getValue();

var oName1 = this.getView().byId("name1").getValue();

var oName2 = this.getView().byId("name2").getValue();

var oState = this.getView().byId("State").getValue();

var oCity = this.getView().byId("city").getValue();

var oZip = this.getView().byId("zip").getValue();

var oCompanyCode = this.getView().byId("companyCode").getValue();

var p = new Filter("WERKS", FilterOperator.EQ, oPlant);

var n1 = new Filter("NAME1", FilterOperator.EQ, oName1);

var n2 = new Filter("NAME2", FilterOperator.EQ, oName2);

var s = new Filter("STATE", FilterOperator.EQ, oState);

var c = new Filter("CITY", FilterOperator.EQ, oCity);

var cc = new Filter("BUKRS", FilterOperator.EQ, oCompanyCode);

var zip = new Filter("PSTCODE", FilterOperator.EQ, oZip);

var finalFilter = new Filter({filters:[p,n1,n2,c,s,zip,cc], and:true});

var oModel = new sap.ui.model.odata.v2.ODataModel("/sap/opu/odata/sap/ZSM_PLANTSRCH_SRV/"); sap.ui.getCore().setModel(oModel);

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

oModel.read("/PLANTSRCHSet", {

filters: finalFilter, 

success: function (oData, oResponse)

{ var data = oData; oModel2.setData(data); this.getView().byId("table1").setModel(oModel2, "key2"); },

error: function (oError) { //alert("error"); } });

}

View

Console Log

Filterbar Fragment

Answer 1

1.View.xml

    <fb:FilterGroupItem  name="Name of the Property" label="Company">
                    <fb:control>
                        <Input type="Text"/>
                    </fb:control>               
                </fb:FilterGroupItem>

• The name should be the corresponding property of your EntitySet of your oData Service

2. Controller.js - prepare your filter

        _search: function (oEvt) {
            // All your filters of the filterbar
            var aSelectionSet = oEvt.getParameter("selectionSet");
            //Loop through them all
            var aFilters = aSelectionSet.reduce(function (aResult, oControl) {
                //Check via oControl.getValue() || oControl.getSelectedKey() || oControl.getMetadata().getName() what to do
                if (oControl.getValue()) { //sap.m.Input - single filter
                    aResult.push(new Filter({
                        path: oControl.getName(),
                        operator: FilterOperator.EQ,
                        value1: oControl.getValue()
                    }));
                } else if (oControl.getMetadata().getName() === "sap.m.MultiInput") { // sap.m.MultiInput - multiple Filter
                    var aTokens = oControl.getTokens();
                    var aTokenFilter = [];
                    for (var i = 0; i < aTokens.length; i++) {
                        aTokenFilter.push(new Filter({
                            path: oControl.getName(),
                            operator: FilterOperator.EQ,
                            value1: aTokens[i].getProperty("key")
                        }));
                    }
                    if (aTokenFilter.length > 0) {
                        aResult.push(new Filter({
                            filters: aTokenFilter,
                            and: false
                        }));
                    }
                }
                return aResult;
            }, []);
            if (aFilters.length > 0) {
                this._filterTable(new Filter({
                    filters: aFilters,
                    and: true
                }));
            } else {
                this._filterTable();
            }
        },

• There's no logic for sap.m.ComboBox yet

3. Controller.js - filter

        _filterTable: function (oFilter) {
        this._oTable.getBinding("items").filter(oFilter);
        }

Example