Please disable your adblock and script blockers to view this page

Search this blog

Wednesday 7 January 2015

Programmatically populate values in ADF Faces multiSelect component (af:selectManyCheckbox, af:selectManyChoice, af:selectManyListbox, af:selectManyShuttle)

ADF Faces provides some component to support multiple selection as af:selectManyListbox, af:selectManyCheckbox, af:selectManyChoice, af:selectManyShuttle
In this post we will see how to populate values in these component from managed bean using POJO
You can read my previous post on multiple selection that was about populating multiselect component using ADF BC and binding layer
Using Multiple Selection (selectManyListbox & selectManyCheckbox component) in ADF
Shuttle Component in Oracle ADF (Allow Multiple Selection)

See the step by step implementation-



  • Create a Fusion Web Application and a managed bean in viewController


  • Create a variable of type java.util.List in managed bean, and generate its accessors

  •     //List to show records in selectMany components
        List<SelectItem> allValuesList;
    
        public void setAllValuesList(List<SelectItem> allValuesList) {
            this.allValuesList = allValuesList;
        }
    
        public List<SelectItem> getAllValuesList() {
            return allValuesList;
        }
    

  • This list contains value of type javax.faces.model.SelectItem; that is supported by af:selectManyCheckbox, af:selectManyChoice, af:selectManyListbox compoent

  •     //List to show records in selectMany components
        List<SelectItem> allValuesList;
    
        public void setAllValuesList(List<SelectItem> allValuesList) {
            this.allValuesList = allValuesList;
        }
    
        public List<SelectItem> getAllValuesList() {
            if (allValuesList == null) {
                allValuesList = new ArrayList<SelectItem>();
                allValuesList.add(new SelectItem(1, "India"));
                allValuesList.add(new SelectItem(2, "Australia"));
                allValuesList.add(new SelectItem(3, "America"));
                allValuesList.add(new SelectItem(4, "United Kingdom"));
            }
            return allValuesList;
        }
    

  • See how to add this list reference to  af:selectManyCheckbox component, just drag n drop component on page


  • Set managed bean list reference to selectManyCheckbox component, records stored in this list will be populated in component


  • Suppose I have to show some record as selected by default on page load so for this requirement created another List in managed bean and added it to value property of selectManyCheckbox component
    Value property of component refers only selected records but selectItems component refers all records of component

  •     //List to show selected values in selectMany Component
        List selectedValues;
    
        public void setSelectedValues(List selectedValues) {
            this.selectedValues = selectedValues;
        }
    
        public List getSelectedValues() {
            if (selectedValues == null) {
                selectedValues = new ArrayList();
                selectedValues.add(1);
                selectedValues.add(3);
                System.out.println("List is-" + selectedValues);
            }
            return selectedValues;
        }
    

    See af:selectManyCheckbox source -

    <af:selectManyCheckbox id="smc1" value="#{viewScope.ProgSelectManyComp.selectedValues}">
                                        <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si1"/>
                                    </af:selectManyCheckbox>
    

  • Now run this application and see component on page


  • Following same steps i have three more component on page , all 3 adf faces component support multiple selection
    af:selectManyChoice-

    <af:selectManyChoice label="Label 1" id="smc2"
                                                         value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                         simple="true">
                                        <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si2"/>
                                    </af:selectManyChoice>
    


    af:selectManyListbox-

    <af:selectManyListbox label="Label 1" id="sml1"
                                                          value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                          simple="true">
                                        <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si3"/>
                                    </af:selectManyListbox>
    


    af:selectManyShuttle-

     <af:selectManyShuttle label="Label 1" id="sos1" simple="true"
                                                           value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                           contentStyle="width:50px;">
                                        <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si4"/>
                                    </af:selectManyShuttle>
    

  • All 4 components on page are populated using same List, this is just an example to show that all 4 components share same strucutre, run this application and see 


  • Thanks, Happy Learning :)
    Download- Sample ADF Application

1 comment :