Wizard

Wizard creates a workflow by creating multiple steps out of a single page form. Only current step is processed partially and next step is displayed if current step passes validations. Wizard flow is sequential by default and this can be managed using the optional ajax flowListeners, simply outcome of a flowListener defines the next step to display.

  • Personal
  • Address
  • Contact
  • Confirmation
Personal Details
Firstname: *
Lastname: *
Age:
Skip to last:

Source

<h:form>

    <p:growl id="growl" sticky="true" showDetail="true"/>

	<p:wizard flowListener="#{userWizard.onFlowProcess}">
	
		<p:tab id="personal" title="Personal">

			<p:panel header="Personal Details">
			
				<h:messages errorClass="error"/>
				
				<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
					<h:outputText value="Firstname: *" />
					<p:inputText required="true" label="Firstname"
							value="#{userWizard.user.firstname}" />
					
					<h:outputText value="Lastname: *" />
					<p:inputText required="true" label="Lastname"
							value="#{userWizard.user.lastname}" />
					
					<h:outputText value="Age: " />
					<p:inputText value="#{userWizard.user.age}" />
					
					<h:outputText value="Skip to last: " />
					<h:selectBooleanCheckbox value="#{userWizard.skip}" />
				</h:panelGrid>
			</p:panel>
		</p:tab>
			
		<p:tab id="address" title="Address">
			<p:panel header="Adress Details">
			
				<h:messages errorClass="error"/>
				
				<h:panelGrid columns="2" columnClasses="label, value">
					<h:outputText value="Street: " />
					<p:inputText value="#{userWizard.user.street}" />
					
					<h:outputText value="Postal Code: " />
					<p:inputText value="#{userWizard.user.postalCode}" />
					
					<h:outputText value="City: " />
					<p:inputText value="#{userWizard.user.city}" />
					
					<h:outputText value="Skip to last: " />
					<h:selectBooleanCheckbox value="#{userWizard.skip}" />
				</h:panelGrid>
			</p:panel>
		</p:tab>
			
		<p:tab id="contact" title="Contact">
			<p:panel header="Contact Information">
				
				<h:messages errorClass="error"/>
			
				<h:panelGrid columns="2" columnClasses="label, value">
					<h:outputText value="Email: *" />
					<p:inputText required="true" label="Email"
							value="#{userWizard.user.email}" />
					
					<h:outputText value="Phone: " />
					<p:inputText value="#{userWizard.user.phone}"/>
					
					<h:outputText value="Additional Info: " />
					<p:inputText value="#{userWizard.user.info}"/>
				</h:panelGrid>
			</p:panel>
		</p:tab>
			
		<p:tab id="confirm" title="Confirmation">
			<p:panel header="Confirmation">
			
				<h:panelGrid id="confirmation" columns="6">
					<h:outputText value="Firstname: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.firstname}" />
					
					<h:outputText value="Lastname: " />
					<h:outputText  styleClass="outputLabel"
								value="#{userWizard.user.lastname}"/>
					
					<h:outputText value="Age: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.age}" />>
					
					<h:outputText value="Street: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.street}" />
					
					<h:outputText value="Postal Code: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.postalCode}" />
					
					<h:outputText value="City: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.city}" />
					
					<h:outputText value="Email: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.email}" />
					
					<h:outputText value="Phone " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.phone}"/>
					
					<h:outputText value="Info: " />
					<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.info}" />
					
					<h:outputText />
					<h:outputText />
				</h:panelGrid>
				
				<p:commandButton value="Submit" update="growl" 
							actionListener="#{userWizard.save}"/>
			
			</p:panel>
		</p:tab>
		
	</p:wizard>
	
</h:form>