Overlay Effect for VF form submit

Tuesday, December 13, 2011 by Aslam - The Alexendra
Hi All,
Overlay box is many times used whenever there is a need to show user a processing box and we dont need user do any activity on page while processing is going on. So i am sharing a simple vf component here which has css and js which gives overlay effect in your normal VF pages like below:

<c:overlay style="processing">

Here "style" attribute can have two values for now [classic, processing]. Classic style shows gray overlay, and Processing style shows animated image.

Here is the steps how you can use this component to achieve overlay effect:

1) put the component in head section of your page
<c:overlay style="classic">

2) put this div at the very bottom of your page, just before close of </body> tag or </apex:page> tag
<div id="overlay"></div>

3) put this <apex:actionstatus in your form
<apex:actionstatus id="overlayStatus" onstart="showOverlay();" onstop="hideOverlay();"></apex:actionstatus>

4) finally refer this action status in your action function or command button as below
<apex:commandbutton action="{!saveRecord}" status="overlayStatus" value="Save" rerender="pBlock">

Here is the complete code :

<apex:page controller="OverlayDemoController">
<c:Overlay style="processing" />
<apex:actionStatus id="overlayStatus" onStart="showOverlay();" onstop="hideOverlay();"></apex:actionstatus>
<apex:sectionHeader title="Contact Save" subtitle="Overlay Demo" />
<apex:pageBlock id="pBlock">
<apex:commandButton action="{!saveRecord}" status="overlayStatus" value="Save" reRender="pBlock"/>
<apex:inputField value="{!cnt.First_Name__c}" />
<apex:inputField value="{!cnt.Last_Name__c}" />
<apex:inputField value="{!cnt.Phone__c}" />
<apex:inputField value="{!cnt.Email__c}" />
<div id="overlay"></div>

5) Here are the links for working online demo for the overlay :



6) You can download the complete code from here:

Hope it will be useful for developers.

Aslam Bari