apex:component in Visualforce page

The <apex:component> is a custom Visualforce component. All custom components definition are wrapped inside a single <apex:component> tag.

By using "html-" prefix, the HTML pass-through attributes are supported by this component. The HTML pass-through attributes are attached to the generated div or span container based on the layout attribute.

The <apex:component> has some of the following attributes which we can use in designing the Visualforce page:

1. access

It is a string-type attribute used for specifying whether we can access this component outside of any page in the same namespace or not.

These are the possible values for this attribute:

public
global

Syntax:

2. allowDML

The allowDML attribute is a Boolean type attribute used for including the DML in the component. If its value is set to true, we can add DML within the component, else we can't.

Syntax:

3. controller

The controller attribute is a string-type attribute used for defining the controller name responsible for controlling the behaviour of this component.

Syntax:

4. extensions

The extensions attribute is a string-type attribute used for defining one or more controller extensions to add additional logic to this component.

Syntax:

5. id

The id attribute is a string-type attribute that allows this component to be referenced by other tags in the component definition.

Syntax:

6. language

The language is a string-type attribute that is used for specifying the base language used for the generated HTML output. The values can be "en" or "en-US" etc.

Syntax:

6. layout

The layout is a string-type attribute used for defining the HTML layout style of the component. These are the possible values for this attribute:

block(component is wrapped with an HTML div tag)
inline(component is wrapped with an HTML span tag)
none(component is wrapped with any generated HTML tag)

The inline is the default value for this attribute.

Syntax:

8. rendered

The rendered attribute is a Boolean type attribute that is used for specifying whether this component is rendered on the page or not. By default, its value is set to true.

Syntax:

9. selfClosing

Another Boolean type attribute used for defining how the Visualforce editor closes this component.

VF editor auto-completes the component as a self-closing tag when its value is set to true.

VF editor auto-completes the component with open and close tags when its value is set to false.

Syntax:

Let's take an example to understand how we can use the <apex:component> in VF:

ApexComponentExample.vfp

<!-- create apex page with custom controller and Visualforce component-->

<apex:page controller="ApexComponentController">
    <!-- using apex form for showing the accounts and contacts table-->
    <apex:form >
        <apex:pageBlock title="Account/Contact Information">
            
            <!-- command button that is responsible for showing the accounts in the table-->
            <apex:commandButton action="{!getAccounts}" value="Show Accounts"/>
            
            <!-- Embeded Visualforce component-->
            <c:apexCustomComponent accounts="{!accList}"></c:apexCustomComponent>
            
            <!-- command button that is responsible for showing the contacts in the table-->
            <apex:commandButton action="{!getContacts}" value="Show Contacts"/>
            
            <!-- Embeded Visualforce component-->
            <c:apexCustomComponent contacts="{!conList}"></c:apexCustomComponent>
            
        </apex:pageBlock>
        
    </apex:form>
</apex:page>

ApexCustomComponent.vfc

<!-- Visualforce component starts with apex component -->
<apex:component>
    <!--declare and define two apex attributes, i.e., accounts and contacts-->
    <apex:attribute name="accounts" type="Account[]" description="Array to store N number of Accounts."/>
    <apex:attribute name="contacts" type="Contact[]" description="Array to store N number of Contacts."/>
    
    <apex:pageBlock>
        
        <!-- create a table to show accounts information -->   
        <apex:pageBlockTable value="{!accounts}" var="accRec">
            <apex:column value="{!accRec.Name}"/>
            <apex:column value="{!accRec.AccountNumber}"/>
            <apex:column value="{!accRec.Phone}"/>
            <apex:column value="{!accRec.Rating}"/>
            <apex:column value="{!accRec.Website}"/>
        </apex:pageBlockTable>
        
        <!-- create a table for showing contacts information -->   
        <apex:pageBlockTable value="{!contacts}" var="conRec">
            <apex:column value="{!conRec.FirstName}"/>
            <apex:column value="{!conRec.LastName}"/>
            <apex:column value="{!conRec.AccountId}"/>
            <apex:column value="{!conRec.Email}"/>
            <apex:column value="{!conRec.Phone}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:component>

ApexComponentController.apxc

// create ApexComponentController class to get the list of Accounts and Contacts
public class ApexComponentController {
    public List<account> accList{get;set;}
    public List<contact> conList{get;set;}
    
    // create getAccounts() method for getting account records 
    public void getAccounts() {
        accList = [select Id, Name, Rating, Phone, AccountNumber, Website From Account];
    }
    // create getContacts() method for getting contact records
    public void getContacts() {
        conList = [select Id, FirstName, LastName, AccountId, Email, Phone From Contact];
    }
}

Output