Thursday, April 13, 2017

Overlay Effect for VF form submit

Overlay Effect for VF form submit


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

Blog Archive