There was a requirement in one of my past projects to build an ADF page to
enter Order quantity for different sizes of an item based on the availability
of that item. Customer has asked for a layout like the below.
Size
|
5
|
6
|
7
|
Available Quantity
|
10
|
20
|
30
|
Order Quantity
|
Since ADF table layout is inherently vertical, page with
an ADF table will be displayed as below:-
Since the horizontal display in this scenario ease the entry
of Item Quantity while viewing its Availability, the users were very particular
about the horizontal display, which seemed fair to me as well.
I was using Jdev 11.1.1.6. I thought of leveraging pivot
table initially, but later figured that it cannot serve my purpose. Finally
zeroed in on an approach to have horizontal display of data, which I would like
to share with you.
- Create a panel group layout with layout as horizontal and create two panel group layouts inside that.
- One Panel group layout with layout as vertical will hold the Text of the Data, i.e. Item Size, Available Quantity and Order Quantity.
- Second Panel group layout with layout as horizontal will have af:iterator component to hold the values from the collection(here it is a view object).
JSPX Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <af:panelGroupLayout id="pgl11" layout="horizontal" inlineStyle="border:2px solid; margin:5px; padding:5px; border-color:Gray;"> <af:panelGroupLayout id="pgIterator1" layout="vertical" > <af:outputText value="Item Size" id="it31" inlineStyle="font-weight:bold; vertical-align:super;"></af:outputText> <af:spacer width="0" height="1" id="s1"/> <af:separator id="s5" inlineStyle="border:1px solid; border-color:Gray;"/> <af:outputText value="Available Quantity" id="it21" inlineStyle="font-weight:bold; vertical-align:super;"></af:outputText> <af:spacer width="0" height="3" id="s2"/> <af:separator id="s6" inlineStyle="border:1px solid; border-color:Gray;"/> <af:outputText value="Order Quantity" id="it11" inlineStyle="font-weight:bold; vertical-align:super;"></af:outputText> </af:panelGroupLayout> <af:panelGroupLayout id="pgl1" layout="horizontal" > <af:iterator id="iter1" value="#{bindings.ItemsVO1.collectionModel}" var="row"> <af:panelGroupLayout id="pgIterator" layout="vertical" inlineStyle="border-left:solid 2px; margin-left:5px; padding-left:5px; border-color:Gray;"> <af:outputText value="#{row.Itemsize}" id="it3" inlineStyle="display:block; text-align:center; vertical-align:bottom;"></af:outputText> <af:spacer width="0" height="4" id="s3"/> <af:separator id="s7" inlineStyle="border:1px solid; border-color:Gray;"/> <af:outputText value="#{row.Atp}" id="it2" inlineStyle="display:block; text-align:center; vertical-align:bottom;"></af:outputText> <af:spacer width="0" height="4" id="s4"/> <af:separator id="s8" inlineStyle="border:1px solid; border-color:Gray;"/> <af:inputText value="#{row.bindings.Quantity.inputValue}" id="it1" contentStyle="width:22px"> <f:validator binding="#{row.bindings.Quantity.validator}"/> <af:convertNumber groupingUsed="false" pattern="#{bindings.ItemsVO1.hints.Quantity.format}"/> </af:inputText> </af:panelGroupLayout> </af:iterator> </af:panelGroupLayout> </af:panelGroupLayout> |
The final layout will look like this.
No comments:
Post a Comment