Overlay Panel OverlayPanel is a generic container component that can overlay other components on page. Notable features are custom positioning, configurable events and effects. Lazy content loading to reduce page load time is also supported via dynamic option, when enabled overlayPanel will load the contents just before being shown.






DataTable Integration
IdYearBrandColor
1c4bb8a71974VolvoSilver
72b2f0e12004AudiOrange
34da205f1998FiatRed
88a6ebb01976VolvoRed
42c27b981963BMWBlack
b2df15da1978FordGreen
6ee88fdd1961FordBrown
d69260732005FiatBrown
60adfc581999HondaRed
776efd8c1971VolvoSilver
<h:form>          
    <p:commandButton id="imageBtn" value="Basic" type="button" />
    <p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
        <p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
    </p:overlayPanel>

    <p:commandButton id="movieBtn" value="Dynamic" type="button" />
    <p:overlayPanel id="moviePanel" for="movieBtn" hideEffect="fade" dynamic="true" style="width:600px">
        <p:dataTable var="movies" value="#{movieView.movieList}" rows="5" paginator="true">
            <p:column headerText="Movie">
                <h:outputText value="#{movies.movie}" />
            </p:column>

            <p:column headerText="Directed By">
                <h:outputText value="#{movies.directedBy}" />
            </p:column>

            <p:column headerText="Genres">
                <h:outputText value="#{movies.genres}" />
            </p:column>

            <p:column headerText="Run Time(min.)">
                <h:outputText value="#{movies.runTime}" />
            </p:column>
        </p:dataTable>
    </p:overlayPanel>

    <p:graphicImage id="img" name="/demo/images/images.png" style="cursor:pointer" title="Custom Options" />
    <p:overlayPanel id="imgPanel" for="img" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown"
                    dismissable="false" showCloseIcon="true">
        <p:imageSwitch effect="fade" style="width:300px;height:188px;">
            <ui:repeat value="#{imageSwitchView.images}" var="image">
                <p:graphicImage name="/demo/images/nature/#{image}" width="300" />
            </ui:repeat>
        </p:imageSwitch>
    </p:overlayPanel>
    
    <p:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
        <f:facet name="header">
            DataTable Integration
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column style="width:32px;text-align: center">
             <p:commandButton update=":form:carDetail" oncomplete="PF('carOP').show('#{component.clientId}')" icon="ui-icon-search" title="View">
                <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
            </p:commandButton>
        </p:column>
    </p:dataTable>
            
    <p:overlayPanel widgetVar="carOP" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:overlayPanel>

</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2.3 on Mojarra-2.3.2.