[SalesForce] Behavior of rerender attribute and stop facet

I was looking into example of apex:selectList in salesforce doc and in the following sample code mentioned in the doc

<apex:page controller="sampleCon">
<apex:form>
<apex:selectList value="{!countries}" multiselect="true">
<apex:selectOptions value="{!items}"/>
</apex:selectList><p/>
<apex:commandButton value="Test" action="{!test}" rerender="out" status="status"/>
</apex:form>
<apex:outputPanel id="out">
<apex:actionstatus id="status" startText="testing...">
<apex:facet name="stop">
<apex:outputPanel>
<p>You have selected:</p>
<apex:dataList value="{!countries}" var="c">{!c}</apex:dataList>
</apex:outputPanel>
</apex:facet>
</apex:actionstatus>
</apex:outputPanel>
</apex:page>


public class sampleCon {
    String[] countries = new String[]{};

    public PageReference test() {
        return null;
    }

    public List<SelectOption> getItems() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('US','US'));
        options.add(new SelectOption('CANADA','Canada'));
        options.add(new SelectOption('MEXICO','Mexico'));
        return options;
    }

    public String[] getCountries() {
        return countries;
    }

    public void setCountries(String[] countries) {
        this.countries = countries;
    }
}

I suspect the rerender attribute on apex:commandbutton and stop facet on apex:actionStatus more or less do the same function i.e. display the apex:dataList component after action method on apex:commandButton is completed. Can someone please explain if my understanding is incorrect.

Best Answer

In this case, they are displaying the form when the page isn't loading. This has the effect of hiding the form while an AJAX request is in progress. You shouldn't confuse reRender with actionStatus facets. The actionStatus element is generally used to display an activity indicator, while reRender is meant to update part of the page; actionStatus won't work without reRender, however. While you can use the stop-text as a re-render target area, this is actually a poor design.

From personal experience, this design layout causes a visually jarring effect, and increases maintenance on the page unnecessarily, especially for designs where the "start text" is a copy of the form with all the fields disabled, and the "stop text" is the normal form with all the fields in their normal state. My specific experience included a page 1000 lines long, with 400 lines of nearly duplicate code (inputField/outputField was the only variation); changing the order of two fields took twice as many edits and was twice as prone to error.

A more common example for using start/stop areas is to show a static icon when the page isn't loading (perhaps a "green light", indicating the user can do stuff) versus when it is loading (a "red light", indicating the user should wait). Personally, I find that example code to be in poor taste, because it causes confusion (and understandably so, since reRender appears to have a duplicated purpose).

Related Topic