JSF Primefaces Indicator

Reading Time: < 1 minute

This example will show how to show a loader indicator while data is being fetch from the server.

<h:panelGrid columns="1" id="searchPanelGrid">
                        <h:panelGroup>
                            <p:inputText id="employeeId" placeholder="Employee Id" required="true"
                                         requiredMessage="Employee Id is required"
                                         value="#{createAdminController.employeeId}"/>
                            <p:commandButton value="Search in VCN" update="ldapPanel @form"
                                             actionListener="#{createAdminController.searchInVCN}" id="searchButton"/>
                        </h:panelGroup>
                    </h:panelGrid>
                    <p:blockUI block="searchPanelGrid" trigger="searchButton">
                        <h:graphicImage library="images" name="loader.gif"/>
                    </p:blockUI>

 

https://www.primefaces.org/showcase/ui/misc/blockUI.xhtml

http://ajaxload.info/

https://answers.axonivy.com/questions/14/how-to-create-a-loading-indicator-in-a-html-user-dialog/15