Custom Component Markup

All markup for a custom component is defined within an <apex:component> tag. This tag must be the top-level tag in a custom component definition. For example:

1<apex:component>
2    <b>
3        <apex:outputText value="This is my custom component."/> 
4    </b>
5</apex:component>

Notice that the markup can be a combination of Visualforce and HTML tags, just like other Visualforce pages.

For a more complex example, you could use a custom component to create a form that is used across multiple Visualforce pages. Create a new custom component named recordDisplay and copy the following code:

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:component>
18    <apex:attribute name="record" description="The type of record we are viewing."
19                    type="Object" required="true"/>
20                     
21    <apex:pageBlock title="Viewing {!record}">   
22        <apex:detail />
23    </apex:pageBlock>
24</apex:component>

Next, create a page called displayRecords and use the following code:

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page >
18  <c:recordDisplay record="Account" />
19</apex:page>

For this example to render properly, you must associate the Visualforce page with a valid account record in the URL. For example, if 001D000000IRt53 is the account ID, the resulting URL should be:

1https://Salesforce_instance/apex/displayRecords?id=001D000000IRt53

You should see a page with details about the account you passed in as an ID.

Now, replace the code in displayRecords with the following sample:

1<apex:page>
2  <c:recordDisplay record="Contact" />
3</apex:page>

Again, pass in the ID of a contact before refreshing the page. You should see the page display information about your Contact.

Custom Component Attributes contains more information on using the <apex:attribute> component.

Visualforce Developer’s Guide

Custom Component Markup