You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Templating with Visualforce


 Submitted by Admin on 01/04/2016

Visualforce provides <apex:include> tag to insert the entire content of a Visualforce page into another page. This is useful mainly when the same content needs to be used in multiple places.Template pages are Visualforce pages that include one or more <apex:insert> components. The <apex:composition> component names the associated template, and provides body for the template’s <apex:insert> components with matching <apex:define> components. Any content outside of an <apex:composition> component is not rendered.

The Example below shows how to use a template with Visualforce using the <apex:include> tag.

Step 1:Create a Visualforce page

ContactList.vfp

<apex:page standardController="Contact" recordSetVar="contacts">

   <apex:pageBlock title="Contacts List">        

       <!-- Contacts List -->

       <apex:pageBlockTable value="{! contacts }" var="c">

           <apex:column value="{! c.FirstName }"/>

           <apex:column value="{! c.LastName }"/>

           <apex:column value="{! c.Email }"/>           

       </apex:pageBlockTable>        

   </apex:pageBlock>

</apex:page>

The Visualforce page uses the StandardsetController to display the Contact details like FirstName, LastName, and Email in a PageBlockTable.

Step 2: Create a Visualforce page using <apex:include>

includetemplate.vfp

<apex:page >

   <apex:include pageName="{!$Page.ContactList}"/>

</apex:page>

The Visualforce page uses the <apex:include> tag to insert the entire content of the ContactList VF page.

Step 3: Execute the Visualforce page

b.png

As the <apex:include> tag is used in the Visualforce page, it displays the list of contacts that are retrieved using the standardsetcontroller in the ContactList VF page .

The example below shows how to use template with a Visualforce using the <apex:insert>,<apex:composition> and <apex:define> tags.

Step 1: Create a Visualforce page using the <apex:insert> tag

insertpage.vfp

<apex:page >    

   <br><h1 style="color:violet"><apex:insert name="object1"></apex:insert> </h1></br>

    <br><h1 style="color:indigo"><apex:insert name="object2"></apex:insert> </h1></br>

    <br><h1 style="color:blue"><apex:insert name="object3"></apex:insert> </h1></br>

    <br><h1 style="color:green"><apex:insert name="object4"></apex:insert> </h1></br>

    <br><h1 style="color:yellow"><apex:insert name="object5"></apex:insert> </h1></br>

    <br><h1 style="color:orange"><apex:insert name="object6"></apex:insert> </h1></br>

    <br><h1 style="color:red"><apex:insert name="object7"></apex:insert> </h1></br>

</apex:page>

The Visualforce page is created with <apex:insert> tag with colors as a style for each tag. If the names of the apex:insert are used in <apex:define>,  the styles will be rendered to the content.

Step 2: Create a Visualforce page using the <apex:composition> ,<apex:define> tags.

compositionpage.vfp

<apex:page>

   <apex:composition template="{!$Page.insertpage}">

       <apex:define name="object1">Campaign</apex:define>

       <apex:define name="object2">Lead</apex:define>

       <apex:define name="object3">Account</apex:define>

       <apex:define name="object4">Contact</apex:define>

       <apex:define name="object5">Opportunity</apex:define>

       <apex:define name="object6">Contract</apex:define>

       <apex:define name="object7">Case</apex:define>

   </apex:composition>

</apex:page>

The Visualforce page is created with <apex:composition>,<apex:define> and the styles are rendered on the define content by the insert tags from the insertpage VF page.

Step 3: Execute the Visualforce page

c.png

The executed Visualforce page shows the content of the <apex:define> tags with the styles used in the <apex:insert> tags in the insertpage.

Reference Link: Visualforce Templates in Salesforce