Skip to main content

LOADING ICON IN VISUALFORCE PAGE

When you develop a Visualforce page, many time you have some action in AJAX inside the page, in this case you need a loading icon. First you need to notify the user that the action is in progress and second you don’t want the user to trigger other action in the page since the previous one didn’t finish. Salesforce does not provide any visualforce component for doing this. So I will provide you a visualforce component that will solve this problem and that will be very easy to integrate to your page.The loading animation will look like that
Loading Animation
Loading Animation

Define the Visualforce component

Let’s create a Visualforce component that will hold the loading icon on top of a div that will hide the page when loading is triggered. You don’t need any static resource for the icon since we are going to use standard Salesforce icons. Go to Setup -> Develop -> Component -> New. Name it “LoadingBox” and copy-paste this code:

<apex:component >
    <apex:actionStatus onstart="startLoading();" onstop="endLoading();" id="loadStatus"/>
    <style>
        .overlay {
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            opacity: 0.3;
            -moz-opacity: 0.3;
            width: 100%;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            background: #090909;
            -khtml-opacity: 0.3;
            z-index: 1000;
        }
        .loader {
            background: url('/img/loading32.gif') scroll no-repeat 0 0;
            width: 32px;
            height: 32px;
            position: absolute;
            left: 50%;
        }
    </style>
    <div id="load_scrl" class="loadingBox loader" style="display:none"> </div>
    <div class="loadingBox overlay"> </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function startLoading(){
            $('#load_scrl').css('top', $(document).scrollTop() + 200);
            $('.loadingBox').show();
        }
        function endLoading(){
             $('.loadingBox').hide();
        }
    </script>
</apex:component>


Integrate the component to your page

Now let’s say you have a Visualforce page with an ajax action, here is 2 ways to use this component but first add this code to the root of your visualforce page:
   <c:loadingbox />

The first and simplest option is to use the “status” attribute with the value “loadStatus”, for example if you have a commandbutton it will look like that:

<apex:commandButton action="!save}" value="AjaxButton" status="loadStatus" rerender="myForm"/>

It will start the loading animation with the Salesforce icon and then on finish the animation will stop and disappear.


The second option if you’re not using standard Visualforce components is to launch and stop the animation from the javascript. It is 2 simple calls:



startLoading();     //start the loading animation
endLoading()       //stop the loading animation

The advantage of using those options is that you are improving the user experience, your loading animation will look like a Salesforce one and finally it is really easy to use.



oops..!! somthing wrong

Labels:

Comments

Post a Comment

Popular posts from this blog

[Fix] SSL Error or Invalid Security Certificate Problem While Opening Facebook or Other Websites

Today we are going to address a very strange and annoying issue which occurs when you try to open a website using  HTTPS  (Hypertext Transfer Protocol Secure) protocol such as  Facebook, Twitter, Google, etc . The problem occurs in all web browsers whether its  Internet Explorer ,  Google Chrome ,  Mozilla Firefox  or  Opera  but the error messages and problem symptom might differ in different web browsers. Problem Symptom: When you open a HTTPS website such as Facebook, Twitter, etc in your favorite web browser, following things happen: In Google Chrome web browser: The website doesn't open and you see a  red cross on padlock icon  and a  red line through the https://  text in the addressbar with following error message: SSL Error Cannot connect to the real www.facebook.com Something is currently interfering with your secure connection to www.facebook.com. Try to reload this page in a few m...
1 comment
Read more

FAQ's Salesforce Lightning Platform Query Optimizer

This article comprises the FAQs related to salesforce internal platform Query Optimizer.and provides valuable information that will help understand how to improve the performance of SOQL queries. For more information, you may also check this Dreamforce Session . 1. Query Optimizer Q: Does Salesforce have its own SQL optimization logic instead of Oracle's built-in? A: Force.com is a multi-tenant platform. To consider multitenant statistics, the platform has its own SOQL query optimizer that determines optimal SQL to satisfy a specific tenant's request. Q: How frequently generated are the statistics used by the query optimizer? A: Statistics are gathered weekly. Where statistics are not calculated, the optimizer also performs dynamic pre-queries, whose results are cached for 1 hour Q: Is there any way to flush the cache when doing your performance testing so your results are not cached biased? A: Unfortunately not. Queries with selective filters will perform mor...
1 comment
Read more

Javascript global variables

Question :  is there any difference between declaring a variable var a = 0 ; //1 and this way a = 0 ; //2 or window . a = 0 ; //3 in global scope? Soloution:      Yes, there are two differences, though in practical terms they're not usually big ones.  three statements explained var a = 0 ; ...creates a variable on the  variable object  for the global execution context, which is the global object, which on browsers is aliased as  window  (and is a DOM window object rather than just a generic object as it would be on non-browser implementations). The symbol  window  is, itself, actually a property of the global (window) object that it uses to point to itself. The upshot of all that is: It creates a property on  window  that you cannot delete. It's also defined before the first line of code runs (see "When  var  happens" below). Note that on IE8 and earlier, the property created on  ...
Post a Comment
Read more