VFUIBlock : Simplified wait screen for Visualforce Pages

Well I have been working on VF pages for a long time now and I use a lot of AJAX / Rerender. Generally user has to wait for a AJAX action to complete to get results. So how to show the user something is working in background ? a wait screen ?

Yes indeed a wait screen with "Please Wait..." is required. I have already done some demos about the same here Loading/Wait Screen Using Jquery.

But that requires a bit of coding.

• Add JS functions and ActionStatus
• You may have to change your existing code to accommodate actionStatus
• Add the new code and upload everything in static resource

Well to summarize if you need to show a generic message for all the AJAX calls that is talking place from the page you have to make changes to all the Action component to include a action status. So that raises a question can we built a listener that can track a AJAX call. The answer is yes we can build one. VFUIBlock does uses a generic listener to track the AJAX calls. 

Whats special about "VFUIBlock" ?

Its a generic componet that hooks up to all the AJAX calls and listens to them. You just have to install the component and drop the component in a Visualforce Page. It will automatically attaches itself to all the AJAX request originating from the page and will show a wait screen while the request is in Progress. No need to make any changes in your existing code, No need to use any actionstatus, It does it all by itself!

VFUIBlock in Action

How it works ?
In Visualforce AJAX request are sent to server using XMLHttpRequest, So what VFUIBlock does is, it overrides the default XMLHttpRequest and plugs in its own onSend method and OnReadyStateChange method while preserving the old Send and OnReadyStateChange method. Now with this override VFUIBlock adds in its on method with some extra fancy stuff to Show a block screen.

/*THIS IS A JUST A PORTION OF CODE, PLEASE VISIT PROJECT DETAIL FOR FULL SOURCE CODE*/

function addXMLRequestCallback($) {  
   var oldSend, i, oldonreadystatechange;  
   /*hold the old send method*/  
   oldSend = XMLHttpRequest.prototype.send;  
   /*override with a new function*/  
   XMLHttpRequest.prototype.send = function () {  
     /*call the blockui function or any other custom function to show your message*/  
     onStart($);  
     /*call the old send method*/  
     oldSend.apply(this, arguments);  
     /*cache the old onreadystate change method*/  
     oldonreadystatechange = this.onreadystatechange;  
     this.onreadystatechange = function (progress) {  
       oldonreadystatechange(progress);  
       /*call the blockui function or any other custom function to hide the message*/  
       onStop($);  
     };  
   }  
 }  

VFUIBlock uses the good old jQueryUIBlock to create the wait screen. Its a jQuery plugin which is used to create a overlay and to show a message to the user.

Features

• Lets you customise the HTML that is being displayed to user
• Automatically attaches itself to AJAX events events originated from CommandButton,CommandLink etc.
• No coding and changes in existing code required.
• Works with CommandButton , ActionFunciton, ActionPoller, ActionSupport.

Sample Code / Syntax

Just drop the below code somewhere in your page

<c:VFBlockUI>  
   <img src="/img/loading32.gif" />  
   <div style="font-size:150%;padding:5px">Please Wait....</div>  
</c:VFBlockUI>

You can always customise your message. So anything wrapped inside this VF component is displayed to User. In this example we are displaying a standard "Loading" image a long with a text "Please Wait..."

Installation & Demo : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009M5tv