Please disable your adblock and script blockers to view this page

Search this blog

Friday 6 February 2015

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 :)

1 comment :

  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 .

    ReplyDelete