Better UI for data collection using af:listView, Enable selection in ADF Faces List component

af:listView is a new component introduced in Jdev 12C to show tabular data (rows of a collection), it uses same configuration as af:table
In this post i will be describing- how to create af:listView using ADF business component and  how we can enable selection in af:listView

Let's start
How to create af:listView using ADF BC-

• Created a Fusion Web Application and prepared model using Departments table of HR Schema




drop Departments viewObject on page from DataControl as ADF List View






Configuration Wizard for List is opened, set the appropriate layout




Set the value binding that we want to show on page




After this we can customize layout on page also, we can change color, style width etc;
see XML source of af:listView-



<af:listView value="#{bindings.Departments1.collectionModel}" var="item"
                             emptyText="#{bindings.Departments1.viewable ? 'No data to display.' : 'Access Denied.'}"
                             fetchSize="#{bindings.Departments1.rangeSize}" id="lv1">
                    <af:listItem id="li1">
                        <af:panelGroupLayout layout="horizontal" id="pgl1">
                            <f:facet name="separator">
                                <af:spacer width="10" id="s1"/>
                            </f:facet>
                            <af:outputFormatted value="#{item.bindings.DepartmentId.inputValue}" id="of1"
                                                inlineStyle="font-weight:bold;font-size:medium;color:red;">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.DepartmentId.format}"/>
                            </af:outputFormatted>
                            <af:outputFormatted value="#{item.bindings.DepartmentName.inputValue}" id="of2"
                                                inlineStyle="font-weight:bold;font-size:small;color:navy;"/>
                        </af:panelGroupLayout>
                        <af:panelGroupLayout id="pgl2">
                            <af:outputLabel value="Manager id" id="ol1"/>
                            <af:outputFormatted value="#{item.bindings.ManagerId.inputValue}" id="of3">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.ManagerId.format}"/>
                            </af:outputFormatted>
                            <af:spacer width="10" height="10" id="s2"/>
                            <af:outputLabel value="Location Id" id="ol2"/>
                            <af:outputFormatted value="#{item.bindings.LocationId.inputValue}" id="of4">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.LocationId.format}"/>
                            </af:outputFormatted>
                        </af:panelGroupLayout>
                    </af:listItem>
                </af:listView>



and how it looks on page- hmmm better than af:table





• By default adf listView doesn't support selection, you can see Selection property is set to none. it shares same configuration as af:table , you can see that value property is bound to #{bindings.Departments1.collectionModel} and attributes are populated using variable reference of this collection





• To enable selection just set Selection to single and in selectionListener property of list set #{bindings.Departments1.treeModel.makeCurrent}







• Now Run this application and check, single selection is enabled

 Thanks, happy learning :)