PrimeFaces - Passing data from Dialog to Source Page by using dialogReturn event

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

Following example shows how to pass data from a page displayed in the dialog (opened via openDialog()) back to the parent page by using 'dialogReturn' ajax behavior event.

Example

Parent JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>PrimeFaces - Programmatic Dialog</h2>
    <h:form>
        <p:commandButton value="Show Employees" actionListener="#{mainBean.showEmployees}">
            <p:ajax event="dialogReturn" listener="#{mainBean.onEmployeeSelected}" update="selectedEmpPanel" />
        </p:commandButton>
          <br/>
        <h3>Selected Employees:</h3>
        <h:panelGrid id="selectedEmpPanel" columns="1">
            <ui:repeat value="#{mainBean.selectedEmployees}" var="emp">
                <h:outputText value="#{emp.name} (#{emp.department})"/>
                <br/>
            </ui:repeat>
        </h:panelGrid>
    </h:form>
</h:body>

The Main bean

@ManagedBean
@ViewScoped
public class MainBean {
  private List<Employee> selectedEmployees = new ArrayList<>();

  public void showEmployees(ActionEvent ae) {
      RequestContext.getCurrentInstance()
                    .openDialog("employee", getDialogOptions(), null);
  }

  public Map<String, Object> getDialogOptions() {
      Map<String, Object> options = new HashMap<>();
      options.put("resizable", false);
      options.put("draggable", true);
      options.put("modal", true);
      options.put("height", 600);
      options.put("contentHeight", "100%");
      return options;
  }

  public void onEmployeeSelected(SelectEvent selectEvent) {
      this.selectedEmployees = (List<Employee>) selectEvent.getObject();
  }

  public List<Employee> getSelectedEmployees() {
      return selectedEmployees;
  }
}
public class Employee {
  private long id;
  private String name;
  private String phoneNumber;
  private String department;
    .............
}

The Employee Page

src/main/webapp/employee.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>Employees</title>
</h:head>
<h:body>
    <h:form>
        <p:panel>
        <p:dataTable var="employee"
                     value="#{employeeBean.employeeList}"
                     rowKey="#{employee.id}"
                     scrollable="true"
                     scrollHeight="400"
                     selection="#{employeeBean.selectedEmployees}">
            <p:column headerText="Id">
                <h:outputText value="#{employee.id}"/>
            </p:column>

            <p:column headerText="Name">
                <h:outputText value="#{employee.name}"/>
            </p:column>

            <p:column headerText="Phone Number">
                <h:outputText value="#{employee.phoneNumber}"/>
            </p:column>

            <p:column headerText="Department">
                <h:outputText value="#{employee.department}"/>
            </p:column>
            <p:column selectionMode="multiple"
                      style="width:16px;text-align:center"/>
        </p:dataTable>
        <f:facet name="footer">
            <p:commandButton value="Submit" actionListener="#{employeeBean.submitSelectedEmployees()}"/>
        </f:facet>
        </p:panel>
    </h:form>
</h:body>
</html>

The Employee bean

@ManagedBean
@RequestScoped
public class EmployeeBean {
  private List<Employee> selectedEmployees;

  public List<Employee> getEmployeeList() {
      return EmployeeService.Instance.getEmployees();
  }

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

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

  public void submitSelectedEmployees() {
      RequestContext.getCurrentInstance().closeDialog(selectedEmployees);
  }
}

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

mvn tomcat7:run-war

Output

Main page:

Invoking dialog by clicking 'Show Employees' button and making selections by clicking checkboxes:

On Submitting the dialog:

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.
  • datafactory 0.8: Library to generate data for testing.
  • JDK 1.8
  • Maven 3.3.9

Sending Data From Dialog to the Parent Page Example Select All Download
  • dialog-return-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • WEB-INF

See Also