Nested dialogs are supported to allow creating a dialog from another dialog. Demo here has 3 level of nested dialogs where last dialog returns data back to the root.
<h:form id="rootform">
<p:growl id="growl" showDetail="true"/>
<div class="card">
<h5>DialogReturn with Button</h5>
<p:commandButton id="btn" value="View" icon="pi pi-home" action="#{dfRootView.openLevel1}">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:commandButton>
<p:commandButton id="btnPlusFlash" value="View and pass object via flash" icon="pi pi-home" action="#{dfRootView.openLevel1WithFlash}" styleClass="ml-2">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:commandButton>
</div>
<div class="card">
<h5>DialogReturn with Link</h5>
<p:commandLink id="lnk" value="View" action="#{dfRootView.openLevel1}" styleClass="font-bold">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:commandLink>
</div>
<div class="card">
<h5>DialogReturn with a Menu</h5>
<p:menu>
<p:submenu label="Dialog Framework">
<p:menuitem value="View" action="#{dfRootView.openLevel1}">
<p:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
</p:menuitem>
</p:submenu>
</p:menu>
</div>
</h:form>
@Named("dfRootView")
@RequestScoped
public class DFRootView {
public void openLevel1() {
Map<String, Object> options = new HashMap<String, Object>();
options.put("modal", true);
PrimeFaces.current().dialog().openDynamic("level1", options, null);
}
public void openLevel1WithFlash() {
FacesContext.getCurrentInstance().getExternalContext().getFlash().put("param1", LocalDateTime.now());
openLevel1();
}
public void onReturnFromLevel1(SelectEvent event) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Data Returned", event.getObject().toString()));
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Level 1</title>
<h:outputStylesheet name="css/primeflex3.css" library="showcase"/>
<style>
html {
font-size: 14px;
}
</style>
</h:head>
<h:body>
<div style="padding: 1rem">
<h:form id="level1form">
<p class="ui-widget" style="margin-top: 0">You are at Level 1.</p>
<p:panel header="Value from flash" rendered="#{dfLevel1View.valueFromFlash != null}" styleClass="mb-3">
<p:outputLabel value="#{dfLevel1View.valueFromFlash}" />
</p:panel>
<p:commandButton id="level1btn" value="Go into level 2" icon="pi pi-home" action="#{dfLevel1View.openLevel2}">
<p:ajax event="dialogReturn" listener="#{dfLevel1View.onReturnFromLevel2}"/>
</p:commandButton>
</h:form>
</div>
</h:body>
</html>
@Named("dfLevel1View")
@RequestScoped
public class DFLevel1View {
private LocalDateTime valueFromFlash;
@PostConstruct
public void init() {
valueFromFlash = (LocalDateTime) FacesContext.getCurrentInstance().getExternalContext().getFlash().get("param1");
}
public void openLevel2() {
Map<String, Object> options = new HashMap<String, Object>();
options.put("modal", true);
PrimeFaces.current().dialog().openDynamic("level2", options, null);
}
public void onReturnFromLevel2(SelectEvent event) {
//pass back to root
PrimeFaces.current().dialog().closeDynamic(event.getObject());
}
public LocalDateTime getValueFromFlash() {
return valueFromFlash;
}
public void setValueFromFlash(LocalDateTime valueFromFlash) {
this.valueFromFlash = valueFromFlash;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Level 2</title>
<style>
html {
font-size: 14px;
}
</style>
</h:head>
<h:body>
<div style="padding: 1rem">
<h:form id="level2form">
<p class="ui-widget" style="margin-top: 0">You are at Level 1.</p>
<p:commandButton id="level2button" value="Go to Level 3" icon="pi pi-home"
action="#{dfLevel2View.openLevel3}">
<p:ajax event="dialogReturn" listener="#{dfLevel2View.onReturnFromLevel3}"/>
</p:commandButton>
</h:form>
</div>
</h:body>
</html>
@Named("dfLevel2View")
@RequestScoped
public class DFLevel2View {
public void openLevel3() {
Map<String, Object> options = new HashMap<String, Object>();
options.put("modal", true);
PrimeFaces.current().dialog().openDynamic("level3", options, null);
}
public void onReturnFromLevel3(SelectEvent event) {
//pass back to level 1
PrimeFaces.current().dialog().closeDynamic(event.getObject());
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Level 3</title>
<style>
html {
font-size: 14px;
}
</style>
</h:head>
<h:body>
<div style="padding: 1rem">
<h:form id="level3form">
<p class="ui-widget" style="margin-top: 0">
Welcome to Level 3, enter value and click send to transfer data from level 3 back to level 2.
</p>
<h:panelGrid columns="2" cellpadding="7">
<p:outputLabel for="val" value="Return Value"/>
<p:inputText id="val" value="#{dfLevel3View.val}"/>
</h:panelGrid>
<p:commandButton value="Send" action="#{dfLevel3View.closeDialog()}" style="margin-top: 1rem" />
</h:form>
</div>
</h:body>
</html>
@Named("dfLevel3View")
@RequestScoped
public class DFLevel3View {
private String val;
public String getVal() {
return val;
}
public void setVal(String val) {
this.val = val;
}
public void closeDialog() {
//pass back to level 2
PrimeFaces.current().dialog().closeDynamic(val);
}
}