SapUi5 Table Multiple Filter

Question

I'm developing a sap ui5 application using sap.ui.table.Table.

I need to apply a filter based on multiple strings. For example, if the user input is an array like:

["Stack", "Overflow"]

I need:

1. Filter all table fields by "Stack";
2. Filter the result of point 1 by "Overflow";

the result will be all rows that have "Stack" and "Overflow", no matter the field.

Does anyone have a solution?

Answer 1

As per the sap.ui.model.Filter documentation, you can create a filter either based on a filter info object, or from an array of previously created filters. This allows us to do the following:

• Create a filter for the first value (eg "Stack")
• Create a filter for the second value (eg "Overflow")
• Create a filter which contains both of these values, and use it to filter the table.

Let's have a look at some code.

// We will only display rows where ProductName contains 
// "Stack" AND CustomerName equals "Overflow"

var oFilterForProductName,
    oFilterForCustomerName,
    aArrayWhichContainsBothPreviousFilters = [],
    oFilterToSetOnTheTable;

var sValueToFilterTheProductNameOn = "Stack",
    sValueToFilterTheCustomerNameOn = "Overflow";

var sKeyForProductNameInTheTableModel = "ProductName",
    sKeyForCustomerNameInTheTableModel = "CustomerName";

var oTableToFilter = this.byId("myTableId");

// Step 1: create two filters
oFilterForProductName = new sap.ui.model.Filter(
    sKeyForProductNameInTheTableModel, 
    sap.ui.model.FilterOperator.Contains, 
    sValueToFilterTheProductNameOn);
oFilterForCustomerName = new sap.ui.model.Filter(
    sKeyForCustomerNameInTheTableModel, 
    sap.ui.model.FilterOperator.EQ, 
    sValueToFilterTheCustomerNameOn);

// Step 2: add these two filters to an array
aArrayWhichContainsBothPreviousFilters.push(oFilterForProductName);
aArrayWhichContainsBothPreviousFilters.push(oFilterForCustomerName);

// Step 3: create a filter based on the array of filters
oFilterToSetOnTheTable = new sap.ui.model.Filter({
    filters: aArrayWhichContainsBothPreviousFilters,
    and: true
});

oTableToFilter.getBinding("items").filter(oFilterToSetOnTheTable , sap.ui.model.FilterType.Application);

Hope this helps. Let me know if you have any questions.

Chris