Months display

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

I have done this example with list control. It takes current Date from system and calculate then set in the list.It shows current with previous three months only.Go through it and please let me know in case of any issue/doubt.

Paste below lines in View

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

controllerName="set_month.S1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:vikas="sap.ui.layout">
<Page title="Set Month">
<content>
<vikas:Grid defaultSpan="L12 M12 S12">
<List items="{/results}" id="ListId" mode="SingleSelectMaster" select="listSelect">
<StandardListItem title="{month}">
</StandardListItem>
<layoutData>
<vikas:GridData span="L4 M4 S4">
</vikas:GridData>
</layoutData>
</List>
</vikas:Grid>
</content>
</Page>
</core:View>

Paste below lines in Controller

//write in onInit()

var months = [ "January", "February", "March", "April", "May", "June",
"July", "August", "Sept", "October", "November", "December" ];
var currentDate = new Date();
var month = currentDate.getMonth();
var year = currentDate.getFullYear();
var monthArr = [];
for (var i = month; i > month - 4; i--) {
if (i === -1) {
monthArr.push({
"month" : months[11],
"Year" : year
});
} else if (i === -2) {
monthArr.push({
"month" : months[10],
"Year" : year
});
} else if (i === -3) {
monthArr.push({
"month" : months[9],
"Year" : year
});
} else {
monthArr.push({
"month" : months[i],
"Year" : year
});
}
}
var json = new sap.ui.model.json.JSONModel({
"results" : monthArr
});
this.byId("ListId").setModel(json);

Result

Combo Box Validation

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

I have done combo-box validation here.if you enter value manually then it will check with all items,if match would not find then it will show error with red line.Go through it and please let me know in case of any issue/doubt.

Paste below lines in Controller.
//Write in onInit()

var json = sap.ui.model.json.JSONModel();
json.loadData("Model/Data.json", true, false);
var page = this.byId("Page_Id");
var simpleform = new sap.ui.layout.form.SimpleForm({
content : [ sap.m.FlexBox({
alignItems : "Center",
justifyContent : "Center",
items : [ new sap.m.ComboBox("comboId", {
change : [ this.handleEvent, this ],
placeholder : "Select name",
items : {
path : "/Record",
sorter : name,
template : new sap.ui.core.Item({
text : "{name}"
}),
}
}) ]

}) ]
})
var comboId=sap.ui.getCore().byId("comboId");
comboId.setModel(json);
var getBind=comboId.getBinding("items");
var sorter=new sap.ui.model.Sorter("name",false,false);
getBind.sort(sorter);
page.addContent(simpleform);

// Validation Part
// Change event for ComboBox...
handleEvent : function() {
var combo_Id = sap.ui.getCore().byId("comboId");
var allItem = combo_Id.getItems();
var arr = [];
var value = combo_Id.getValue().trim();
for (var i = 0; i < allItem.length; i++) {
arr.push(allItem[i].getText())}
if (arr.indexOf(value) < 0) {
combo_Id.setValueState("Error")
combo_Id.setValue();
} else {
combo_Id.setValueState("None")
} }

Create json file and Paste below lines in created file.

{"Record":[{"name":"ritesh joshi"},

{"name":"raj singh"},

{"name":"patlu"},

{"name":"daya"},

{"name":"dharma raju"},

{"name":"chuni"},

{"name":"nikhil kumar"},

{"name":"piku"},

{"name":"prashant kumar"}

]}

Note:- You have to give page id in view part.

Result

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

Date Validation

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

I have done below "DATE VALIDATION",here you can't selected the future's date and past's date.you can select only today's date.Go through it and please let me know in case of any issue/doubt.

Paste below lines in view.

<DatePicker id="Date_iD" visible="true" displayFormat="dd MMM yyyy" valueFormat="dd.MM.yyyy" change="Day_select"/>

  Paste below lines in controller.

// If you select date then this method will fire.............  

Day_select:function()

 {

var TodaysDate=new Date();

var MOnTh=TodaysDate.getMonth();

var YEaRs=TodaysDate.getFullYear();

var DAte=TodaysDate.getDate();

var value=this.byId("Date_iD");

var selectDate=value.getDateValue();

var MOnTh1=selectDate.getMonth();

var YEaRs1=selectDate.getFullYear();

var DAte1=selectDate.getDate();

var date=DAte1-DAte;

var month=MOnTh1-MOnTh;

var year=YEaRs1-YEaRs;

var total=date+month*30+year*365;

if(total>0)

{
sap.m.MessageToast.show("Date can't be in future");

value.setDateValue(TodaysDate);

return;

}

if(total<0)
{

sap.m.MessageToast.show("Date can't be in Past");

value.setDateValue(TodaysDate);
return;

}

}

Result

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