<apex: attribute> Component in Visualforce Page

The <apex: attribute> component is another important component that is used for specifying a definition of an attribute on a custom component. The <apex: attribute> can only be a child of a component tag only.

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

1. access

It is one of the most important attributes that is used for specifying whether we can access this attribute outside of any page in the same namespace or not. The public and global are two possible values for it.

Syntax:

2. assignTo

It is of type Object that is used for specifying the setter method. The setter method is responsible for assigning the value of this attribute to a class variable in the associated custom component controller.

Syntax:

3. default

It is of type string that is used for specifying the default value for this attribute.

Syntax:

4. description

It is of type string that is used for specifying the text description of the attribute.

Syntax:

5. id

It is of type string that is a unique identifier for allowing this attribute to be referenced by other tags in the custom component definition.

Syntax:

6. name

It is of type string that is used for specifying the name of the attribute. By using the name of the attribute, we can use it in VF markup when the associated custom component includes a value for the attribute.

Syntax:

7. required

It is of type Boolean that is used for specifying whether the attribute value must be provided by the user or not when the associated custom component is included in a VF page. By default, its value is set to false.

Syntax:

8. type

It is of type string that is used for specifying the data type of the attribute. It can be primitives, sObject, one-dimensional lists, maps, or custom apex types.

Syntax:

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

ApexAttributeExample.vfp

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

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

ApexAttributeComponent.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 for showing accounts information -->   
        <apex:pageBlockTable value="{!accounts}" var="acc">
            <apex:column value="{!acc.Name}"/>
            <apex:column value="{!acc.AccountNumber}"/>
            <apex:column value="{!acc.Phone}"/>
            <apex:column value="{!acc.Rating}"/>
            <apex:column value="{!acc.Website}"/>
        </apex:pageBlockTable>
        
        <!-- create a table for showing contacts information -->   
        <apex:pageBlockTable value="{!contacts}" var="con">
            <apex:column value="{!con.FirstName}"/>
            <apex:column value="{!con.LastName}"/>
            <apex:column value="{!con.AccountId}"/>
            <apex:column value="{!con.Email}"/>
            <apex:column value="{!con.Phone}"/>
       	</apex:pageBlockTable>
        
    </apex:pageBlock>
    
</apex:component>

ApexAttributeController.apxc

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

Output