---
schema_version: "1"
id: 9e4ed10cc501e2f1e76b4d630cad4a00dcac72cd3eea6c14243be9e2b3d173ea
title: Best Practices for Using Component Facets
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/best-practices/pages-compref-additional-facet.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-compref-additional-facet.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c2f4a9f14443e249a8ec96df2b7e415bc6d0cd4802e922368bcd27760644f8c7
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# 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](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/components/pages-compref.md).

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>`:

<!-- otherprops: apex_page set_clipboard -->
```markupex1
<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:

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

The page displays as follows:

![An example of a facet](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_facet_sample.jpg "Extending <apex:dataTable> with a Facet")

## 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:

<!-- otherprops: apex_page set_clipboard -->
```markupex2
<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:

<!-- otherprops: apex_code set_clipboard -->
```controllerex2
public class exampleCon {
    Integer count = 0;
                        
    public PageReference incrementCounter() {
            count++;
            return null;
    }
                        
    public Integer getCount() {
        return count;
    }
}
```

The page displays as follows:

![A refresh counter stating, "Watch this counter: 1"](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_facet_ajax_capture.png "Extending <apex:actionStatus> with a Facet")

**See Also**  


-   [Using Static Resources](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/resources/pages-resources.md)