Provide Status for Asynchronous Operations

Ajax behaviors, such as partial page updates, are asynchronous events that occur in the background while a user continues to work. With the <apex:actionStatus> component, you can display status messages that alert the user of any background activity currently in progress.

The <apex:actionStatus> component displays a status message at the beginning or end of a background event with the startText or stopText attributes. It can also display an image or other component.

Example

The example Visualforce page shows a list of an account’s contacts. After a user clicks a contact’s name, the detail area displays the status message “Requesting…” until the contact’s details render.

The <apex:actionStatus> component’s startText attribute is set to the text displayed at the start of the Ajax request.

The id attribute allows other components to reference the <apex:actionStatus> component. Because the <apex:commandLink> component initiates the Ajax request, its status attribute is set to the <apex:actionStatus> component’s id.

<apex:actionStatus> supports the <apex:facet> component. The <apex:facet> component’s name attribute is set to stop, which indicates that the status message displays until the component nested inside the facet component renders. In this example, that component is <apex:detail>, which shows the chosen contact’s details.

1<apex:page standardController="Account">
2    <apex:pageBlock title="Hello {!$User.FirstName}!">
3        You are displaying contacts from the {!account.name} account. 
4        Click a contact's name to view his or her details.
5    </apex:pageBlock>
6    <apex:pageBlock title="Contacts">
7        <apex:form>
8            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
9                               border="1">
10                  <apex:column>
11                      <apex:commandLink rerender="detail" status="detailStatus">
12                          {!contact.Name}
13                          <apex:param name="cid" value="{!contact.id}"/>
14                      </apex:commandLink>
15                  </apex:column>
16            </apex:dataTable>
17        </apex:form>
18    </apex:pageBlock>
19    <apex:outputPanel id="detail">
20        <apex:actionStatus startText="Requesting..." id="detailStatus">
21            <apex:facet name="stop"> 
22                <apex:detail subject="{!$CurrentPage.parameters.cid}" 
23                             relatedList="false" title="false"/>
24            </apex:facet>
25        </apex:actionStatus> 
26    </apex:outputPanel>
27</apex:page>

When you visit this page, include an account id as part of the URL, for example https://MyDomainName--c.vf.force.com/apex/ajaxAsyncStatus?id=001x000xxx3Jsxb.

See Also

Best Practices for Using Component Facets