Wednesday 1 April 2015

OData Binding in SAP UI5

 OData Binding

 onInit : function () {
    // set explored app's demo model on this sample
    var oModel =  sap.ui.model.json.JSONModel("http://services.odata.org//V3/Northwind/Northwind.svc/");
    this.getView().setModel(oModel);
  }
});
 
TO Bind data in List view:
 
<List
    headerText="Products"
    items="{/Products}" >
    <StandardListItem
      title="{Name}"
      counter="{Quantity}"/>
  </List> 
 

Creation of JSON Data in SAP UI5

JSON Creation:

{

"ProductCollection":[
            {
                "name":"saleem",
                "id":1
               
            },
           
            {
            "name":"Ratna",
            "id":2
            }

            ]
}

Note - "ProductCollection" is called an Entity

JSON Bidding

JSON Bidding:

onInit : function () {
    // set explored app's demo model on this sample
    var oModel =  sap.ui.model.json.JSONModel("model/products.json");
    this.getView().setModel(oModel);
  }
  
Note:
 In JSONModel() should define path of the json file

To bind data in List:
<List
    headerText="Products"
    items="{/employee}" >
    <StandardListItem
      title="{Name}"
      counter="{Quantity}"/>
  </List>
 
 

Radio Button Form Validation

Radio Button  Form Validation:

    <Label text="Sex" />
              <HBox >
                      
     
      <RadioButton groupName="sex" id="gender_male"   text="Male"  />
      <RadioButton groupName="sex" id="gender_female" text="Female" />
 
    </HBox>

var male =  this.getView().byId("gender_male").getSelected();
        var female =  this.getView().byId("gender_female").getSelected();
        if(male!=true && female!=true){
            sap.m.MessageBox.alert("please select your gender");
            return false;
        }

Note:
getSelected() method will take selected radio

Select Validation in Form

Select list in Form:

<Label text="Group" />
          <Select width="100%" id="group">
            <items>
              <core:Item text="Select" key="1"/>
              <core:Item text="B.Tech" key="2"/>
              <core:Item text="M.C.A" key="3"/>
              <core:Item text="M.Tech" key="4"/>
            </items>
          </Select>
          
            <Label text="Sex" />


var select =  this.getView().byId("group").getSelectedKey();
    
     if(select==1){
        
         sap.m.MessageBox.alert("Please select the course");
         return false;
     }



Mobile Number Validation in Form in SAP UI5

Phone Number Validation:

<Label text="Phone" />
          <Input value="" id="phone" maxLength="10"></Input>


var no =this.getView().byId("phone").getValue();
    if(no ==""){
        sap.m.MessageBox.alert("Please write your Phone Number");
        return false;
    }
    else if(isNaN(no) || no.length === 10){
        alert(" enter valid number");
        return false;
    }

Note -  "isNaN(no)" for not to take characters in Input
             "no.length" to take only 10 digits in input fiels

Name validation in SAP UI5

Name Validation in form:

<Label text="Name"  />
          <Input value="" id="name" />

 To call a id and to get a value should follow below syntax:
this.getView().byId("name").getValue();

//Name Validation       
       
        var a = this.getView().byId("name").getValue();
       
        if(a=="")
        {
            sap.m.MessageBox.alert("Please Enter Your Name");
        return false;
       
        }
        else if(!isNaN(a))
        {
            sap.m.MessageBox.alert("Please Enter Only Characters");

    return false;
            }


Note - For more properties and events of input go to Explored