Close

PrimeFaces - Basic Dialog Example

[Last Updated: Oct 9, 2017]

This example shows a basic use of Dialog in Primefaces. The dialog will contain a SelectManyMenu for the multiple selection. On submitting the dialog main page will be updated with the selection.

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>Primefaces Simple Dialog Example</h2>

    <p:commandButton value="Select Employees" type="button" onclick="PF('dlg').show();"/>

    <h:form>
        <p:dialog header="Employee Selection Dialog" widgetVar="dlg" modal="true">
            <p:selectManyMenu value="#{empSelectBean.selectedEmployees}">
                <f:selectItems value="#{empSelectBean.employees}" var="emp"
                               itemLabel="#{emp}" itemValue="#{emp}"/>
            </p:selectManyMenu>
            <p:commandButton value="Submit" update="selectedEmpPanel" onclick="PF('dlg').hide();"/>
        </p:dialog>

        <h3>Selected Employees:</h3>
        <h:panelGrid id="selectedEmpPanel" columns="1">
            <ui:repeat value="#{empSelectBean.selectedEmployees}" var="emp">
                <h:outputText value="#{emp}"/>
                <br/>
            </ui:repeat>
        </h:panelGrid>
    </h:form>

</h:body>

The manage bean

@ManagedBean(name = "empSelectBean")
@ViewScoped
public class EmployeeSelectionBean {
  private List<String> selectedEmployees;
  private List<String> employees;

  @PostConstruct
  public void init() {
      employees = Arrays.asList("Jim", "Sara", "Tom",
              "Diana", "Tina", "Joe", "Lara", "Charlie");
  }

  public void setSelectedEmployees(List<String> selectedEmployees) {
      this.selectedEmployees = selectedEmployees;
  }

  public List<String> getSelectedEmployees() {
      return selectedEmployees;
  }

  public List<String> getEmployees() {
      return employees;
  }
}

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

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.
  • JDK 1.8
  • Maven 3.3.9

Basic Dialog Example Project Select All Download
  • basic-dialog-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also