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:
<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">
                <p:messages />
                <h:panelGrid columns="2" columnClasses="label, value">
                    <h:outputText value="Firstname: *" />
                    <p:inputText value="#{userWizard.user.firstname}" required="true" label="Firstname"/>

                    <h:outputText value="Lastname: *" />
                    <p:inputText value="#{userWizard.user.lastname}" required="true" label="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="Address Details">
                <p:messages />
                <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">
                <p:messages />
                <h:panelGrid columns="2" columnClasses="label, value">
                    <h:outputText value="Email: *" />
                    <p:inputText value="#{userWizard.user.email}" required="true" label="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="3" columnClasses="grid,grid,grid">
                    <h:panelGrid columns="2" columnClasses="label, value">
                        <h:outputText value="Firstname: " />
                        <h:outputText value="#{userWizard.user.firstname}" styleClass="outputLabel"/>

                        <h:outputText value="Lastname: " />
                        <h:outputText value="#{userWizard.user.lastname}" styleClass="outputLabel"/>

                        <h:outputText value="Age: " />
                        <h:outputText value="#{userWizard.user.age}" styleClass="outputLabel"/>
                    </h:panelGrid>

                    <h:panelGrid columns="2" columnClasses="label, value">
                        <h:outputText value="Street: " />
                        <h:outputText value="#{userWizard.user.street}" styleClass="outputLabel"/>

                        <h:outputText value="Postal: " />
                        <h:outputText value="#{userWizard.user.postalCode}" styleClass="outputLabel"/>

                        <h:outputText value="City: " />
                        <h:outputText value="#{userWizard.user.city}" styleClass="outputLabel"/>
                    </h:panelGrid>

                    <h:panelGrid columns="2" columnClasses="label, value">
                        <h:outputText value="Email: " />
                        <h:outputText value="#{userWizard.user.email}" styleClass="outputLabel"/>

                        <h:outputText value="Phone " />
                        <h:outputText value="#{userWizard.user.phone}" styleClass="outputLabel"/>

                        <h:outputText value="Info: " />
                        <h:outputText value="#{userWizard.user.info}" styleClass="outputLabel"/>

                        <h:outputText />
                        <h:outputText />
                    </h:panelGrid>
                </h:panelGrid>

                <p:commandButton value="Submit" actionListener="#{userWizard.save}" update="growl" process="@this"/>
            </p:panel>
        </p:tab>
    </p:wizard>

</h:form>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.