Best Practices for Using Component Facets

A facet consists of content in an area of a Visualforce component that provides contextual information about the data that is presented in the component. For example, <apex:dataTable> supports facets for the header, footer, and caption of a table, while <apex:column> only supports facets for the header and footer of the column. The <apex:facet> component allows you to override the default facet on a Visualforce component with your own content. Facets only allow a single child within the start and close tags.

note: Not all components support facets. Those that do are listed in the Standard Visualforce Component Reference.

When defining an <apex:facet>, it is always used as the child of another Visualforce component. The name attribute on the facet determines which area of the parent component is overridden.

Example: Using Facets with <apex:dataTable>

The following markup shows how the <apex:dataTable> component can be modified with <apex:facet>:

<apex:page standardController="Account">
    <apex:pageBlock>
        <apex:dataTable value="{!account}" var="a">
            <apex:facet name="caption"><h1>This is 
              {!account.name}</h1></apex:facet>
            <apex:facet name="footer"><p>Information 
              Accurate as of {!NOW()}</p></apex:facet>
            <apex:column>
                <apex:facet name="header">Name</apex:facet>
                <apex:outputText value="{!a.name}"/>
            </apex:column>
            
            <apex:column>
                <apex:facet 
              name="header">Owner</apex:facet>
                <apex:outputText value="{!a.owner.name}"/>
            </apex:column>
        </apex:dataTable>
    </apex:pageBlock>        
</apex:page>

note: For this page to display account data, the ID of a valid account record must be specified as a query parameter in the URL for the page. For example:

https://MyDomain_login_URL/apex/facet?id=001D000000IRosz

The page displays as follows:

Using Facets with <apex:actionStatus>

Another component that can use a facet is <apex:actionStatus>. The <apex:actionStatus> component can be extended to display an indicator whenever a page is being refreshed. For example, you can define a progress wheel with the following markup:

<apex:page controller="exampleCon">
    <apex:form >
        <apex:outputText value="Watch this counter: {!count}" id="counter"/>
        <apex:actionStatus id="counterStatus">
            <apex:facet name="start">
                 <img src="{!$Resource.spin}"/> <!-- A previously defined image -->
            </apex:facet>
        </apex:actionStatus>    
        <apex:actionPoller action="{!incrementCounter}" rerender="counter"
            status="counterStatus" interval="7"/>
    </apex:form>
</apex:page>

The associated controller updates the counter:

public class exampleCon {
    Integer count = 0;
                        
    public PageReference incrementCounter() {
            count++;
            return null;
    }
                        
    public Integer getCount() {
        return count;
    }
}

The page displays as follows:

See Also

• Using Static Resources