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.

Comments

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...

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...

Google Tricks

Google isn't just for hypochondriacs looking up their symptoms or for trying to find a cool new restaurant. By just entering a few simple search terms, you can use Google to help plan and organize your life. It is  amazing . 1.) You can use Google as a timer, just set the time in the search bar as shown here. 2.) Google will also help you calculate your tips. 3.) You can find out what date any holiday falls on. 4.) Google will also find movie release dates for you. 5.) You can find full schedules for your favorite television shows. 6.) Google will also find the songs of your favorite bands. 7.) You can use the search engine to find what books your favorite authors wrote. 8.) It'll look up flight information for you. 9.) Do you know what time the sun rises? It'll tell you. 10.) It'll also give you information on your...