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

Sharing is Caring

af:listView is a new component introduced in Jdev 12C to show tabular data (rows of a collection), it uses the 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 the layout on the 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 the 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, the single selection is enabled
af:listView

Thanks, happy learning 🙂

Related Posts

0 thoughts on “Better UI for data collection using af:listView, Enable selection in ADF Faces List component”

  1. The understanding of the big data and collect this data from the huge record for personal usage its not easy for anyone. For the collection of data and its understanding, the people hire the data scientist for this, who knows the better way to handle the big data record and its usage at right place, you can contact these data scientist from this activewizards.com .

Leave a Reply

Your email address will not be published. Required fields are marked *