Use ActionStatus loading image on VisualForce Page

Arun Garg   5/30/2017   Comment  

1. actionstatus tag hepls you to display the AJAX request.
2. Using actionstatus , you can display some gif(graphic Interchange Format).

In the example, I am using actionstatus when click on commandbutton. I am showing account field in the page block when user clicks the save button then it request to controller method to insert the record. I am showing image to user while AJAX request is in progress using actionstatus component. I am using apex:facet tag inside actionstatus to show image and provide attribute value 'start' in this tag. Then it will show image when request is in progress. You can use 'stop' value in name attribute of 'apex:facet' to show message when request completes.

Click For Demo

Visualforce Page:

<apex:page controller="ActionStatusCtr" showHeader="false" sidebar="false">

  <apex:form id="frmId">

      <apex:pageBlock id="blockId" title="Create Account">

          <apex:pageblockButtons>

              <apex:commandButton action="{!save}" value="Save" reRender="blockId,accs" status="loadingActionStatus"/>

              <apex:actionStatus id="loadingActionStatus">

                  <apex:facet name="start">

                      <img src="/img/loading.gif" />

                  </apex:facet>

              </apex:actionStatus>

          </apex:pageblockButtons>

          <apex:pageblockSection id="blockSection">

              <apex:inputField value="{!account.name}"/>

              <apex:inputField value="{!account.Phone}"/>

              <apex:inputField value="{!account.Type}"/>

              <apex:inputField value="{!account.Rating}"/>

              <apex:inputField value="{!account.Industry}"/>

          </apex:pageblockSection>

      </apex:pageBlock>

      <apex:pageblock id="accs" title="Accounts">

          <apex:pageBlockTable value="{!lstAcc}" var="acc">

              <apex:column value="{!acc.Name}"/>

              <apex:column value="{!acc.Rating}"/>

          </apex:pageBlockTable>

      </apex:pageblock>

  </apex:form>

</apex:page>

Apex Class:

public class ActionStatusCtr

{

    public Account account{get;set;}

    public List<Account> lstAcc{get;set;}

    public ActionStatusCtr(){

        account = new Account();

        lstAcc=[Select id,Name,Rating From Account where Rating!=null Order by createddate desc limit 10];

    }

    public Pagereference save(){

        upsert account;

        PageReference accPage = new PageReference('/apex/actionStatus');

        accPage.setRedirect(true);

        return accPage;

    }

}