SAP UI5: 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:

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:

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:

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

Form in SAP UI5

How to do Simple form in SAP UI5 ?

1. To create a form in SAP UI5 first we should take sample Table from SAP UI5 Demo Kit

2. For source code click show code button on top right

3. copy the source code and also libraries (xmlns:l="sap.ui.layout", xmlns:f="sap.ui.layout.form") paste these code in your "view.xml" and include your libraries in <core:View>

Check below screen shot of form :

Check below view code:

         <l:Grid
    defaultSpan="L12 M6 S12"
    width="auto">
    <l:content>
      <f:SimpleForm id="SimpleFormChange354"
        minWidth="1024"
        maxContainerCols="2"
        editable="true"
        layout="ResponsiveGridLayout"
        title=""
        labelSpanL="3"
        labelSpanM="3"
        emptySpanL="4"
        emptySpanM="4"
        columnsL="1"
        columnsM="1"
        class="editableForm">
        <f:content>
          <Label text="Name" />
          <Input value="" id="name" />

          <Label text="Address" />
          <Input value="" id="adr">
          </Input>

           <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" />
              <HBox >


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

    </HBox>

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


            <Label text="Email Id" />
          <Input value="" id="emailid"/>


        <Label/>
         <Button type="Accept" press="submit" text="Submit" ></Button>

        </f:content>
      </f:SimpleForm>
    </l:content>
</l:Grid>

Note - For Submit event is "press" to know more Events and Properties for Table go to Explored

SAP UI5 Installation in Kepler

SAP UI5 is an new tool to make SAP Application Mobile compatible.
SAP UI5 is based on JavaScript and JQuery library
SAP UI5 has demo kit which has 125 controls in it to make SAP Application user friendly https://sapui5.hana.ondemand.com/sdk
SAP UI5 is an User Interface Framework.

How to install SAP UI5?

SAP UI5 works on Eclipse tools

To install a SAP UI5 in Eclipse please follow below steps:

Download Eclipse Kepler based on your O.S bit
To run SAP UI5 application we need Tomcat Server
After installing Eclipse and Tomcat Server successfully we should check weather Eclipse installed with SAP UI5 or not to check that click help->About Eclipse in Eclipse Kepler
To install a SAP UI5 click tools -> Install New Software ->in Work with section type https://tools.hana.ondemand.com/kepler

Congo!! Now we successfully installed SAP UI5 in Eclipse Kepler

Wednesday 1 April 2015

OData Binding