Theme
MasterDetail
Complex master-detail views with CRUD operations and a server-side flow listener. SelectLevelEvent passing into the flow listener and its return value allow to control the level to be navigated. If save of the detail view (level 2) was e.g. successful, the next level to go should be the master view (level 1). Otherwise, in case of some errors, user should stay on the detail view.
NameTax ClassBirth Date
Max Mustermann125.06.1972
Sara Schmidt210.01.1982
Jasper Morgan313.03.1968
Source

<pe:masterDetail id="masterDetail" selectLevelListener="#{selectLevelListener.handleNavigation}"
                 showAllBreadcrumbItems="true">
    <f:facet name="header">
        <p:messages showDetail="false" showSummary="true"/>
    </f:facet>

    <pe:masterDetailLevel level="1">
        <f:facet name="label">
            <h:outputFormat value="Overview {0}">
                <f:param value="Persons"/>
            </h:outputFormat>
        </f:facet>

        <p:dataTable id="persons" value="#{complexMasterDetailController.persons}" var="pers">
            <p:column headerText="Name">
                <p:commandLink value="#{pers.name}">
                    <pe:selectDetailLevel contextValue="#{pers}"/>
                </p:commandLink>
            </p:column>
            <p:column headerText="Tax Class">
                <h:outputText value="#{pers.taxClass}"/>
            </p:column>
            <p:column headerText="Birth Date">
                <h:outputText value="#{pers.birthDate}">
                    <f:convertDateTime pattern="dd.MM.yyyy"/>
                </h:outputText>
            </p:column>
        </p:dataTable>
    </pe:masterDetailLevel>

    <pe:masterDetailLevel level="2" contextVar="person" levelLabel="Person Detail">
        <h:panelGrid id="personDetail" columns="2" columnClasses="formColumn1,formColumn2">
            <h:outputText value="Name (string)"/>
            <p:inputText value="#{person.name}" required="true" label="Name"/>
            <h:outputText value="Tax Class (number)"/>
            <p:inputText value="#{person.taxClass}" required="true" label="Tax Class">
                <f:validateLength maximum="1"/>
            </p:inputText>
            <h:outputText value="Birth Date (date dd.MM.yyyy)"/>
            <p:inputText value="#{person.birthDate}" required="true" label="Birth Date">
                <f:convertDateTime pattern="dd.MM.yyyy"/>
            </p:inputText>
            <h:outputText value="Language skills"/>
            <h:panelGrid columns="2" style="vertical-align: middle;">
                <p:dataList value="#{person.languageSkills}" var="skill" itemType="circle">
                    <h:outputText value="#{skill}"/>
                </p:dataList>
                <p:commandLink immediate="true" style="padding:5px 0 0 8px; vertical-align:middle;">
                    <h:graphicImage library="images" name="flashlight_plus.png" style="border:none;"/>
                    <pe:selectDetailLevel contextValue="#{person}" preserveInputs="@all"/>
                    <pe:tooltip value="Add language skills"/>
                </p:commandLink>
            </h:panelGrid>
        </h:panelGrid>

        <p:commandButton value="Save with success" process="masterDetail"
                         action="#{complexMasterDetailController.saveSuccess(person)}"
                         style="margin-top:10px;" icon="pi pi-save">
            <pe:selectDetailLevel level="1"/>
        </p:commandButton>
        <p:commandButton value="Save with failure" process="masterDetail"
                         action="#{complexMasterDetailController.saveFailure(person)}"
                         style="margin-top:10px;" icon="pi pi-save">
            <pe:selectDetailLevel level="1"/>
        </p:commandButton>
        <p:commandButton type="button" value="Delete" onclick="PF('deletedDlg').show()" style="margin-top:10px;"/>

        <p:dialog header="Delete confirmation" widgetVar="deletedDlg" resizable="false">
            <h:panelGroup layout="block" style="padding:5px;">
                <h:outputText value="Are you sure you want to delete this person?"/>
            </h:panelGroup>
            <p:commandButton id="deleteBtn" value="Delete"
                             action="#{complexMasterDetailController.delete(person)}" process="@this"
                             style="margin-top:10px;">
                <pe:selectDetailLevel level="1"/>
            </p:commandButton>
            <p:commandButton value="Cancel" type="button" onclick="PF('deletedDlg').hide();"
                             style="margin-top:10px;"/>
        </p:dialog>
    </pe:masterDetailLevel>

    <pe:masterDetailLevel level="3" contextVar="person" levelLabel="Language skills">
        <h:panelGrid columns="2" columnClasses="formColumn1,formColumn2">
            <h:outputText value="Choose language skill"/>
            <p:selectOneMenu id="languageSkills" value="#{complexMasterDetailController.languageSkillToAdd}"
                             style="width:200px;">
                <f:selectItems value="#{complexMasterDetailController.availableLanguageSkills}"/>
                <p:ajax event="valueChange" process="masterDetail"
                        listener="#{complexMasterDetailController.addLanguageSkill(person)}"/>
                <pe:selectDetailLevel step="-1"/>
            </p:selectOneMenu>
        </h:panelGrid>
    </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!