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

Subscribe to: Post Comments (Atom)