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. The blockUI component 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 is very handy if you have, for example, a large dataTable component, and sorting, filtering, and pagination takes much time. You can block almost everything—even the entire page.
In this recipe, we will implement p:panel and p:dataTable that are blockable 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 on and gets unblocked when the AJAX response is received. We will see a semitransparent layer over the panel, which blocks user interactions within it. The action listener on the command button simulates a long-running task. The...