Varad
Tabs with icons are displayed in icon tab bars. A tab bar with an icon can be used in two ways. Firstly, when you want to show different views, pages, or a logical group of SAP UI5 controls in separate portions of the screen one at a time, and you want the user to be able to click on a tab to show the content that corresponds to that tab. Another use case is when you want a user to filter or sort a list that is currently displayed on the screen by clicking on a tab. I’ll use a real-world example to show you how an icon tab bar functions in this blog post. The second use case, which involves applying a filter based on a tab click, will be demonstrated.
See Coding: Adding IconTabBar’s XML
Since IConTabBar is a part of the m library, your view’s header section doesn’t need to include any additional namespace references. All we have to do is create an IconTabBar and utilize its aggregations, which are items and content. The table that we built in the previous post has to be included in the content aggregation. IconTabFilter must be included to the items aggregate. To display two icon tabs on the screen, let’s add two IconTabFilters. Please refer to the code below.
Take note that we have specified an event handler named handleIconTabBarSelect in the IconTabBar control. This will be called when a user clicks on a tab.
Controller Coding: Putting the view’s event handler into practice
To find out which tab was clicked, we must send the oEvent parameter to the event handler. As a result, we must apply a filter on our table’s binding. See the code below to accomplish this.
oEvent = handleIconTabBarSelect:function
{
var sKey = oEvent.getParameter("key");
var aFilter = [];
var oFilter = null;
if(sKey == 'bicycle')
{
oFilter = new Filter('Category', FilterOperator.Contains, "Bicycles");
aFilter.push(oFilter);
}
else if(sKey == 'lessthan3k')
{
oFilter = new Filter('Price', FilterOperator.LT, "3000");
aFilter.push(oFilter);
}
var oBinding = this.getView().byId("table").getBinding("items");
oBinding.aFilters = null;
oBinding.filter(aFilter);
},We’ve conditionally implemented two filters in the code above. We generate a Filter Object called “Contains” based on the FilterOperator enumeration when the user clicks on the “Bicycle” tab. Additionally, we construct a second filter object with FilterOperator enumeration called “LT,” which stands for less than, when the user clicks on “Less than 3000.”
Please take note that we are first deleting the current filters by setting aFilters to null value before we apply a new filter on the Binding.
And the Final Product…
Run the application.
Step 1: No tab has been selected.
State 2: Clicking the BiCycle tab
State 3: Clicking the second tab
We studied about the Icon Tab Bar’s Filter use case in this blog. Pay attention to the other use case that was described in this blog post’s opening paragraph. I would be pleased to address any comments or criticism you may have.
you may be interested in this blog here:-
Benefits of Using Salesforce Nonprofit Cloud for Event Planing
ABAP for SAP HANA. ALV Report On SAP HANA – Opportunities And Challenges
