Form with Rows and Columns Format detail

Form with Rows and Columns Format Detail



 xmlns:f="sap.ui.layout.form"


 <f:Form id="FormToolbar"
   editable="true"
   ariaLabelledBy="Title1">
   <f:toolbar>
    <Toolbar id="TB1">
     <Title id="Title1" text="MANIFEST DETAILS" level="H4" titleStyle="H4"/>
   
    </Toolbar>
   </f:toolbar>
 
 
  <f:layout>
    <f:ResponsiveGridLayout
     labelSpanXL="4"
     labelSpanL="3"
     labelSpanM="4"
     labelSpanS="12"
     adjustLabelSpan="false"
     emptySpanXL="0"
     emptySpanL="0"
     emptySpanM="0"
     emptySpanS="0"
     columnsXL="3"
     columnsL="3"
     columnsM="3"
     singleContainerFullSize="false" />
   </f:layout>
 
   //formContainers is used here to show form columns in container format
   <f:formContainers>
 
   //in the formContainers there is many FormContainer
 
 
   //in the first FormContainer only have one data.
   //FormContainer started
   <f:FormContainer ariaLabelledBy="Title2">
   
     <f:formElements>
   
      <f:FormElement label="Receiving Location:">
      <f:fields>
       <Select width="100%" id="receiveinfo" selectedKey=" ">
         <items>
          <core:Item text="Nashik"/>
          <core:Item text="USA"/>
          <core:Item text="England"/>
         </items>
        </Select>
        </f:fields>
      </f:FormElement>
     </f:formElements>
   </f:FormContainer>
     
   //first FormContainer ended.
 
   //second FormContainer started. second FormContainer have two rows.
 
   <f:FormContainer ariaLabelledBy="Title3">
   
     <f:FormElement label="LR Number">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
     <f:FormElement label="LR Date">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>     
   </f:FormContainer>
 
 
 
//Second FormContainer Ended.

//Third FormContainer started.third FormContainer have three Rows

   <f:FormContainer id="123" ariaLabelledBy="Title123">
   
     <f:FormElement label="Receiving Date">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
   
      <f:FormElement label="Receiving Time">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
      <f:FormElement label="Receiving Time">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   

  // Third FormContainer Ended.
     
    </f:FormContainer>
   </f:formContainers>
  </f:Form>




Post a Comment

Previous Post Next Post