Simple Form Binding and table search with Count

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"

}

]}


Post a Comment

Previous Post Next Post