PrimeFaces - PickList Example

[Updated: Jul 12, 2017, Created: Jul 12, 2017]

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

JSF page


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

    <p:pickList value="#{pickListBean.listModel}"
                itemLabel="#{} (#{emp.dept})"
        <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.dept})"/>
         <h3>Employees target list:</h3>
        <ui:repeat value="#{}" var="emp">
            <h:outputText value="#{} (#{emp.dept})"/>

The manage bean

public class PickListBean {
  private DualListModel<Employee> listModel;

  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 {
  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;

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

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war


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

PrimeFaces PickList Example Project Select All Download
  • pick-list-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp

See Also