Form layout question

Question

I am trying to layout a form like this.
Employees Department
Employee # 1234 Department # 123 Department Name ABC
Employee Name Scott Department Type W
SUBMIT
I used the Panel form layout but I am not able group them like above with the headings?
Any help welcome.

Answer 1

If you want to have multiple columns (say 2) for each row, use as below:
*<af:panelFormLayout id="pfl1" maxColumns="2" rows="1">*
<af:panelLabelAndMessage label="#{bindings.DepartmentId.hints.label}" id="plam1">
<af:outputText value="#{bindings.DepartmentId.inputValue}" id="ot1">
<af:convertNumber groupingUsed="false" pattern="#{bindings.DepartmentId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.DepartmentName.hints.label}" id="plam2">
<af:outputText value="#{bindings.DepartmentName.inputValue}" id="ot2"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.ManagerId.hints.label}" id="plam3">
<af:outputText value="#{bindings.ManagerId.inputValue}" id="ot3">
<af:convertNumber groupingUsed="false" pattern="#{bindings.ManagerId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.LocationId.hints.label}" id="plam4">
<af:outputText value="#{bindings.LocationId.inputValue}" id="ot4">
<af:convertNumber groupingUsed="false" pattern="#{bindings.LocationId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelFormLayout>
If you want all columns in the same row, use as below:
*<af:panelGroupLayout id="pgl1" layout="horizontal" halign="center">*
<af:panelLabelAndMessage label="#{bindings.DepartmentId.hints.label}" id="plam1">
<af:outputText value="#{bindings.DepartmentId.inputValue}" id="ot1">
<af:convertNumber groupingUsed="false" pattern="#{bindings.DepartmentId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.DepartmentName.hints.label}" id="plam2">
<af:outputText value="#{bindings.DepartmentName.inputValue}" id="ot2"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.ManagerId.hints.label}" id="plam3">
<af:outputText value="#{bindings.ManagerId.inputValue}" id="ot3">
<af:convertNumber groupingUsed="false" pattern="#{bindings.ManagerId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.LocationId.hints.label}" id="plam4">
<af:outputText value="#{bindings.LocationId.inputValue}" id="ot4">
<af:convertNumber groupingUsed="false" pattern="#{bindings.LocationId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelGroupLayout>
Thanks,
Navaneeth