Form with Rows and Columns Format Detail
<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>
