Use of FILTER

Click here and follow my SAP UI5/FIORI snippets and information Page

I have implemented the concept of filter and created one table with json. It has 29 records of kids,adults and seniors.When you open the app then you see one button at extreme right with the name of 'Filter'.Three segmented buttons will come with names of  'kids ,adults and seniors' after clicking on the 'Filter' button.If you select kids then kids related records will filter.If you select adults then adults related records will filter. If you select seniors then seniors related records will filter, below shown application structure,view part,controller part, json part and index part of the application.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"

xmlns="sap.m" controllerName="View.S1" xmlns:html="http://www.w3.org/1999/xhtml">

<Page title="Use Of Filter">

<content>

<Table items="{/Record}" id="tab_IDD">

<headerToolbar>

<Toolbar>

<Label id="label_IDD" design="Bold" />

<ToolbarSpacer />

<SegmentedButton width="50%" id="segmented_IDDD"

select="Handle_Click_Segmented">

<items>

<SegmentedButtonItem text="Kids" key="kids" />

<SegmentedButtonItem text="Adults" key="adults" />

<SegmentedButtonItem text="Seniors" key="seniors" />

</items>

</SegmentedButton>

<ToolbarSpacer />

<ToggleButton text="Filter" press="onFilter_Butt"

type="Emphasized" id="toggle_ID" />

</Toolbar>

</headerToolbar>

<columns>

<Column visible="false">

<Text design="bold" text="Category" />

</Column>

<Column>

<Text design="bold" text="Name" />

</Column>

<Column>

<Text design="bold" text="Age" />

</Column>

<Column>

<Text design="bold" text="Mobile" />

</Column>

<Column>

<Text design="bold" text="Town" />

</Column>

</columns>

<ColumnListItem>

<cells>

<Text text="{recog}" />

<Text text="{name}" />

<Text text="{age}" />

<Text text="{mob}" />

<Text text="{town}" />

</cells>

</ColumnListItem>

</Table>

</content>

</Page>

</core:View>

Controller Part

sap.ui.controller("View.S1",

{

// Initialization...................

onInit : function() {

this.segButton = this.byId("segmented_IDDD");

this.segButton.setVisible(false);

this.JSOnModel = new sap.ui.model.json.JSONModel();

this.JSOnModel.loadData("Model/Data.json", null, false);

this.table_Id = this.byId("tab_IDD");

this.table_Id.setModel(this.JSOnModel);

this.labelId = this.byId("label_IDD");

this.labelId.setText("Records(" + this.table_Id.getItems().length+ ")")

},

// If you press Filter button then this event will fire.........

onFilter_Butt : function() {

if (!this.segButton.getVisible()) {

this.segButton.setVisible(true);

this.byId("toggle_ID").setText("Hide Filter");

this.segButton.setSelectedKey("kids");

this.Handle_Click_Segmented();

} else {

this.segButton.setVisible(false);

this.byId("toggle_ID").setText("Filter");

var bindallItems = this.table_Id.getBinding("items");

bindallItems.filter();

this.labelId.setText("Records("+ this.table_Id.getItems().length + ")");

}

},

// If you select Segmented button then this event will fire.........

Handle_Click_Segmented : function() {

var key_Paramenter = this.segButton.getSelectedKey();

this.filterArry = [];

var filter = new sap.ui.model.Filter("recog",

sap.ui.model.FilterOperator.Contains, key_Paramenter);

this.filterArry.push(filter);

var bindallItems = this.table_Id.getBinding("items");

bindallItems.filter(this.filterArry);

this.labelId.setText("Records(" + this.table_Id.getItems().length+ ")")

},

});

Data.json

{"Record":[{"recog":"kids","name":"chintu","age":"6","mob":1111111111,"town":"mumbai"},

{"recog":"adults","name":"ritesh joshi","age":"30","mob":2222222222 ,"town":"gaya"},

{"recog":"seniors","name":"raj singh","age":"45","mob":3333333333 ,"town":"bathinda"},

{"recog":"kids","name":"patlu","age":"9","mob":4444444444 ,"town":"aurangabad"},

{"recog":"adults","name":"vikas kumar","age":"25","mob":5555555555 ,"town":"aurangabad"},

{"recog":"seniors","name":"raja singh","age":"44","mob":6666666666 ,"town":"madanpur"},

{"recog":"kids","name":"daya","age":"10","mob":7777777777 ,"town":"ranchi"},

{"recog":"seniors","name":"dharma raju","age":"56","mob":9999999999 ,"town":"bodhgaya"},

{"recog":"kids","name":"chuni","age":"5","mob":10000000000,"town":"gaya"},

{"recog":"adults","name":"nikhil kumar","age":"25","mob":3211111111 ,"town":"mumbai"},

{"recog":"seniors","name":"malik khan","age":"66","mob":121212121212 ,"town":"talwandi"},

{"recog":"kids","name":"luni","age":"2","mob":1313131313 ,"town":"navu mumbai"},

{"recog":"adults","name":"rohit kumar","age":"24","mob":1414141414 ,"town":"pune"},

{"recog":"seniors","name":"pavan reddy","age":"55","mob":1515151515 ,"town":"gaya"},

{"recog":"kids","name":"muni","age":"6","mob":1616161616 ,"town":"Kolkata"},

{"recog":"adults","name":"manoj kumar","age":"28","mob":1717171717 ,"town":"ramgrah"},

{"recog":"seniors","name":"udit paul","age":"55","mob":1818181818 ,"town":"gaya"},

{"recog":"kids","name":"nobita","age":"3","mob":1919191919 ,"town":"virar"},

{"recog":"adults","name":"lokesh kumar","age":"28","mob":2020202020 ,"town":"hazaribag"},

{"recog":"seniors","name":"lokesh rahul","age":"66","mob":2121212121 ,"town":"thane"},

{"recog":"kids","name":"juni","age":"3","mob":2222222222 ,"town":"nasik"},

{"recog":"adults","name":"vinay kumar","age":"33","mob":2323232323 ,"town":"gurgoan"},

{"recog":"seniors","name":"raj kishor","age":"77","mob":2424242424 ,"town":"banarash"},

{"recog":"kids","name":"shahan","age":"5","mob":2525252525 ,"town":"thane"},

{"recog":"adults","name":"raghu kumar","age":"27","mob":2626262626 ,"town":"noida"},

{"recog":"seniors","name":"shyam sundar","age":"44","mob":2727272727 ,"town":"bingunj"},

{"recog":"kids","name":"piku","age":"7","mob":2828282828 ,"town":"goregaon"},

{"recog":"adults","name":"prashant kumar","age":"26","mob":2929292929 ,"town":"patana"},

{"recog":"seniors","name":"ram kishor","age":"59","mob":3030303030 ,"town":"sasaram"}

]}

Index.html

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal">

</script>

<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>

sap.ui.localResources("View");

var app = new sap.m.App({initialPage:"idS11"});

var page = sap.ui.view({id:"idS11", viewName:"View.S1", type:sap.ui.core.mvc.ViewType.XML});

app.addPage(page);

app.placeAt("content");

</script>

</head>

<body class="sapUiBody" role="application">

<div id="content"></div>

</body>

</html>

Result