View.xml :-
<f:SimpleForm id="FormId" items="{/data}"
editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="4"
labelSpanL="3"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="4"
emptySpanM="0"
emptySpanS="0"
columnsXL="2"
columnsL="1"
columnsM="1"
singleContainerFullSize="false"
ariaLabelledBy="Title1" >
<f:toolbar>
</f:toolbar>
<f:content>
<Label text="Name" />
<Input value="{name}" id="pname"/>
<Label text="Street" />
<Input value="{street}" id="pstreet"/>
<Label text="Age"/>
<Input value="{age}" id="page"/>
<Label text="Mobile No"/>
<Input value="{mobileNo}" id="pmb"/>
<Label text="Gender" id="gender"/>
<RadioButtonGroup id="gender1" columns="2" selectedIndex="2" class="sapUiMediumMarginBottom">
<buttons>
<RadioButton id="RB1" text="Male" enabled="true"/>
<RadioButton id="RB2" text="Female" editable="true"/>
</buttons>
</RadioButtonGroup>
<Label text="Designation"/>
<Select items="{/data}" id="designation1">
<core:Item text="{Designation}" />
</Select>
</f:content>
</f:SimpleForm>
<Toolbar >
<Label id="getCount"/>
<ToolbarSpacer/>
<SearchField liveChange="onSearch" width="40%" />
</Toolbar>
<Table id="idProductsTable" inset="false" items="{/data}" width="50%">
<columns>
<Column width="12em" >
<Text text="Name"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Name}" text="{name}" />
</cells>
</ColumnListItem>
</items>
</Table>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="Print" type="Accept" press="onPress" />
</Toolbar>
</footer>
</Page>
</core:View>
Controller.js :-
onInit: function() {
var b=new sap.ui.model.json.JSONModel("model/data.json");
this.getView().setModel(b);
this.oform=this.getView().byId("FormId");
this.oform.bindElement("/data/0")
},
onPress: function(oEvent) {
var sname=this.getView().byId("pname").getValue();
var sstreet=this.getView().byId("pstreet").getValue();
var sage=this.getView().byId("page").getValue();
var smbNo=this.getView().byId("pmb").getValue();
var sgender= this.getView().byId("gender1");
var Gen=sgender.getSelectedButton().getText();
var sdesignation = this.getView().byId("designation1");
var deg= sdesignation.getSelectedItem().getText();
var d=this.getView().byId()
sap.m.MessageToast.show("Designation="+ deg + "\nName=" + sname + "\n Street=" + sstreet +"\n Gender="+Gen + "\n Age=" + sage + "\n Mobile No=" + smbNo );
},
onSearch : function (oEvent) {
// add filter for search
var aFilters = [];
var sQuery = oEvent.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
// update list binding
var list = this.byId("idProductsTable");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");
var oTableItem = list.getItems();
// setting count value to label
var a = oTableItem.length;
var gettlabell = this.byId("getCount").setText(a);
//console.log(gettlabell);
//console.log(a);
//console.log(binding);
}
data.json:-
{
"data":[
{
"name": "tushar",
"street": "Kharghar",
"age": "18",
"mobileNo": "7678004241",
"gender1":"male",
"Designation":"Select"
},
{
"name": "Digvijay",
"street": "Airoli",
"age": "18",
"mobileNo": "7678004243",
"gender1":"male",
"Designation":"php Developer"
},
{
"name": "Richa",
"street": "ghatkopar",
"age": "05",
"mobileNo": "7348004243",
"gender1":"Female",
"Designation":"java Developer"
},
{
"name": "Aasavari",
"street": "Vikhroli",
"age": "21",
"mobileNo": "7348004247",
"gender1":"Female",
"Designation":"SAP Engineer"
},
{
"name": "Tarabai",
"street": "ghatkopar",
"age": "55",
"mobileNo": "7348004255",
"gender1":"Female",
"Designation":"CRM Engineer"
},
{
"name": "Rohan",
"street": "Turbhe",
"age": "23",
"mobileNo": "7348004245",
"gender1":"male",
"Designation":"DBA Engineer"
},
{
"name": "Dagubai",
"street": "Digha",
"age": "65",
"mobileNo": "7348004653",
"gender1":"Female",
"Designation":"web Engineer"
}
]}
