Visualforce Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
What are Custom Components?
Defining Custom Components
Custom Component Markup
Using Custom Components in a Visualforce Page
Managing Version Settings for Custom Components
Custom Component Attributes
Custom Component Controllers
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

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:

<apex:component>
    <b>
        <apex:outputText value="This is my custom component."/> 
    </b>
</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:
<apex:component>
    <apex:attribute name="record" description="The type of record we are viewing."
                    type="Object" required="true"/>
                     
    <apex:pageBlock title="Viewing {!record}">   
        <apex:detail />
    </apex:pageBlock>
</apex:component>
Next, create a page called displayRecords and use the following code:
<apex:page >
  <c:recordDisplay record="Account" />
</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:
https://MyDomain_login_URL/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:
<apex:page>
  <c:recordDisplay record="Contact" />
</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.