Local Search in SAPUI5

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

I have written this below snippet for local search.I have used table example with json data for it.You can write this snippet with many controls like table,List..etc.Go through it and please let me know in case of any issue/doubt.

Paste below lines in view.

<Table items="{/Record}" id="tab_IDD">
<headerToolbar>
<Toolbar>
<ToolbarSpacer />
<SearchField width="30%" liveChange="liveChangeHandler"
id="srchiD" />
</Toolbar>
</headerToolbar>
<columns>
<Column visible="true">
<Text design="bold" text="Type" />
</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>

Paste below lines in controller.

// Write in onInit()
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);

// When you enter some thing in Search field then this event will fire........
liveChangeHandler : function() {
var input = this.byId("srchiD").getValue().toLowerCase();
var items = this.table_Id.getItems();
        for (var i = 0; i < items.length; i++) {
var type = this.table_Id.getItems()[i].getAggregation("cells")[0].getText().toLowerCase();
var Name = this.table_Id.getItems()[i].getAggregation("cells")[1].getText().toLowerCase();
var Age = this.table_Id.getItems()[i].getAggregation("cells")[2].getText().toLowerCase();
var Mobile = this.table_Id.getItems()[i].getAggregation("cells")[3].getText().toLowerCase();
var Town = this.table_Id.getItems()[i].getAggregation("cells")[4].getText().toLowerCase();
if (type.indexOf(input) > -1 || Name.indexOf(input) > -1
|| Age.indexOf(input) > -1 || Mobile.indexOf(input) > -1
|| Town.indexOf(input) > -1) {
items[i].setVisible(true);
} else {

items[i].setVisible(false);
}
}

}

Create json file and Paste below lines in created file.

{"Record":[{"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":"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":"kids","name":"piku","age":"7","mob":2828282828 ,"town":"goregaon"},
{"recog":"adults","name":"prashant kumar","age":"26","mob":2929292929 ,"town":"patana"}
]}

Result

Sorting and Grouping in SAPUI5

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

I have written this below snippet for sorting & grouping.I have used table example with json data for it.Go through it and please let me know in case of any issue/doubt.

Paste below lines in view.

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

<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>

Paste below lines in controller.

// Write in onInit()
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);

// Sorting & Grouping snippet ..........

var SORTKEY = "recog";

var DESCENDING = false;

var GROUP = true;

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

var aSorter = [];

var sorter = new sap.ui.model.Sorter(SORTKEY, DESCENDING, GROUP)

aSorter.push(sorter);

oBinding.sort(aSorter);

Create json file and Paste below lines in created file.

{"Record":[{"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":"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":"kids","name":"piku","age":"7","mob":2828282828 ,"town":"goregaon"},

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

]}

Result