function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Force2b_MikeForce2b_Mike 

Show "Processing" message or image after click a CommandButton

I would like to have my VisualForce page display a simple "Please Wait...Processing" type message after a user clicks a commandButton on the page. I've been experimenting with the reRender attribute, assuming that it would re-render a given ID on the page, but this does not work. Actually when the Rerender attribute is used, I don't even get an hourglass on the page.

 

Clearly I'm missing something. Any help would be very much appreciated.

 

Page Sample:

 

<apex:page controller="TestPage_Controller" title="Testing" id="Testing" tabStyle="Account">
    <apex:pageMessages />
    <apex:form id="testForm" >
    <apex:pageBlock >
        <apex:pageBlockButtons location="top">
            <apex:commandButton title="Start" value="Start" action="{!start}" rerender="status"/>
        </apex:pageBlockButtons>
    </apex:pageBlock>
        
    <apex:pageBlock >
        <apex:outputText value="Running: {!counter}" id="status" rendered="{!showStatus}" />
    </apex:pageBlock>
    </apex:form> 
</apex:page>
 
 Controller Sample:
 
 
public class TestPage_Controller {

    public double counter {get; set; }
    public boolean showStatus {get; set; }
    
    public TestPage_Controller() {     }

    public pageReference start() {
    	counter = 0;
    	showStatus = true;
    	for (integer y = 0; y < 5; y++) {
       	   for (integer n = 0; n < 30000; n++) {
    		counter++;
    	   }
        }
    	showStatus = false;
    	return null;
    }
}
 
Thanks,
 
Mike 
 
 


Best Answer chosen by Admin (Salesforce Developers) 
Ron HessRon Hess
Ok, here is the way to build a page that prevents multiple requests.
 
notice that almost all output for the page I want to show is inside the "stop" facet.
 
 
<apex:page controller="TestPage_Controller" > 
    <apex:form id="testForm" >
      <apex:pageBlock >
        <apex:actionStatus startText=" Processing the stuff " stopText=" Done " id="counterStatus"  >
         <apex:facet name="start" >Processing...
          <img src="/apexpages/devmode/img/saveStatus.gif" />
         </apex:facet>
         <apex:facet name="stop">
          <apex:commandButton title="Start" value="Start" action="{!start}" status="counterStatus" rerender="counterStatus"> </apex:commandButton>
         </apex:facet>
        </apex:actionStatus>
      </apex:pageBlock>
   </apex:form> 
</apex:page>
 
 
 
 
 


All Answers
Ron HessRon Hess
There is a tag that is designed for just such a status message.
 
doc search for "apex:actionStatus"  here


Force2b_MikeForce2b_Mike
Ron,
 
Thank you for the quick response.
 
I thought the Action tags were related, but I have not been able to get it to work. I changed the page code as follows, but still nothing. When I click [Start] I get an hourglass, but no status messages. The page just refreshes when done.
 
 
<apex:page controller="TestPage_Controller" title="Testing" id="Testing" tabStyle="Account">
    <apex:pageMessages />
    <apex:form id="testForm" >
    <apex:pageBlock >
        <apex:pageBlockButtons location="top">
            <apex:commandButton title="Start" value="Start" action="{!start}"/>
        </apex:pageBlockButtons>
    </apex:pageBlock>
        
    <apex:pageBlock >
        <apex:outputText value="Running: {!counter}" id="status" rendered="{!showStatus}" />
        <apex:actionStatus startText="Processing" stopText="" id="counterStatus"/>
        <apex:actionPoller rerender="status" status="counterStatus" interval="15"/>
    </apex:pageBlock>
    </apex:form> 
</apex:page>
 
I'm clearly missing something. 
 
 
 
Best Regards,
 
Mike 


Ron HessRon Hess
Take a look at this sample 
 
 
<apex:page controller="TestPage_Controller" >
    
    <apex:form id="testForm" >
        
            <apex:commandButton title="Start" value="Start" action="{!start}" status="counterStatus" id="button" rerender="counterStatus"> </apex:commandButton>
            <apex:actionStatus startText=" Processing the stuff " stopText=" Done " id="counterStatus"  />
   
    </apex:form> 
</apex:page>
 
 the thing that made it work is the rerender="counterStatus" on the command button
 
Without that, the entire page gets refreshed anyway, so the action status never shows up.
With the rerender, the actionStatus tag works as expected. 
 
Message Edited by Ron Hess on  06-01-2009 02:03 PM


Force2b_MikeForce2b_Mike
Ron,
 
This is a big improvement. Thanks!
 
