Master Detail Page in SAPUI5

// Xml View

 <App id="dcw">
<SplitApp id="SplitAppDemo" initialDetail="detail" initialMaster="master" orientationChange="onOrientationChange">
<detailPages>
<Page id="detail" title="Cross Dock - Manifest Creation for CROSS DOCK" class="sapUiStdPage">
<content>


<VBox class="sapUiSmallMargin">
  <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="4"
     emptySpanM="0"
     emptySpanS="0"
     columnsXL="3"
     columnsL="1"
     columnsM="1"
     singleContainerFullSize="false" />
   </f:layout>
   <f:formContainers>
 
 
    <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>
     
 
    <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>


   <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:FormContainer>
   </f:formContainers>
  </f:Form>





  <f:Form id="form2"
   editable="true"
   ariaLabelledBy="Title1">
   <f:toolbar>
    <Toolbar >
     <Title  text="TRANSPORTER 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="4"
     emptySpanM="0"
     emptySpanS="0"
     columnsXL="3"
     columnsL="1"
     columnsM="1"
     singleContainerFullSize="false" />
   </f:layout>
   <f:formContainers>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
     <f:formElements>
   
      <f:FormElement label="Transporter ">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
      <f:FormElement label="Associate Transporter">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
   
     </f:formElements>
    </f:FormContainer>
     
 
    <f:FormContainer ariaLabelledBy="Title3as">
   
     <f:FormElement label="Vehicle Number">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
     <f:FormElement label="vehicle Type">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>     
    </f:FormContainer>


   <f:FormContainer ariaLabelledBy="Title1234">
   
     <f:FormElement label="Freight Type">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
   
      <f:FormElement label="Route">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
       
    </f:FormContainer>
   </f:formContainers>
  </f:Form>








  <f:Form id="form3"
   editable="true"
   ariaLabelledBy="Title1">
   <f:toolbar>
    <Toolbar >
     <Title  text="ASN Selection " level="H4" titleStyle="H4"/>
   
    </Toolbar>
   </f:toolbar>
   <f:layout>
    <f:ResponsiveGridLayout
     labelSpanXL="4"
     labelSpanL="3"
     labelSpanM="4"
     labelSpanS="12"
     adjustLabelSpan="false"
     emptySpanXL="0"
     emptySpanL="4"
     emptySpanM="0"
     emptySpanS="0"
     columnsXL="3"
     columnsL="1"
     columnsM="1"
     singleContainerFullSize="false" />
   </f:layout>
   <f:formContainers>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
      <f:FormElement label="Vendor Number:">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
 
    </f:FormContainer>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
      <f:FormElement label="ASN Number:">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
 
    </f:FormContainer>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
      <f:FormElement label="Destination Plant:">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
 
    </f:FormContainer>
 
 
     
 
 
   </f:formContainers>
  </f:Form>
 </VBox>


<Toolbar>
<ToolbarSpacer/>
  <Button type="default"
      text="Proceed"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
 <ToolbarSpacer/> 
</Toolbar>



<Table id="tableId">


 <columns>
 <Column>
 <Text text="Sr No"/>
 </Column>

 <Column>
 <Text text="Part No"/>
 </Column>

 <Column>
 <Text text="Invoice No"/>
 </Column>

 <Column>
 <Text text="Invoice Date"/>
 </Column>

  <Column>
 <Text text="ASN No"/>
 </Column>

  <Column>
 <Text text="ASN Qty"/>
 </Column>

  <Column>
 <Text text="No of Box"/>
 </Column>

  <Column>
 <Text text="Inco Team"/>
 </Column>

 </columns>

 </Table>




<Toolbar>
  <ToolbarSpacer/>
  <Button text="Add to Cart"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

 <Button text="Cancel"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>
     
</Toolbar>







<Table id="tableId1">


 <columns>
 <Column>
 <Text text="Sr No"/>
 </Column>

 <Column>
 <Text text="ASN No"/>
 </Column>

 <Column>
 <Text text="LR No"/>
 </Column>

 <Column>
 <Text text="Receiving Location"/>
 </Column>

  <Column>
 <Text text="Plant"/>
 </Column>

  <Column>
 <Text text="Gross wt"/>
 </Column>

  <Column>
 <Text text="CFT"/>
 </Column>

  <Column>
 <Text text="Billable wt"/>
 </Column>

  <Column>
 <Text text="Shipment No"/>
 </Column>

  <Column>
 <Text text="Consignment No"/>
 </Column>

 </columns>

 </Table>


