Theme
MasterDetail
Wizard-like navigation with form fields. Header facet allows to render any content above navigation and footer facet allows to render any content below. Content of header / footer facet is shared between levels. This feature makes possible to show any custom title bar indicating current flow instead of built-in breadcrumbs.
PersonalAddressContactConfirmation
Personal Details
Firstname: *
Lastname: *
Age:
Source

<pe:masterDetail id="masterDetail" level="#{wizardMasterDetailController.currentLevel}" showBreadcrumb="false">
    <f:facet name="header">
        <p:messages showDetail="true"/>
        <h:panelGroup layout="block" style="margin-top: 10px;">
            <h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
                                  #{wizardMasterDetailController.currentLevel eq 1 ? 'ui-state-hover' : ''}">
                <h:outputText value="Personal"/>
            </h:panelGroup>
            <h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
                                  #{wizardMasterDetailController.currentLevel eq 2 ? 'ui-state-hover' : ''}">
                <h:outputText value="Address"/>
            </h:panelGroup>
            <h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
                                  #{wizardMasterDetailController.currentLevel eq 3 ? 'ui-state-hover' : ''}">
                <h:outputText value="Contact"/>
            </h:panelGroup>
            <h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
                                  #{wizardMasterDetailController.currentLevel eq 4 ? 'ui-state-hover' : ''}">
                <h:outputText value="Confirmation"/>
            </h:panelGroup>
        </h:panelGroup>
    </f:facet>

    <pe:masterDetailLevel level="1">
        <p:panel header="Personal Details">
            <h:panelGrid columns="2" columnClasses="formColumn1,formColumn2">
                <h:outputText value="Firstname: *"/>
                <p:inputText required="true" label="Firstname"
                             value="#{wizardMasterDetailController.user.firstname}"/>
                <h:outputText value="Lastname: *"/>
                <p:inputText required="true" label="Lastname"
                             value="#{wizardMasterDetailController.user.lastname}"/>
                <h:outputText value="Age: "/>
                <p:inputText value="#{wizardMasterDetailController.user.age}"/>
            </h:panelGrid>
        </p:panel>
        <p:commandButton value="Next" process="masterDetail"
                         style="margin-top: 10px;" icon="ui-icon-arrowthick-1-e">
            <pe:selectDetailLevel step="1"/>
        </p:commandButton>
        <p:commandButton value="Go to Save" process="masterDetail"
                         style="margin-top: 10px;" icon="ui-icon-arrowthickstop-1-e">
            <pe:selectDetailLevel level="4"/>
        </p:commandButton>
    </pe:masterDetailLevel>

    <pe:masterDetailLevel level="2">
        <p:panel header="Adress Details">
            <h:panelGrid columns="2" columnClasses="formColumn1,formColumn2">
                <h:outputText value="Street: "/>
                <p:inputText value="#{wizardMasterDetailController.user.street}"/>
                <h:outputText value="Postal Code: "/>
                <p:inputText value="#{wizardMasterDetailController.user.postalCode}"/>
                <h:outputText value="City: "/>
                <p:inputText value="#{wizardMasterDetailController.user.city}"/>
            </h:panelGrid>
        </p:panel>
        <p:commandButton value="Back" style="margin-top: 10px;" icon="ui-icon-arrowthick-1-w"
                         process="@this" immediate="true">
            <pe:selectDetailLevel step="-1"/>
        </p:commandButton>
        <p:commandButton value="Next" process="masterDetail"
                         style="margin-top: 10px;" icon="ui-icon-arrowthick-1-e">
            <pe:selectDetailLevel step="1"/>
        </p:commandButton>
    </pe:masterDetailLevel>

    <pe:masterDetailLevel level="3">
        <p:panel header="Contact Information">
            <h:panelGrid columns="2" columnClasses="formColumn1,formColumn2">
                <h:outputText value="Email: *"/>
                <p:inputText required="true" label="Email"
                             value="#{wizardMasterDetailController.user.email}"/>
                <h:outputText value="Phone: "/>
                <p:inputText value="#{wizardMasterDetailController.user.phone}"/>
                <h:outputText value="Additional Info: "/>
                <p:inputText value="#{wizardMasterDetailController.user.info}"/>
            </h:panelGrid>
        </p:panel>
        <p:commandButton value="Back" style="margin-top: 10px;" icon="ui-icon-arrowthick-1-w"
                         process="@this" immediate="true">
            <pe:selectDetailLevel step="-1"/>
        </p:commandButton>
        <p:commandButton value="Next" process="masterDetail"
                         style="margin-top: 10px;" icon="ui-icon-arrowthick-1-e">
            <pe:selectDetailLevel step="1"/>
        </p:commandButton>
    </pe:masterDetailLevel>

    <pe:masterDetailLevel level="4">
        <p:panel header="Confirmation">
            <h:panelGrid id="confirmation" columns="2" columnClasses="formColumn1,formColumn2">
                <h:outputText value="Firstname: "/>
                <h:outputText value="#{wizardMasterDetailController.user.firstname}"/>
                <h:outputText value="Lastname: "/>
                <h:outputText value="#{wizardMasterDetailController.user.lastname}"/>
                <h:outputText value="Age: "/>
                <h:outputText value="#{wizardMasterDetailController.user.age}"/>
                <h:outputText value="Street: "/>
                <h:outputText value="#{wizardMasterDetailController.user.street}"/>
                <h:outputText value="Postal Code: "/>
                <h:outputText value="#{wizardMasterDetailController.user.postalCode}"/>
                <h:outputText value="City: "/>
                <h:outputText value="#{wizardMasterDetailController.user.city}"/>
                <h:outputText value="Email: "/>
                <h:outputText value="#{wizardMasterDetailController.user.email}"/>
                <h:outputText value="Phone "/>
                <h:outputText value="#{wizardMasterDetailController.user.phone}"/>
                <h:outputText value="Info: "/>
                <h:outputText value="#{wizardMasterDetailController.user.info}"/>
            </h:panelGrid>
        </p:panel>
        <p:commandButton value="Back" style="margin-top: 10px;" icon="ui-icon-arrowthick-1-w"
                         process="@this" immediate="true">
            <pe:selectDetailLevel step="-1"/>
        </p:commandButton>
        <p:commandButton value="Submit" process="masterDetail"
                         actionListener="#{wizardMasterDetailController.save}"
                         style="margin-top: 10px;" icon="pi pi-save">
            <pe:selectDetailLevel level="1"/>
        </p:commandButton>
    </pe:masterDetailLevel>
</pe:masterDetail>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a naming container.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
level Current level in flow. It can be arbitrary initialized and gets updated with each navigation. It allows to show any initial level when a view with MasterDetail component(s) is displayed. Default is 1.
contextValue Context value for the current level. It can be arbitrary initialized at beginning and gets updated with each navigation. Default is null.
selectLevelListener Method with signature int methodName(SelectLevelEvent). Server-side listener invoking when a navigation attempt takes place (via pe:selectDetailLevel). Return value defines the level to go. Default is null.
showBreadcrumb Flag whether a breadcrumb navigation is shown or not. Default is true.
showAllBreadcrumbItems Per default breadcrumb items right from the current level are not shown. This flag allows to show all breadcrumb items right from the current level as disabled. Default is false.
breadcrumbAboveHeader Boolean flag to allow rendering of breadcrumb above or below header facet. Default is true.
style Style of the main MasterDetail container element. Default is null.
styleClass Style class of the main MasterDetail container element. Default is null.
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55
occured!