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
d9ad75b21995AudiBlue
c039edc21986BMWBlue
56c546071982HondaWhite
5768f2c61998AudiBlack
70a7a98f1965MercedesGreen
009e80e81986BMWYellow
6ffb25fd2005AudiBlue
b2eba3cd1976JaguarBrown
169987fe2005VolkswagenOrange
7cbc21d41998VolkswagenBlue
<h:form id="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>

    <br /><br />

    <p:commandButton id="movieBtn" value="Dynamic" type="button" />
    <p:overlayPanel id="moviePanel" for="movieBtn" hideEffect="fade" dynamic="true" style="width:600px" modal="true">
        <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>

    <br /><br />

    <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>    
    
     <br /><br />
    
    <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="pi pi-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>