How to show a “busy” user interface status cue after pushing a button in Visualforce

How to show a "busy" visual cue after someone pushes a button.

I’ve known for a while that Visualforce has support for carrying out an action after a button is pushed – such as updating a user interface component with a “busy” sign for example. For example, considering the following:

before.jpg

After hitting “Filter”, I would a visual cue to appear indicating that the processing is occurring – for example something like this:

after.jpg

And of course I want that cue to go away at some stage. This is particularly useful if you’re using Ajax to update the page. It turns out it’s pretty simple to do. Here’s my entire Visualforce page:

<apex:page controller="MyMileageController" showHeader="false">
<apex:pageBlock title="Filter">
<apex:form >
<apex:inputText value="{!filter}"/>
<apex:commandButton value="Filter" status="myStatus" action="{!go}" reRender="thetable"/>
<apex:actionStatus startText="(processing...)" stopText="" id="myStatus" />
</apex:form>
</apex:pageBlock>
<apex:pageBlock >
<apex:pageBlockTable value="{!mileages}" var="o" id="thetable">
<apex:column value="{!o.Miles__c}" />
<apex:column value="{!o.Date__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

Notice the actionStatus tag. I provide some text to display when it’s in a start mode, and when it’s stopped (blank in my case), and I identify it (myStatus). The remarkable thing is that to get this to work, all I have to do is add one attribute to the commandButton, namely status="myStatus". Everything else is taken care of automatically. As you can see from the reREnder attribute, when you push this button, the go() method is called, and the status is updated. When the method returns, the blank stop text is shown, and the table is updated with some Ajax. Cool!

For completeness, here is my controller code (it uses the Mileage object from the workbook):


public class MyMileageController {
public MyMileageController() {
filter = 100;
}
/* When rerendering, the getMileages will get called
anyway, so I don't need to do anything here.  But imagine
a time-expensive web services call for example! */
public PageReference go() {
return null;
}
public Double filter {get; set;}
public List<Mileage__c> getMileages() {
return (List<Mileage__c>) [SELECT date__c, miles__c FROM Mileage__c WHERE miles__c < :filter LIMIT 20];
}
}
Published
July 22, 2009

Leave your comments...

How to show a “busy” user interface status cue after pushing a button in Visualforce