I did notice that there is no hourglass to indicate that the page is processing and the user can click the [Start] button again (that's the bigger problem). I played around with adding a disabled="{!showStatus}" attribute to the commandButton tag and adding "button" to the rerender= list, but it doesn't seem like this item is rerendered once the page starts processing. Is there a way to either implement the hourglass and/or disable the start button (or an entire form) to prevent the user restarting the process?
 
Also, does the same logic apply if I wanted to display an entire pageblock section when the user clicks the [Start] button?
 
Best Regards,
 
Mike 


Ron HessRon Hess
Ok, here is the way to build a page that prevents multiple requests.
 
notice that almost all output for the page I want to show is inside the "stop" facet.
 
 
<apex:page controller="TestPage_Controller" > 
    <apex:form id="testForm" >
      <apex:pageBlock >
        <apex:actionStatus startText=" Processing the stuff " stopText=" Done " id="counterStatus"  >
         <apex:facet name="start" >Processing...
          <img src="/apexpages/devmode/img/saveStatus.gif" />
         </apex:facet>
         <apex:facet name="stop">
          <apex:commandButton title="Start" value="Start" action="{!start}" status="counterStatus" rerender="counterStatus"> </apex:commandButton>
         </apex:facet>
        </apex:actionStatus>
      </apex:pageBlock>
   </apex:form> 
</apex:page>
 
 
 
 
 
This was selected as the best answer
Force2b_MikeForce2b_Mike
Ron,
 
Very nice. I didn't realize that I could create blocks out of the apex:Facet tag. I added some JavaScript to set the mouse cursor and surrounded two facet sections with pageBlock tags so that it looks like the button is replaced by the processing message when it's clicked.
 
I assume that I could use the same onStart and onStop attribute on on the ActionStatus tag to enable/disable or show/hide other page elements if I wanted to. I suppose that for a long procedure, this could be combined with the ActionPoller tag to display updates in a portion of the page. I'll have to experiment with that.
 
Thank you very much for your help on this!
 
 
<apex:page controller="TestPage_Controller" title="Testing" id="Testing" tabStyle="Account">
    <apex:pageMessages />
    <apex:form id="testForm" >
        <apex:actionStatus startText=" Processing " stopText=" Done " id="counterStatus" 
         onStart="document.body.style.cursor = 'wait';return true;" 
         onStop="document.body.style.cursor = 'default';return true;" >
            <apex:facet name="start" >
                <apex:pageBlock >
                <center>Processing...
                <img src="/apexpages/devmode/img/saveStatus.gif" /></center>
                </apex:pageBlock>
            </apex:facet>
            <apex:facet name="stop">
                <apex:pageBlock >
                <apex:pageBlockButtons location="top">
                    <apex:commandButton title="Start" value="Start" action="{!start}"
                    status="counterStatus" rerender="counterStatus"  />
                </apex:pageBlockButtons>
                </apex:pageBlock>
            </apex:facet>         
        </apex:actionStatus> 
    </apex:form> 
</apex:page>
 
 Mike
 


Force2b_MikeForce2b_Mike
Ron,
 
One last  question. I noticed that I'm no longer able to display page messages when using the ActionStatus tag. The page doesn't process if there is a validation error of some kind, but it doesn't display any message back to the user. The original code had apex:pageMessages at the top of the page and that worked. I tried using an apex:pageMessage tag by itself within the facet="stop" block that would render if {!errorMsg} was not null. Unfortunately,the page doesn't seem to rerender this item after the button completes. Even tried using an actionPoller statement to rerender this item. 
 
How can I get error messages to display after the button action completes? 
 
 
<apex:page controller="ChangeAccountOwner" title="Change Account Owner" id="ChangeAccountOwner" tabStyle="Account">

    <apex:pageMessages />
    <apex:form id="txfrOwnerForm" >
    
        <apex:actionStatus startText=" Processing " stopText=" Done " id="counterStatus" 
         onStart="document.body.style.cursor = 'wait';return true;" 
         onStop="document.body.style.cursor = 'default';return true;" >
            <apex:facet name="start" >
                <apex:pageBlock >
                <center>...Transferring <img src="/apexpages/devmode/img/saveStatus.gif" /> Ownership...</center>
                </apex:pageBlock>
            </apex:facet>
            <apex:facet name="stop">
	        <apex:pageBlock>
                <apex:pageMessage summary="{!errorMsg}" severity="warning" strength="3" 
                rendered="{!IF( !ISNULL(errorMsg), 'TRUE', 'FALSE')}" ID="errorMsg"/>
		        <apex:pageBlockButtons location="top" >
		            <apex:commandButton title="Transfer" value="Transfer" action="{!doTransfer}" status="counterStatus" 
		                    rerender="counterStatus, errorMsg"/>
		            <apex:commandButton title="Cancel" value="Cancel" action="{!cancel}" immediate="true" />
		        </apex:pageBlockButtons>
                </apex:pageBlock>
            </apex:facet>         
        </apex:actionStatus> 
 
 
 
Thanks,
 
Mike 


Force2b_MikeForce2b_Mike
OK, nevermind - I figured this out. The key was seting an ID on the Apex:pageMessages tag and adding that to the rerender list on the commandButton. I was thinking that I needed to force a rerender at the end of the process, but I guess the rerender on the commandButton does it at the start and at the end. 
 
 
    <apex:pageMessages id="pageMessages" />
    <apex:form id="txfrOwnerForm" >
        <apex:actionStatus startText=" Processing " stopText=" Done " id="counterStatus" 
         onStart="document.body.style.cursor = 'wait';return true;" 
         onStop="document.body.style.cursor = 'default';return true;" >
            <apex:facet name="start" >
                <apex:pageBlock >
                <center>...Transferring <img src="/apexpages/devmode/img/saveStatus.gif" /> 
                 Ownership...</center>
                </apex:pageBlock>
            </apex:facet>
            <apex:facet name="stop">
		        <apex:pageBlock title="" id="Page">
		        <apex:pageBlockButtons location="top" >
		            <apex:commandButton title="Transfer" value="Transfer" action="{!doTransfer}" 
                                 status="counterStatus" rerender="counterStatus, pageMessages" />
		            <apex:commandButton title="Cancel" value="Cancel" action="{!cancel}" 
                                 immediate="true" />
		        </apex:pageBlockButtons>
                </apex:pageBlock>
            </apex:facet>         
        </apex:actionStatus> 

 
 
 
Mike