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
1c6972f52003VolvoRed
b20a31481961FiatWhite
ce5f48ca1973FiatGreen
431a314e2001BMWOrange
2dd50ad01992AudiSilver
59c07e9e1975JaguarSilver
bdf16ee41962FordMaroon
308d59681992FordRed
bfc01e541993VolvoMaroon
afff854d1961FiatMaroon
<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.RC1 on Mojarra-2.3.2.