arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
BlockUI
This example shows how to use widget's JavaScript methods block() / unblock(). They are normally used as onstart / oncomplete callbacks in ajaxified components. Try to switch the current page, sort a table column or try to add a new message.
Subject *
Text *
SubjectText
subject 0text 0
subject 1text 1
subject 2text 2
subject 3text 3
subject 4text 4
Source

<p:messages id="messages"/>

<h:panelGrid columns="2">
    <h:panelGroup id="messageDetailGroup" layout="block" style="margin-right: 20px;">
        <h:panelGrid id="messageDetail" columns="1" columnClasses="formColumn">
            <h:outputText value="Subject *"/>
            <h:inputText value="#{dataTableController.newSubject}" required="true" label="Subject"/>
            <h:outputText value="Text *"/>
            <h:inputText value="#{dataTableController.newText}" required="true" label="Text"/>
        </h:panelGrid>

        <p:commandButton id="addMsgButton" value="Add message" action="#{dataTableController.addMessage}"
                         process="messageDetailGroup" update="messageDetail dataTable messages"
                         style="margin-top: 20px;" icon="pi pi-plus"
                         onstart="PF('blockUIWidget1').block()" oncomplete="PF('blockUIWidget1').unblock()"/>
    </h:panelGroup>

    <p:dataTable id="dataTable" var="message" value="#{dataTableController.messages}" paginator="true"
                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rows="5" rowsPerPageTemplate="5,10,15" paginatorPosition="bottom">
        <p:ajax event="page" listener="#{dataTableController.doSomething}" update=":mainForm:messages"
                onstart="PF('blockUIWidget2').block()" oncomplete="PF('blockUIWidget2').unblock()"/>
        <p:ajax event="sort" listener="#{dataTableController.doSomething}" update=":mainForm:messages"
                onstart="PF('blockUIWidget2').block()" oncomplete="PF('blockUIWidget2').unblock()"/>
        <p:column sortBy="#{message.subject}" headerText="Subject">
            <h:outputText value="#{message.subject}"/>
        </p:column>
        <p:column sortBy="#{message.text}" headerText="Text">
            <h:outputText value="#{message.text}"/>
        </p:column>
    </p:dataTable>
</h:panelGrid>

<pe:blockUI target="messageDetailGroup" widgetVar="blockUIWidget1">
    <h:panelGrid columns="2">
        <h:graphicImage library="images" name="ajax-loader1.gif"
                        style="margin-right: 12px; vertical-align: middle;"/>
        <h:outputText value="Adding message..." style="white-space: nowrap;"/>
    </h:panelGrid>
</pe:blockUI>

<pe:blockUI target="dataTable" content="blockUIContent" widgetVar="blockUIWidget2"/>

<h:panelGrid id="blockUIContent" columns="2" style="display:none;table-layout:auto;">
    <h:graphicImage library="images" name="ajax-loader1.gif"
                    style="margin-right: 12px; vertical-align: middle;"/>
    <h:outputText value="Please wait, data is being processed..." style="white-space: nowrap;"/>
</h:panelGrid>
    
<h:outputStylesheet id="blockUICSS">
    #blockUIContent td {
        border: none !important;
        padding: 0 !important;
    }
</h:outputStylesheet>
            
Components and more
Documentation pe:
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.13,PrimeFaces Extensions: 15.0.14-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-02-23 00:32