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">
<head>
<c:Overlay style="processing" />
</head>
<apex:form>
<apex:actionStatus id="overlayStatus" onStart="showOverlay();" onstop="hideOverlay();"></apex:actionstatus>
<apex:sectionHeader title="Contact Save" subtitle="Overlay Demo" />
<apex:pageBlock id="pBlock">
<apex:pageMessages></apex:pageMessages>
<apex:pageBlockButtons>
<apex:commandButton action="{!saveRecord}" status="overlayStatus" value="Save" reRender="pBlock"/>
</apex:pageBlockButtons>
<apex:pageBlockSection>
<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}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<div id="overlay"></div>
</apex:page>


http://www.blogger.com/img/blank.gif
5) Here are the links for working online demo for the overlay :

http://labsprojects-developer-edition.ap1.force.com/OverlayDemo

http://labsprojects-developer-edition.ap1.force.com/OverlayDemoProcessing

6) You can download the complete code from here:
http://labs.aslambari.com/overlay.zip

Hope it will be useful for developers.

Thanks
Aslam Bari