Summer Sale is here 🏖️ Get 50% off with code PRSM25
Learn More
General
Support
Resources
Theming
Accessiblity
PrimeBlocks
PrimeFlex
PrimeIcons
UI KIT
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
Form
AutoComplete
CascadeSelect
Chips
Inplace
InputGroup
InputMask
InputNumber
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
Avatar
Badge
Chip
ScrollTop
Skeleton
Tag
AutoUpdate
OutputLabel
FloatLabel
BlockUI
Cache
Captcha
Clock
Context
Effect
ExceptionHandler
FeedReaderUpdated
IdleMonitor
ImportConstants
ImportEnum
Lifecycle
Log
Focus
Hotkey
Printer
ProgressBar
ResetInput
Resizable
SeparatorDeprecated
SpacerDeprecated
Spotlight
Sticky
Dialog Framework
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.
- nested.xhtml
- DFRootView.java
- level1.xhtml
- DFLevel1View.java
- level2.xhtml
- DFLevel2View.java
- level3.xhtml
- DFLevel3View.java
<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>
package org.primefaces.showcase.view.df;
import org.primefaces.PrimeFaces;
import org.primefaces.event.SelectEvent;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
@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="jakarta.faces.html"
xmlns:f="jakarta.faces.core"
xmlns:p="primefaces">
<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>
package org.primefaces.showcase.view.df;
import org.primefaces.PrimeFaces;
import org.primefaces.event.SelectEvent;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;
import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
@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="jakarta.faces.html"
xmlns:p="primefaces">
<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>
package org.primefaces.showcase.view.df;
import org.primefaces.PrimeFaces;
import org.primefaces.event.SelectEvent;
import java.util.HashMap;
import java.util.Map;
import jakarta.enterprise.context.RequestScoped;
import jakarta.inject.Named;
@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="jakarta.faces.html"
xmlns:p="primefaces">
<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>
package org.primefaces.showcase.view.df;
import org.primefaces.PrimeFaces;
import jakarta.enterprise.context.RequestScoped;
import jakarta.inject.Named;
@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);
}
}
PrimeFaces v15.0.9-SNAPSHOT by
PrimeTek