The BlockUI component allows us to block any piece(s) of a page during AJAX calls. Blocking is initiated by one or more trigger components. BlockUI adds a layer and any custom content over the target elements to be blocked and gives the appearance and behavior of blocking user interaction. It's very handy if you have, for example, a large data table, and sorting, filtering, pagination takes much time. You can block almost everything, even the entire page.
In this recipe, we will implement blockable p:panel and p:dataTable in order to learn all the features of p:blockUI.
The panel component in the following code snippet gets blocked when the command button is clicked and unblocked when the AJAX response is received. We will see a semi-transparent layer over the panel, which blocks user interactions within it. The action listener on the command button simulates a long-running task.
<p:panel id="panel" header="Blockable Panel...