PrimeFaces - PickList Example

In this example, we will learn how to use PickList of PrimeFaces. PickList is used for transferring data between two different collections.

JSF page

src/main/webapp/index.xhtml

<h:body style="margin-left:50px">
    <h2>PrimeFaces PickList Example</h2>

    <h:form>
    <p:pickList value="#{pickListBean.listModel}"
                var="emp"
                itemLabel="#{emp.name} (#{emp.dept})"
                itemValue="#{emp}"
                converter="empConverter"/>
        <p:commandButton value="Submit"
                         update="display" />

        <h:panelGrid id="display" columns="1">
            <h3>Employees source list:</h3>
            <ui:repeat value="#{pickListBean.listModel.source}" var="emp">
                <h:outputText value="#{emp.name} (#{emp.dept})"/>
                <br/>
            </ui:repeat>
         <h3>Employees target list:</h3>
        <ui:repeat value="#{pickListBean.listModel.target}" var="emp">
            <h:outputText value="#{emp.name} (#{emp.dept})"/>
            <br/>
        </ui:repeat>
        </h:panelGrid>
    </h:form>
</h:body>

The manage bean

@ManagedBean
@RequestScoped
public class PickListBean {
    private DualListModel<Employee> listModel;

    @PostConstruct
    public void init() {
        //initial unselected list
        List<Employee> sourceList = Arrays.asList(
                new Employee("1", "Jim", "IT"),
                new Employee("2", "Sara", "Sale"),
                new Employee("3", "Tom", "Admin"),
                new Employee("4", "Diana", "IT")
        );

        //initial selected list
        List<Employee> destinationList = new ArrayList<>();
        destinationList.add(new Employee("5", "Jessica", "Sale"));

        listModel = new DualListModel<>(new ArrayList<>(sourceList), destinationList);
    }

    public DualListModel<Employee> getListModel() {
        return listModel;
    }

    public void setListModel(DualListModel<Employee> listModel) {
        this.listModel = listModel;
    }
}

public class Employee {
    private String id;
    private String name;
    private String dept;
    .............
}

@FacesConverter(value = "empConverter")
public class PickListEmpConverter implements Converter {
    @Override
    public Object getAsObject(FacesContext fc, UIComponent comp, String value) {
        DualListModel<Employee> model = (DualListModel<Employee>) ((PickList) comp).getValue();
        for (Employee employee : model.getSource()) {
            if (employee.getId().equals(value)) {
                return employee;
            }
        }
        for (Employee employee : model.getTarget()) {
            if (employee.getId().equals(value)) {
                return employee;
            }
        }
        return null;
    }

    @Override
    public String getAsString(FacesContext fc, UIComponent comp, Object value) {
        return ((Employee) value).getId();
    }
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jstl 1.2 javax.servlet:jstl
• JDK 1.8
• Maven 3.3.9