Fragments simple example in sapui5

view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:unified="sap.ui.unified" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
controllerName="Forms.controller.S1" xmlns:html="http://www.w3.org/1999/xhtml">

<Page title="Forms">
                <content>
             
        <Table id="id_Table"
    items="{/data}">
      <columns>
   
      <Column>
        <Text text="Name" />
      </Column>
      <Column>
        <Text text="Email" />
      </Column>
      <Column>
        <Text text="Pan" />
      </Column>
        <Column>
        <Text text="Mobile" />
      </Column>
             <Column>
        <Text text="Actions" />
      </Column>
      </columns>
     <items>
      <ColumnListItem>
        <cells>
    <Text text="{Name}"/>
    </cells>
    <cells>
     <Text text="{Email}" />
     </cells>
     <cells>
    <Text  text="{Pan}" />
    </cells>
    <cells>
     <Text  text="{Mobile}" />
     </cells>
                   <cells>
     <FlexBox>
     <Button icon="sap-icon://display"  type="Accept" press="onPress"/>
     <Button icon="sap-icon://delete"  type="Reject" press="onDelete"/>
     </FlexBox>
     </cells>
  </ColumnListItem>
  </items>
    </Table>
    <Toolbar>
          <Button icon="sap-icon://add" type="Emphasized" press="onadd"/>
    </Toolbar>
 </content>
        </Page>

</core:View>



controller.js :


jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("Forms.controller.S1", {
  onInit:function(){
  tat=this;
         tat.oModel = new sap.ui.model.json.JSONModel( "model/data.json");
            this.getView().byId("id_Table").setModel(tat.oModel);
            //tat=this;
            },
         
         
         
   onPress:function(e){
         
        if (!tat._oDialog) {
                 tat._oDialog = sap.ui.xmlfragment("Forms.view.form1", tat);
                 tat.getView().addDependent(tat._oDialog);
                }
     
     
         var obj=e.getSource().getParent().getParent().getBindingContext().getObject();
         if(obj.Gender=="Male")
                 {
                 sap.ui.getCore().byId("RB1").setSelected(true);
                 }
         else{
                 sap.ui.getCore().byId("RB2").setSelected(true);
         }
         var oModel = new sap.ui.model.json.JSONModel( obj);
         sap.ui.getCore().byId("DisplayId").setModel(oModel,"data");
         tat._oDialog.open();
       
 },
  cancelpress:function(){
          tat._oDialog.close();
  },
  onDelete:function(oEvent){
// var Item= oEvent.getSource().getParent().getParent();
//var table=Item.getParent();
//table.removeItem(Item);
var obj=oEvent.getSource().getParent().getBindingContext().getObject();//code for deleted data from model and table simultaneously
var data=oEvent.getSource().getParent().getParent().getParent().getModel().getData().data;
var index=data.indexOf(obj);
data.splice(index, 1);
oEvent.getSource().getParent().getParent().getParent().getModel().refresh();

  },

  onadd:function(){
      if (!tat.bDialog) {
             tat.bDialog = sap.ui.xmlfragment("Forms.view.form2", tat);
             tat.getView().addDependent(tat.bDialog);
              }
             tat.bDialog.open();
        },
         
           onCancel:function(){
                          tat.bDialog.close();
                  },
               
              onOk:function(evt){
           
               var name=sap.ui.getCore().byId("nameId").getValue();
               var email=sap.ui.getCore().byId("emailId").getValue();
               var p=sap.ui.getCore().byId("panId").getValue();
               var mob=sap.ui.getCore().byId("MobileId").getValue();
               var addr=sap.ui.getCore().byId("addressId").getValue();
               var com=sap.ui.getCore().byId("companyId").getValue();
               var sal=sap.ui.getCore().byId("salaryId").getValue();
               var qual=sap.ui.getCore().byId("QualificationId").getValue();
               var pro=sap.ui.getCore().byId("ProjectId").getValue();
               var blood=sap.ui.getCore().byId("BloodGroupId").getValue();
               //var g=sap.ui.getCore().byId("rb").getValue();
               //name.getSource().setValue();
                  var a=tat.getView().byId("id_Table").getModel().getData();
                  a.data.push({Name : name, Email : email,PANNumber: p,MobileNo: mob,Address: addr,Company: com,Salary: sal,Qualification: qual,Project: pro,BloodGroup: blood});
                 tat.oModel.refresh();
              },
                       
                       
     validate1:function(evt){
        var name=sap.ui.getCore().byId("nameId").getValue();
    //var name=evt.getSource().getValue();
        var mailregex= /^[A-Za-z]*$/;
        if (!mailregex.test(name)) {
        evt.getSource().setValue();
        sap.ui.getCore().byId("nameId").setValueState(sap.ui.core.ValueState.Error);
        }
        else{
        sap.ui.getCore().byId("nameId").setValueState(sap.ui.core.ValueState.None);
        }
   },
   validate2:function(evt){
        var a=sap.ui.getCore().byId("MobileId").getValue();
        var mailregex= /^[d{10}]\*$/;
        var mailregex= /^[0-9]+$/;
        if (!mailregex.test(a)) {
        evt.getSource().setValue();
        sap.ui.getCore().byId("MobileId").setValueState(sap.ui.core.ValueState.Error);
        }else{
        sap.ui.getCore().byId("MobileId").setValueState(sap.ui.core.ValueState.None);
}
},
validate3:function(evt){
   var name=sap.ui.getCore().byId("companyId").getValue();
   var mailregex= /^[A-Za-z]*$/;
   if (!mailregex.test(name)) {
   evt.getSource().setValue();
   sap.ui.getCore().byId("companyId").setValueState(sap.ui.core.ValueState.Error);
}
   else{
   sap.ui.getCore().byId("companyId").setValueState(sap.ui.core.ValueState.None);
   }
},
validate4:function(evt){
         var name=sap.ui.getCore().byId("QualificationId").getValue();
          var mailregex= /^[A-Za-z]*$/;

if (!mailregex.test(name)) {
evt.getSource().setValue();
sap.ui.getCore().byId("QualificationId").setValueState(sap.ui.core.ValueState.Error);

}else{
sap.ui.getCore().byId("QualificationId").setValueState(sap.ui.core.ValueState.None);
}
},
validate5:function(evt){
   var name=sap.ui.getCore().byId("ProjectId").getValue();
   var mailregex= /^[A-Za-z]*$/;
   if (!mailregex.test(name)) {
  evt.getSource().setValue();
sap.ui.getCore().byId("ProjectId").setValueState(sap.ui.core.ValueState.Error);
}else{
sap.ui.getCore().byId("ProjectId").setValueState(sap.ui.core.ValueState.None);
}
},
validate6:function(evt){
  var name=sap.ui.getCore().byId("BloodGroupId").getValue();
  var mailregex= /^[A|B|AB|O][/+|/-]*$/;
if (!mailregex.test(name)) {
evt.getSource().setValue();
sap.ui.getCore().byId("BloodGroupId").setValueState(sap.ui.core.ValueState.Error);
}else{
sap.ui.getCore().byId("BloodGroupId").setValueState(sap.ui.core.ValueState.None);
}
},
validate7:function(evt){
  /* var b=sap.ui.getCore().byId("panId").getValue();*/
var b=evt.getSource().getValue();
var mailregex=/^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;
   //var mailregex= /^([a-z A-Z]{5})([0-9]{4})([a-z A-Z]{1})$/;
if (!mailregex.test(b)) {
evt.getSource().setValue();
sap.ui.getCore().byId("panId").setValueState(sap.ui.core.ValueState.Error);
}
else{
sap.ui.getCore().byId("panId").setValueState(sap.ui.core.ValueState.None);
}
},
validate8:function(evt){
var name=sap.ui.getCore().byId("addressId").getValue();
var mailregex= /^[A-Za-z]*$[0-9]*$/;
if (!mailregex.test(name)) {
evt.getSource().setValue();
sap.ui.getCore().byId("addresssId").setValueState(sap.ui.core.ValueState.Error);
}else{
sap.ui.getCore().byId("addressId").setValueState(sap.ui.core.ValueState.None);
}
},
validate9:function(evt){
    var name=sap.ui.getCore().byId("salaryId").getValue();
    var mailregex= /^[0-9]*$/;
    if (!mailregex.test(name)) {
evt.getSource().setValue();
sap.ui.getCore().byId("salaryId").setValueState(sap.ui.core.ValueState.Error);
}else{
sap.ui.getCore().byId("salaryId").setValueState(sap.ui.core.ValueState.None);
}
},
               
validate:function(evt)
{
var name=sap.ui.getCore().byId("emailId").getValue();
//var name=evt.getSource().getValue();
var mailregex= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (!mailregex.test(name)) {
evt.getSource().setValue();
sap.ui.getCore().byId("emailId").setValueState(sap.ui.core.ValueState.Error);
}
else{
sap.ui.getCore().byId("emailId").setValueState(sap.ui.core.ValueState.None);
}
},
});