<Toolbar>
  <ToolbarSpacer/>
  <Button text="Add more 2 cart"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

 <Button text="Remove From Cart"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Export to excel"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Back"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Calculate"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Save"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Print Tripsheet"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="E Way Bill"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

 
     
</Toolbar>


</content>

</Page>
<Page id="detailDetail" title="Issue From Cross Dock" class="sapUiStdPage" showNavButton="false"
navButtonText="Back" navButtonPress="onPressDetailBack">
<content>


<VBox class="sapUiSmallMargin">
  <f:Form id="FormToolbar1"
   editable="true"
   ariaLabelledBy="Title1">
   <f:toolbar>
    <Toolbar id="TB11">
     <Title id="Title11" 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="4"
     emptySpanM="0"
     emptySpanS="0"
     columnsXL="3"
     columnsL="1"
     columnsM="1"
     singleContainerFullSize="false" />
   </f:layout>
   <f:formContainers>
 
 
    <f:FormContainer ariaLabelledBy="Title2">
   
     <f:formElements>
   
      <f:FormElement label="Receiving Location:">
      <f:fields>
       <Select width="100%" id="receiveinfo1" selectedKey=" ">
         <items>
          <core:Item text="Nashik"/>
          <core:Item text="USA"/>
          <core:Item text="England"/>
         </items>
        </Select>
        </f:fields>
      </f:FormElement>
     </f:formElements>
    </f:FormContainer>
     
 
    <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>


   <f:FormContainer id="1231" 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:FormContainer>
   </f:formContainers>
  </f:Form>





  <f:Form id="form21"
   editable="true"
   ariaLabelledBy="Title1">
   <f:toolbar>
    <Toolbar >
     <Title  text="TRANSPORTER 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="4"
     emptySpanM="0"
     emptySpanS="0"
     columnsXL="3"
     columnsL="1"
     columnsM="1"
     singleContainerFullSize="false" />
   </f:layout>
   <f:formContainers>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
     <f:formElements>
   
      <f:FormElement label="Transporter ">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
      <f:FormElement label="Associate Transporter">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
   
     </f:formElements>
    </f:FormContainer>
     
 
    <f:FormContainer ariaLabelledBy="Title3as">
   
     <f:FormElement label="Vehicle Number">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
     <f:FormElement label="vehicle Type">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>     
    </f:FormContainer>


   <f:FormContainer ariaLabelledBy="Title1234">
   
     <f:FormElement label="Freight Type">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
   
      <f:FormElement label="Route">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
   
       
    </f:FormContainer>
   </f:formContainers>
  </f:Form>








  <f:Form id="form31"
   editable="true"
   ariaLabelledBy="Title1">
   <f:toolbar>
    <Toolbar >
     <Title  text="ASN Selection " level="H4" titleStyle="H4"/>
   
    </Toolbar>
   </f:toolbar>
   <f:layout>
    <f:ResponsiveGridLayout
     labelSpanXL="4"
     labelSpanL="3"
     labelSpanM="4"
     labelSpanS="12"
     adjustLabelSpan="false"
     emptySpanXL="0"
     emptySpanL="4"
     emptySpanM="0"
     emptySpanS="0"
     columnsXL="3"
     columnsL="1"
     columnsM="1"
     singleContainerFullSize="false" />
   </f:layout>
   <f:formContainers>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
      <f:FormElement label="Vendor Number:">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
 
    </f:FormContainer>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
      <f:FormElement label="ASN Number:">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
 
    </f:FormContainer>
 
 
    <f:FormContainer ariaLabelledBy="Title2asa">
   
      <f:FormElement label="Destination Plant:">
       <f:fields>
        <Input value="" />
       </f:fields>
      </f:FormElement>
 
    </f:FormContainer>
 
 
     
 
 
   </f:formContainers>
  </f:Form>
 </VBox>


<Toolbar>
<ToolbarSpacer/>
  <Button type="default"
      text="Proceed"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
 <ToolbarSpacer/> 
</Toolbar>



