Pass custom filter to SmartTable

Question

I created a custom control on a smart filter bar. I am unsure of how to pass the selection to the server so it updates the filter and rebinds the data to the smart table. Here is the custom smartfilter bar:

<smartFilterBar:ControlConfiguration groupId="_BASIC" key="ZQ_STAT" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false" >
<smartFilterBar:customControl>
 <Select id="qualStatusDropDown" change="onQualSearch">
    <core:Item key="" text=" " />
    <core:Item key="0" text="0" />
    <core:Item key="1" text="ONE" />
    <core:Item key="2" text="TWO" />
    <core:Item key="3" text="THREE" />
</Select>
</smartFilterBar:customControl>

Here is the code I am using in the controller:

onQualSearch : function (oEvent) {
var oTableSearchState = [];
var sQuery = oEvent.getSource().getProperty("selectedKey");
oTableSearchState = [new Filter("ZQ_STAT", FilterOperator.EQ, sQuery)];
this._applyFilter(oTableSearchState);
//MessageToast.show("You picked " + sQuery);
},

_applyFilter: function(oTableSearchState) {
 var oTable = this.byId("gSmartTable");
 //oTable.getBinding("items").filter(oTableSearchState, "Application");
}

I used this code on a standard table and search field, but I am getting an error in the console stating 'getBinding' is undefined. If I output the 'oTable' object to the console, I can see that the 'items' aggregation does exist, though I am thinking maybe I am not calling the correct aggregation. I have spent some time trying to determine how to even get what the current table binding is, though it's always blank. I am using 'enableAutoBinding=true' on the table, and when I disable it and output that property to the console, it is still always blank, even after I apply a filter search.

When I use one of the other fields available, which is just a standard smartfilter, I can see the oData call in the network tab modifies the query and adds the 'filter' to the query. This:

/Employees?$skip=0&$top=20&$select=Pernr,STEXT_2,Butxt,STLTX,ZQ_STAT

vs this (after filter):

/Employees?$skip=0&$top=20&$filter=(Butxt eq 'XXXXX')&$select=Pernr,STEXT_2,Butxt,STLTX,ZQ_STAT

I'm sure I am missing something simple, or I am just going about this wrong. Can anyone assist with what to do next?

EDIT: I am getting a bit closer with this. After viewing this example:

Add Additional Filter Logic

I realized the binding parameters only exist in the 'beforeRebindTable' event. I add that event to the control and updated my script:

onQualSearch : function (oEvent) {
 var oSmartTable = this.byId("gSmartTable");
 oSmartTable.rebindTable();
 //oSmartTable.showOverlay();
},
  

 onBeforeRebindTable : function(oEvent) {
 // Get bindinParams Object, which includes filters
 var oBindingParams = oEvent.getParameter("bindingParams");
 // Create the aFilters array
 var aFilters = oBindingParams.filters;
 // Create the table object
 var oSmartTable = oEvent.getSource();
 // Get the SmartFilterBarID
 var oSmartFilterBar = this.byId(oSmartTable.getSmartFilterId());
  if (oSmartFilterBar instanceof sap.ui.comp.smartfilterbar.SmartFilterBar) {
   var oCustomControl = oSmartFilterBar.getControlByKey("ZQ_STAT");
       if (oCustomControl instanceof sap.m.Select) {
     var sQualStat = oCustomControl.getSelectedKey();
     oBindingParams.filters.push(new sap.ui.model.Filter("ZQ_STAT", "EQ", sQualStat));
    }
   }
 },

The only issue now is the overlay does not seem to be working; the filtered data is there on the table, but it's greyed out. I added the '.showOverlay();' function, which properly displays the filtered data, but then I get an error in the console that 'showOverlay' is not a function. It doesn't appear in the prototype (I logged the oSmartTable object), except as '_showOverlay'. I tried running that function as well, and it gives no error, though it does not display the overlay.

I'm sure it's something simple, any help would be appreciated.

Cheers!

EDIT 2: I think I pretty much have this answered due to to my understanding of how this works now.

If a user puts some text in any of the other fields on the smart filter bar, they must hit enter or the 'Go' button for the filter to actually run. This is the same for the dropdown list. For some reason, I thought I would be able to automatically rebind and refresh the table listing once the item in the dropdown is selected. While I can use the 'rebindTable();' function to reset the table binding, it won't display the new data in the non-greyed-out state until I hit 'Go' or enter. So, from a user perspective, and for consistency sake, if I leave out the 'onQualSearch' event, then the dropdown just acts like any of the other fields in the SmartFilterBar- the user enters/selects input, and hits the 'Go' button or the enter key.

I also incorrectly identified 'showOverlay()' as a function, when it's actually an event, so that's why I could not just call 'oSmartTable.showOverlay();'. I may also have used the incorrect nomenclature, identifying the 'overlay' as the greyed-out vs non-greyed-out state of the table data. This is what I am referring to:

vs

I'll chalk this up to a learning experience, both this SAPUI5 as well as general Javascript, as both are fairly new to me. Sorry if this caused any confusion.

By all means, if anyone knows a way to make the table display the data immediately upon change, please add comments/suggestions!

Hopefully this post at least helps someone else out who is trying to do a similar thing!