form1.fragment :


<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout"
        xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
        <Dialog  title="DisplayForm" class="sapUiSizeCompact" contentHeight="500px"
                contentWidth="300px">
                <f:SimpleForm  id="DisplayId" minWidth="1024"
                        maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
                        labelSpanL="4" labelSpanM="4" labelSpanS="4" emptySpanL="5"
                        emptySpanM="5" columnsL="2" columnsM="2" class="editableForm">

                        <f:content>
                <Label text="Qualification" />
                                <Text text="{data>/Qualification}" />
                                <Label text="Address" />
                                <Text text="{data>/Address}" />
                                <Label text="Gender" />
                                <HBox>
                                <RadioButtonGroup  columns="3" id="rbgid" width="300px"
                                                class="sapUiMediumMarginBottom" select="radiobuttonselect">
                                                <buttons>
                                                        <RadioButton id="RB1" text="Male" enabled="false"/>
                                                        <RadioButton id="RB2" text="Female" enabled="false" />
                                                </buttons>
                        </RadioButtonGroup>
                        </HBox>
                            <Label text="Company" />
                                <Text text="{data>/Company}" />
                                <Label text="Project" />
                                <Text text="{data>/Project}" />
                                <Label text="BloodGroup" />
                                <Text text="{data>/BloodGroup}" />
                                <Label text="Salary" />
                                <Text text="{data>/Salary}" />
                        </f:content>
                </f:SimpleForm>
                <endButton>
                        <Button text="Close" press="cancelpress" />
                </endButton>
        </Dialog>


</core:FragmentDefinition>


form2.fragment :

<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout"
        xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
        <Dialog  title="AddItem" class="sapUiSizeCompact" contentHeight="500px"
                contentWidth="300px">
                <f:SimpleForm  id="ADD" minWidth="1024"
                        maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
                        labelSpanL="4" labelSpanM="4" labelSpanS="4" emptySpanL="5"
                        emptySpanM="5" columnsL="2" columnsM="2" class="editableForm">

                        <f:content>
                <Label text="Name" required="true"/>
                                <Input id="nameId" value="" placeholder="Enter Name" liveChange="validate1"   />
                                <Label text="Email" required="true"/>
                                <Input id="emailId" value="" placeholder="Enter Email" change="validate"  />
                                <Label text="PANNumber" required="true"/>
                                <Input id="panId" value="" placeholder="Enter PAN" change="validate7" maxLength="10" />
                            <Label text="MobileNo" required="true"/>
                                <Input  id="MobileId" value="" placeholder="Enter Mobile" liveChange="validate2" maxLength="10" />
                                <Label text="Address" required="true"/>
                                <Input  id="addressId" value="" placeholder="Enter Address" liveChange="validate8"/>
                                <Label text="Company" required="true" />
                                <Input  id="companyId" value=""  placeholder="Enter Company" liveChange="validate3"/>
                                <Label text="Salary" required="true" />
                                <Input id="salaryId" value="" placeholder="Enter Salary" liveChange="validate9"/>
                                <Label text="Qualification" required="true"/>
                                <Input id="QualificationId" value=""  placeholder="Enter Qualification" liveChange="validate4"/>
                                <Label text="Project" required="true"/>
                                <Input id="ProjectId" value="" placeholder="Enter Project" liveChange="validate5" />
                                        <Label text="BloodGroup" />
                                <Input id="BloodGroupId" value=""  placeholder="Enter BloodGroup" liveChange="validate6"/>
                                <Label text="Gender" required="true" />
                                        <HBox>
                                <RadioButtonGroup  columns="3" id="rbgid1" width="300px"
                                                class="sapUiMediumMarginBottom" select="radiobuttonselect">
                                                <buttons>
                                                        <RadioButton  text="Male" enabled="true"/>
                                                        <RadioButton  text="Female" enabled="true" />
                                                </buttons>
                        </RadioButtonGroup>
                        </HBox>
                        </f:content>
                </f:SimpleForm>
                <beginButton>
                <Button text="Ok" press="onOk" />
                </beginButton>
                <endButton>
                        <Button text="cancel" press="onCancel" />
                </endButton>
        </Dialog>


</core:FragmentDefinition>

Post a Comment

Previous Post Next Post