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 "autoShow" mode activated by setting the attribute "autoShow" to true. Another feature is the "event" attribute which specifies which events should be listen. Skipping "event" means we are not interested in any events. That means all events of the source component cause a blocking of the target component(s). Only events specified by p:ajax are supported. PrimeFaces components can also send ajax requests without p:ajax, but such events are internal and not exposed. BlockUI don't support such events. The "target" attribute allows to specify several target components and HTML elements to be blocked. The syntax of the "target" attribute is the same as e.g. for "process" and "update" attributes in p:ajax.

Try to expand, select, unselect a tree node on the left side or click on any checkbox on the right side.
No tree node is selected
Source

<h:panelGroup id="viewArea" layout="block">
    <h:panelGrid columns="2" columnClasses="columnTop,columnTop">
        <h:panelGroup layout="block" styleClass="blockable" style="margin-right: 40px;">
            <p:tree id="fileSystem" value="#{fileSystemController.root}" var="node" dynamic="true"
                    cache="false" selectionMode="single" selection="#{fileSystemController.selectedNode}">
                <p:ajax event="expand" update=":mainForm:accessRightsGroup"
                        listener="#{fileSystemController.onNodeExpand}"/>
                <p:ajax event="select" update=":mainForm:accessRightsGroup"
                        listener="#{fileSystemController.onNodeSelect}"/>
                <p:ajax event="unselect" update=":mainForm:accessRightsGroup"
                        listener="#{fileSystemController.onNodeUnselect}"/>
                <p:treeNode>
                    <h:outputText value="#{node}"/>
                </p:treeNode>
            </p:tree>
        </h:panelGroup>

        <h:panelGroup layout="block" id="accessRightsGroup" styleClass="blockable" style="width: 250px;">
            <h:outputText value="Access rights for #{fileSystemController.selectedNode.data}"
                          rendered="#{not empty fileSystemController.selectedNode}"/>
            <h:outputText value="No tree node is selected" rendered="#{empty fileSystemController.selectedNode}"/>

            <h:selectManyCheckbox id="accessRights" value="#{accessRightsController.selectedAccessRights}"
                                  styleClass="checkBoxes" layout="pageDirection" style="margin-top: 10px;">
                <f:selectItems value="#{accessRightsController.accessRights}"/>
                <p:ajax process="@this"/>
            </h:selectManyCheckbox>

            <pe:blockUI source="accessRights" target="@(.blockable)" autoShow="true">
                <h:panelGrid columns="2">
                    <h:graphicImage library="images" name="ajax-loader1.gif"
                                    style="margin-right: 12px; vertical-align: middle;"/>
                    <h:outputText value="Checkbox clicked..." style="white-space: nowrap;"/>
                </h:panelGrid>
            </pe:blockUI>
        </h:panelGroup>
    </h:panelGrid>
</h:panelGroup>

<pe:blockUI source="fileSystem" target="viewArea" event="expand,select,unselect" autoShow="true">
    <h:panelGrid columns="2">
        <h:graphicImage library="images" name="ajax-loader1.gif"
                        style="margin-right: 12px; vertical-align: middle;"/>
        <h:outputText value="Tree event is running..." style="white-space: nowrap;"/>
    </h:panelGrid>
</pe:blockUI>
            
Components and more
Documentation pe:blockUI
Attributes (move mouse over the names to see data types)
Name Description
autoShowWhen true, the block is shown automatically when source triggers.Default is false.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
centerXWhether to center the block message horizontally.Default is true.
centerYWhether to center the block message vertically.Default is true.
contentSearch expression for the component whose markup is used as blocking content.
cssCSS to be applied to the blocking overlay.
cssOverlayCSS to be applied to the overlay element.
eventComma-separated list of event names that trigger the block. If empty, all events from source are accepted.
fadeInFade-in duration in milliseconds.Default is 200.
fadeOutFade-out duration in milliseconds.Default is 400.
focusInputWhether to focus the first input in the block content.Default is true.
idUnique identifier of the component in a namingContainer.Default is generated.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showOverlayWhether to show the overlay.Default is true.
sourceSearch expression for the component(s) to block.Default is parent.
targetSearch expression for the element to use as the blocking container.
timeoutTimeout in milliseconds to automatically unblock. 0 means no timeout.Default is 0.
widgetVarName of the client side widget.Default is generated ('widget_' + componentClientId).
PrimeFaces Extensions Showcase - © 2011-2026,PrimeFaces: 16.0.0,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-09-04 17:43