(Icon Tab Bar + Live Search Filtering)
1. Introduction
In SAPUI5 applications, users often need to filter data quickly based on different parameters—such as status, category, or keyword. While using only one filter works in simple cases, real applications require combining filters to offer a better user experience.
In this blog, I will explain how to implement dual filtering using:
Icon Tab Bar – to filter by status
Live Search Field – to filter inside already filtered data
Combining both filters so only the relevant records are shown
With this approach, users can first select a category (like COMPLETE or PENDING) and then type a search term to refine the results further.
2. Main Content (Implementation Details)
2.1 Output Screens
After filtering all Completed status using Icon Tab Bar
Now applying fuzzy search on already filtered data (Completed + search ‘S’)
Final refined results after applying both filters:
2.2 XML View Code
<mvc:View controllerName=”serch.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”
xmlns:l=”sap.ui.layout”
xmlns:f=”sap.ui.layout.form”
xmlns:core=”sap.ui.core”>
<Page id=”page” title=”Filtering Filterd Data” titleAlignment=”Center”>
<IconTabBar id=”idIconTabBar” select=”onFilterSelect” class=”sapUiResponsiveContentPadding”>
<items>
<IconTabFilter text=”ALL”
icon=”sap-icon://wallet”
key=”ALL”
>
</IconTabFilter>
<IconTabFilter
text=”COMPLETE”
icon=”sap-icon://begin”
key=”COMPLETE”
iconColor=”Positive”
>
</IconTabFilter>
<IconTabFilter
text=”INCOMPLETE”
icon=”sap-icon://error”
key=”INCOMPLETE”
iconColor=”Negative”
>
</IconTabFilter>
<IconTabFilter
text=”PENDING”
icon=”sap-icon://pending”
key=”PENDING”
iconColor=”Critical”
>
</IconTabFilter>
</items>
<content>
<Table id=”table1″ items=”{oModel>/results}” mode=”SingleSelectMaster”>
<headerToolbar>
<Toolbar>
<SearchField id = “fez” liveChange=”LiveChange” width=”20%”></SearchField>
<ToolbarSpacer />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text=”Empid” />
</Column>
<Column>
<Text text=”Name” />
</Column>
<Column>
<Text text=”Salary” />
</Column>
<Column>
<Text text=”Status” />
</Column>
</columns>
<items>
<ColumnListItem type=”Navigation” press=”onNavigation”>
<Text text=”{oModel>Empid}” />
<Text text=”{oModel>Name}” />
<Text text=”{oModel>Salary}” />
<Text text=”{oModel>Status}” />
</ColumnListItem>
</items>
</Table>
</content>
</IconTabBar>
</Page>
</mvc:View>
Code For Controller:
sap.ui.define([
“sap/ui/core/mvc/Controller”,
“sap/m/MessageToast”,
“sap/ui/model/json/JSONModel”,
“sap/ui/model/Filter”,
“sap/ui/model/FilterOperator”
],
function (Controller, MessageToast, JSONModel, Filter, FilterOperator) {
“use strict”;
return Controller.extend(“serch.controller.View1”, {
// Initialization function, called when the controller is initialized
onInit: function () {
this.read(); // Call read function to load data initially
},
// Function to read data from the backend service (OData)
read: function () {
var that = this;
var oModel = this.getOwnerComponent().getModel(); // Get the OData model from the component
oModel.read(“/Zentity_empSet”, {
success: function (odata) {
var oModel1 = new JSONModel(odata); // Create a new JSON model with the received data
that.getView().setModel(oModel1, “oModel”); // Set the JSON model to the view
}
});
},
// Function to apply filters based on the selected status from a dropdown
onFilterSelect: function (oEvent) {
this.selectedStatus = oEvent.getParameter(“key”); // Get the selected filter key
this.sKey = this.selectedStatus; // Store the selected key for later use
var oTable = this.getView().byId(“table1”); // Get reference to the table control
var oBinding = oTable.getBinding(“items”); // Get the binding for table items
var aFilters = []; // Initialize an empty array for filters
// Apply filters based on the selected status
if (this.sKey === “COMPLETE”) {
var statusFilter = new Filter(“Status”, “EQ”, “COMPLETE”); // Filter for “COMPLETE”
aFilters.push(statusFilter); // Add to the filters array
} else if (this.sKey === “INCOMPLETE”) {
var statusFilter = new Filter(“Status”, “EQ”, “INCOMPLETE”); // Filter for “INCOMPLETE”
aFilters.push(statusFilter);
} else if (this.sKey === “PENDING”) {
var statusFilter = new Filter(“Status”, “EQ”, “PENDING”); // Filter for “PENDING”
aFilters.push(statusFilter);
} else if (this.sKey === “ALL”) {
this.read(); // If “ALL” is selected, reload data without any filters
}
oBinding.filter(aFilters); // Apply the filters to the table
},
// Function to filter table data dynamically based on user input in the search field
LiveChange: function(a) {
var srchVal = a.getSource().getValue(); // Get the value entered in the search field
var oTable = this.getView().byId(“table1”); // Get reference to the table control
var oBinding = oTable.getBinding(“items”); // Get the binding for table items
var aFilters = []; // Initialize an empty array for filters
var selectedStatus = this.sKey; // Use the selected status filter
// Apply status filter if selected status is not “ALL”
if (selectedStatus !== “ALL”) {
var statusFilter = new Filter(“Status”, FilterOperator.EQ, selectedStatus); // Filter for status
aFilters.push(statusFilter);
}
// Apply additional search filters if the search field is not empty
if (srchVal && srchVal.trim() !== ”) {
// Create filters for Empid, Name, Salary, and Status using the search value
var searchFilterEmpid = new Filter(“Empid”, FilterOperator.Contains, srchVal);
var searchFilterName = new Filter(“Name”, FilterOperator.Contains, srchVal);
var searchFilterSalary = new Filter(“Salary”, FilterOperator.Contains, srchVal);
var searchFilterStatus = new Filter(“Status”, FilterOperator.Contains, srchVal);
// Group the filters together with an OR condition (any field match)
var searchFilterGroup = new Filter({
filters: [searchFilterEmpid, searchFilterName, searchFilterSalary, searchFilterStatus],
and: false // Use “OR” logic for the filters
});
aFilters.push(searchFilterGroup); // Add the grouped filter to the filters array
}
// Apply the combined filters to the table
oBinding.filter(aFilters);
}
});
});
3. Conclusion
By combining an Icon Tab Bar and a Live Search Field, we can create a powerful dual-filtering mechanism in SAPUI5.
This approach allows users to:
✔ First filter data by category (status)
✔ Then refine the results instantly using fuzzy search
✔ Reduce scrolling and improve data visibility
✔ Make the UI faster, more dynamic, and user-friendly
(Icon Tab Bar + Live Search Filtering)1. IntroductionIn SAPUI5 applications, users often need to filter data quickly based on different parameters—such as status, category, or keyword. While using only one filter works in simple cases, real applications require combining filters to offer a better user experience.In this blog, I will explain how to implement dual filtering using:Icon Tab Bar – to filter by statusLive Search Field – to filter inside already filtered dataCombining both filters so only the relevant records are shownWith this approach, users can first select a category (like COMPLETE or PENDING) and then type a search term to refine the results further.2. Main Content (Implementation Details)2.1 Output ScreensAfter filtering all Completed status using Icon Tab BarNow applying fuzzy search on already filtered data (Completed + search ‘S’)Final refined results after applying both filters:2.2 XML View Code<mvc:View controllerName=”serch.controller.View1″
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”
xmlns:l=”sap.ui.layout”
xmlns:f=”sap.ui.layout.form”
xmlns:core=”sap.ui.core”>
<Page id=”page” title=”Filtering Filterd Data” titleAlignment=”Center”>
<IconTabBar id=”idIconTabBar” select=”onFilterSelect” class=”sapUiResponsiveContentPadding”>
<items>
<IconTabFilter text=”ALL”
icon=”sap-icon://wallet”
key=”ALL”
>
</IconTabFilter>
<IconTabFilter
text=”COMPLETE”
icon=”sap-icon://begin”
key=”COMPLETE”
iconColor=”Positive”
>
</IconTabFilter>
<IconTabFilter
text=”INCOMPLETE”
icon=”sap-icon://error”
key=”INCOMPLETE”
iconColor=”Negative”
>
</IconTabFilter>
<IconTabFilter
text=”PENDING”
icon=”sap-icon://pending”
key=”PENDING”
iconColor=”Critical”
>
</IconTabFilter>
</items>
<content>
<Table id=”table1″ items=”{oModel>/results}” mode=”SingleSelectMaster”>
<headerToolbar>
<Toolbar>
<SearchField id = “fez” liveChange=”LiveChange” width=”20%”></SearchField>
<ToolbarSpacer />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text=”Empid” />
</Column>
<Column>
<Text text=”Name” />
</Column>
<Column>
<Text text=”Salary” />
</Column>
<Column>
<Text text=”Status” />
</Column>
</columns>
<items>
<ColumnListItem type=”Navigation” press=”onNavigation”>
<Text text=”{oModel>Empid}” />
<Text text=”{oModel>Name}” />
<Text text=”{oModel>Salary}” />
<Text text=”{oModel>Status}” />
</ColumnListItem>
</items>
</Table>
</content>
</IconTabBar>
</Page>
</mvc:View>Code For Controller:sap.ui.define([
“sap/ui/core/mvc/Controller”,
“sap/m/MessageToast”,
“sap/ui/model/json/JSONModel”,
“sap/ui/model/Filter”,
“sap/ui/model/FilterOperator”
],
function (Controller, MessageToast, JSONModel, Filter, FilterOperator) {
“use strict”;
return Controller.extend(“serch.controller.View1”, {
// Initialization function, called when the controller is initialized
onInit: function () {
this.read(); // Call read function to load data initially
},
// Function to read data from the backend service (OData)
read: function () {
var that = this;
var oModel = this.getOwnerComponent().getModel(); // Get the OData model from the component
oModel.read(“/Zentity_empSet”, {
success: function (odata) {
var oModel1 = new JSONModel(odata); // Create a new JSON model with the received data
that.getView().setModel(oModel1, “oModel”); // Set the JSON model to the view
}
});
},
// Function to apply filters based on the selected status from a dropdown
onFilterSelect: function (oEvent) {
this.selectedStatus = oEvent.getParameter(“key”); // Get the selected filter key
this.sKey = this.selectedStatus; // Store the selected key for later use
var oTable = this.getView().byId(“table1”); // Get reference to the table control
var oBinding = oTable.getBinding(“items”); // Get the binding for table items
var aFilters = []; // Initialize an empty array for filters
// Apply filters based on the selected status
if (this.sKey === “COMPLETE”) {
var statusFilter = new Filter(“Status”, “EQ”, “COMPLETE”); // Filter for “COMPLETE”
aFilters.push(statusFilter); // Add to the filters array
} else if (this.sKey === “INCOMPLETE”) {
var statusFilter = new Filter(“Status”, “EQ”, “INCOMPLETE”); // Filter for “INCOMPLETE”
aFilters.push(statusFilter);
} else if (this.sKey === “PENDING”) {
var statusFilter = new Filter(“Status”, “EQ”, “PENDING”); // Filter for “PENDING”
aFilters.push(statusFilter);
} else if (this.sKey === “ALL”) {
this.read(); // If “ALL” is selected, reload data without any filters
}
oBinding.filter(aFilters); // Apply the filters to the table
},
// Function to filter table data dynamically based on user input in the search field
LiveChange: function(a) {
var srchVal = a.getSource().getValue(); // Get the value entered in the search field
var oTable = this.getView().byId(“table1”); // Get reference to the table control
var oBinding = oTable.getBinding(“items”); // Get the binding for table items
var aFilters = []; // Initialize an empty array for filters
var selectedStatus = this.sKey; // Use the selected status filter
// Apply status filter if selected status is not “ALL”
if (selectedStatus !== “ALL”) {
var statusFilter = new Filter(“Status”, FilterOperator.EQ, selectedStatus); // Filter for status
aFilters.push(statusFilter);
}
// Apply additional search filters if the search field is not empty
if (srchVal && srchVal.trim() !== ”) {
// Create filters for Empid, Name, Salary, and Status using the search value
var searchFilterEmpid = new Filter(“Empid”, FilterOperator.Contains, srchVal);
var searchFilterName = new Filter(“Name”, FilterOperator.Contains, srchVal);
var searchFilterSalary = new Filter(“Salary”, FilterOperator.Contains, srchVal);
var searchFilterStatus = new Filter(“Status”, FilterOperator.Contains, srchVal);
// Group the filters together with an OR condition (any field match)
var searchFilterGroup = new Filter({
filters: [searchFilterEmpid, searchFilterName, searchFilterSalary, searchFilterStatus],
and: false // Use “OR” logic for the filters
});
aFilters.push(searchFilterGroup); // Add the grouped filter to the filters array
}
// Apply the combined filters to the table
oBinding.filter(aFilters);
}
});
}); 3. ConclusionBy combining an Icon Tab Bar and a Live Search Field, we can create a powerful dual-filtering mechanism in SAPUI5.This approach allows users to:✔ First filter data by category (status)✔ Then refine the results instantly using fuzzy search✔ Reduce scrolling and improve data visibility✔ Make the UI faster, more dynamic, and user-friendly Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
