Wednesday 1 April 2015

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

3 comments:

  1. i have create press event for submit button but i was no able to submit form can u help me for resolve that

    formSubmitted: function() {

    /*var app = sap.ui.getCore().byId("appId");
    console.log(app);
    app.toDetail('introId','show')//show, fade, slide */

    var requestObj = {
    requestUri: '',
    method: '',
    headers: {
    "X-Requested-With": "XMLHttpRequest",
    "Content-Type": "application/json;odata=minimalmetadata",
    "Accept": "application/json;odata=minimalmetadata"
    }

    };

    var newData = {
    "Date": $("#createId--DP1-inner").val(),
    "Assignmnet": $("#createId--task-inner").val(),
    "Duration": $("#createId--duration-inner").val(),
    "Descripition": $("#createId--descripition-inner").val()
    }

    var url = "SaveTmeCart?data="+newData.Date;

    console.log(url);
    var method = "POST";

    var url = "proxy/http/services.odata.org/V3/(S(k42qhed3hw4zgjxfnhivnmes))/OData/OData.svc/Products";
    var method = "POST";

    requestObj.requestUri = url;
    requestObj.method = method;
    requestObj.data = newData;

    }

    ReplyDelete
  2. Thanks for sharing great post !!
    This information you provided in the blog that is unique.I love it. Keep continue..
    SAP online training | Best sap institute in India
    sap hana online training

    ReplyDelete