<apex: composition> Component in Visualforce Page

The <apex: composition> is another important component used to define an area of the page that includes content from a second template page. The template page includes one or more <apex: insert> components. The <apex: composition> component names the associated template and provides a body for the template's <apex: insert> components with matching <apex: define> components. Any content outside of an <apex: composition> component is not rendered.

We use this component to get user input from the controller method that doesn't correspond to a field on a sObject field.

The <apex: composition> component has the following attributes:

1. rendered

The rendered is a string-type attribute used for rendering the component. However, the rendered attribute does not affect the display of this component.

Syntax:

2. template

The template is an "ApexPages.PageReference" type used for specifying the template page used for this component. The name of the apex page or PageReference is used as a value for this attribute.

Syntax:

Let's take an example to understand how we can use this component on the Visualforce page:

ApexCompositionExample.vfp

<!-- create apex page to understand the <apex: composition> component -->
<apex: page >
    <!-- use <apex: composition> for specifying the template-->
    <apex:composition template="ApexInsertExample">
        <!-- use <apex: define> for adding header and body-->
        <apex:define name="header">(page)Header of ApexCompositionExample Start.</apex:define>
        <apex:define name="body">(page)Body of ApexCompositionExample Start.</apex:define>
    </apex: composition>
</apex: page>

ApexInsertExample.vfp

<!-- create an apex page that acts as the template-->
<apex: page >
    <!-- use outputText and insert component -->
    <apex:outputText value="(template) This is before the header"/><br/>
    <apex:insert name="header"/><br/>
    <apex:outputText value="(template) This is between the header and body"/><br/>
    <apex:insert name="body"/>
</apex: page>

Output