Salesforce Cookies #6

Adding Loading Icon on the page for an AJAX Request ( ActionFunction, CommandButton)

It’s always good to add a loading icon on the page when you are processing something on the server side (calling an apex method ) so a user can understand that something is running in the background. Following code snippet can be used along with your apex:actionFunction or apex:commandButton.

In Classic

<apex:actionStatus id="actionStatus">
  <apex:facet name="start" >
    <img src="/img/loading.gif" />
  </apex:facet>
</apex:actionStatus>

In Lightning Experience

<apex:actionStatus id="actionStatus">
  <apex:facet name="start" >
    <div class="slds-spinner_container">
      <div class="slds-spinner--brand slds-spinner slds-spinner--small" aria-hidden="false" role="alert">
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
      </div>
    </div>
  </apex:facet>
</apex:actionStatus>

Using ActionStatus in CommandButton

<apex:commandButton value="Save" action="{!Save}" status="actionStatus"/>

Happy Coding šŸ™‚

One thought on “Salesforce Cookies #6

  1. Thanks for explaining the Action status.

    For Fancy Action status in classic-

    We need to add following css classes in your VF page code.

    #contentLoading{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 10001;
    text-align: center;
    }

    #contentLoading1{
    position: absolute;
    top:300px;
    z-index: 10000;
    }

    JavaScript function to start and stop action status –

    function onLoadingStatus(vl){
    if(vl)
    document.getElementById(“loadingdiv”).style.display=””;
    else
    document.getElementById(“loadingdiv”).style.display=”none”;
    }
    function loading(val) {
    if (val) {
    document.getElementById(‘contentLoading’).style.display = ‘inline-block’;
    //document.getElementById(‘contentLoaded’).style.display = ‘none’;
    }
    else {
    document.getElementById(‘contentLoading’).style.display = ‘none’;
    //document.getElementById(‘contentLoaded’).style.display = ‘inline-block’;
    }
    }

    And finally add action status tag in your VF page-

    Example Button –

    Thanks!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.