UI designing with splite form and multi tables and multi buttons

simple form with table 



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

<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>



Post a Comment

Previous Post Next Post