Skip to main content

Loading animation on Visualforce

Maybe its just be but even if you build the most amazing system in the world, it won't be awesome if it is not visually pleasing or beautiful UI. No font should not be uneven, or the images should not haywire. Everything should be in order. Perfect.

A simple script can save you a long email, informing you that a million dollar system is broken because it does nothing when users click the buttons. If you have a long processing happening in the background, its not good to assume your users are psych to know whats happening in background (if only we could see data packets send one by one).  If you do not show them that something is happening, they will end up clicking the button again and again, sending multiple request to the server. Worst case scenario your system will be returned back with a thank you note that excel sheet was better, this is broken. Have no fear, I am here.

If you have been following this blog for some time, I hope you do, you will know that 'Please wait' animation was one of the early scripts I published on this blog. The code was big, large and complex, maybe my understanding of VF was a little less back them (it was way back in 2009) or maybe my understand of VF is much better now, I found a optimized and simple way of doing it and using it on my projects.

<apex:actionstatus id="pleasewait">
    <apex:facet name="start">
        <img src="{!$Resource.AjaxAnimation}" />
    </apex:facet>
</apex:actionstatus>


The please wait image should be loaded in static resources with name 'AjaxAnimation'. You can download some nice images I collected for my own projects. This simple code will help you prevent that unpleasant email on a Monday morning that will spoil the whole day.

The best way to do it is make a custom component and keep it handy on all the pages, just add the component to the page. Working on a generic pagination component next, download and add and you have pagination for yourself.

Update: Thanks to Tim Inman, found an amazing site which gives you different Ajax Load images in different background and colors. Do visit http://ajaxload.info/

Comments

  1. Nice. Did not know about this. Thanks for the heads up!

    Also cool site to generate little Ajax loading gifs: http://ajaxload.info/

    ReplyDelete
  2. @Tim
    hey thats a superb site man... let me update the post with the site

    ReplyDelete

Post a Comment

Popular posts from this blog

Some PDF tricks on Visualforce: Landscape, A4, page number and more

The beauty of Visualforce is simplicity. Remember the shock you received when you were told the entire page renders as PDF if you just add renderAs=PDF to the Page tag. For those who thought I spoke alien language right now, here is the trick, to render a page as PDF, we add a simple attribute to the <apex: page> tag <apex: page renderAs='pdf'> This will render the entire page as PDF. Now, say we need to add some extra features to the PDF. Like a page number in the footer or we need to render the page in landscape mode. Faced with this problem, I put on my Indiana Jones hat and went hunting for it in the vast hay-sack of the internet (read: googled extensively). Imagine my happiness when i found a big big page with many big big examples to solve the problem. The document I am referring to is from W3C, paged Box media . Long story short, I now possess the ultimate secret of rendering the page in any format I want. So here are few tricks I learned from the p

Top four design patterns and algorithm that every Salesforce Developer should know

A few days ago I was speaking to a developer friend, he was asked about a Singleton design pattern and he had no idea about. He spoke about how we developers never talk about patterns. And that time it hit me, we developers do not talk about design patterns and algorithms. There are many design patterns available off the shelf, they talk in detail about the problems they can solve. However, in my experience, I have come across and used the following 1. Singleton This is one of the most common and important design pattern to be used. When initiating objects, we need to make sure only one instance of the object is initiated. In a multi-tenant system like Salesforce, it becomes imperative that we do not hog more resources than needed Lets look at an example trigger AccountTrigger on Account (before insert, before update) { for(Account record : Trigger.new){ AccountMasterRecordType rt = new AccountMasterRecordType (); .... } } public class AccountMaster

The unofficial guide to become a Certified Salesforce Administrator (ADM 201)

In my attempt at maximum certifications in 60 days, I completed Salesforce Certified Administrator exam on February 11th 2013 So you have decided to ramp up your career and take certifications in your hand. Good choice. It is also likely that this is the first time you have heard of Salesforce, certification and since your company has a vision of you completing the certification you have decided to do it. At this stage it is likely that, You have done extensive googling. You have received countless brain-dumps. And you have received plenty of advise from different types of users which ranges from Admin certification is easier than making coffee to Admin certification is tougher than building a rocket-ship to fly off to the moon. The purpose of this guide is to give you a clear understanding of what to expect when you are expected to become Certified Salesforce Administrator. To bring sense to all the things you have seen so far and to clearly explain what to do and what