<Table id="tableId11">


 <columns>
 <Column>
 <Text text="Sr No"/>
 </Column>

 <Column>
 <Text text="Part No"/>
 </Column>

 <Column>
 <Text text="Invoice No"/>
 </Column>

 <Column>
 <Text text="Invoice Date"/>
 </Column>

  <Column>
 <Text text="ASN No"/>
 </Column>

  <Column>
 <Text text="ASN Qty"/>
 </Column>

  <Column>
 <Text text="No of Box"/>
 </Column>

  <Column>
 <Text text="Inco Team"/>
 </Column>

 </columns>

 </Table>




<Toolbar>
  <ToolbarSpacer/>
  <Button text="Add to Cart"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

 <Button text="Cancel"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>
     
</Toolbar>







<Table id="tableId111">


 <columns>
 <Column>
 <Text text="Sr No"/>
 </Column>

 <Column>
 <Text text="ASN No"/>
 </Column>

 <Column>
 <Text text="LR No"/>
 </Column>

 <Column>
 <Text text="Receiving Location"/>
 </Column>

  <Column>
 <Text text="Plant"/>
 </Column>

  <Column>
 <Text text="Gross wt"/>
 </Column>

  <Column>
 <Text text="CFT"/>
 </Column>

  <Column>
 <Text text="Billable wt"/>
 </Column>

  <Column>
 <Text text="Shipment No"/>
 </Column>

  <Column>
 <Text text="Consignment No"/>
 </Column>

 </columns>

 </Table>


<Toolbar>
  <ToolbarSpacer/>
  <Button text="Add more 2 cart"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

 <Button text="Remove From Cart"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Export to excel"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Back"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Calculate"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Save"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="Print Tripsheet"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

  <Button text="E Way Bill"
      press="onPress"
      ariaDescribedBy="acceptButtonDescription genericButtonDescription">
     <layoutData>
      <FlexItemData growFactor="1" />
     </layoutData>
    </Button>
  <ToolbarSpacer/>

 
     
</Toolbar>


</content>

</Page>
<Page id="detail21" title="Detail 3 Page" class="sapUiStdPage" showNavButton="true"
navButtonText="Back" navButtonPress="onPressDetailBack">

<content>
<Label text="This is Detail Page3" />
<Input/>
<Label text="Label 2" />
<Input/>
<Label text="Label 3" />
<Input/>
<Label text="Label 4" />
<Input/>
<Label text="Label 5" />
<Input/>
</content>
</Page>
</detailPages>
<masterPages>

<Page id="master2" title="Master 2" icon="sap-icon://action" class="sapUiStdPage" showNavButton="false"
navButtonPress="onPressMasterBack">
<content>
<List itemPress="onListItemPress">
<items>
<StandardListItem title="Receipt at Cross Dock" type="Active" custom:to="detail"/>
<StandardListItem title="Issue From Cross Dock" type="Active" custom:to="detailDetail"/>

</items>
</List>
</content>
</Page>
</masterPages>
</SplitApp>

</App>

=============Controller.js=======

onInit: function(){
this.getSplitAppObj().setHomeIcon({
'phone':'phone-icon.png',
'tablet':'tablet-icon.png',
'icon':'desktop.ico'
});
},

onOrientationChange: function(oEvent) {
var bLandscapeOrientation = oEvent.getParameter("landscape"),
sMsg = "Orientation now is: " + (bLandscapeOrientation ? "Landscape" : "Portrait");
MessageToast.show(sMsg, {duration: 5000});
},

onPressNavToDetail : function(oEvent) {
this.getSplitAppObj().to(this.createId("detailDetail"));
},

onPressDetailBack : function() {
this.getSplitAppObj().backDetail();
},

onPressMasterBack : function() {
this.getSplitAppObj().backMaster();
},

onPressGoToMaster : function() {
this.getSplitAppObj().toMaster(this.createId("master2"));
},

onListItemPress : function(oEvent) {
var sToPageId = oEvent.getParameter("listItem").getCustomData()[0].getValue();

this.getSplitAppObj().toDetail(this.createId(sToPageId));
},

onPressModeBtn : function(oEvent) {
var sSplitAppMode = oEvent.getSource().getSelectedButton().getCustomData()[0].getValue();

this.getSplitAppObj().setMode(sSplitAppMode);
MessageToast.show("Split Container mode is changed to: " + sSplitAppMode, {duration: 5000});
},

getSplitAppObj : function() {
var result = this.byId("SplitAppDemo");
if (!result) {
Log.info("SplitApp object can't be found");
}
return result;
}














Post a Comment

Previous Post Next Post