What are Visualforce Components in Salesforce?

In Salesforce, Visualforce components are reusable UI elements that enhance the development of custom user interfaces. In this Salesforce tutorial, I will explain Visualforce components, their types, and how to add the visualforce components on the Salesforce Visualforce Pages.

Table of Contents

Visualforce Components in Salesforce

In Salesforce, Visualforce components are small, reusable code blocks with defined functionality that we can use in our Visualforce pages to design interactive web pages within the Salesforce platform. For Visualforce pages, we can either use standard Visualforce components or create custom components.

For example, you are building a product catalog using Visualforce pages. Each product in the catalog has its image, price, and description displayed in a specific style. Instead of duplicating the Visualforce markup to display these details for each product, you can create a custom component named “productCard” with all attributes.

This custom component can then format and display the product information. Once defined, every Visualforce page in the organization can utilize the “productCard” custom component, just like standard components such as <apex:dataTable> or <apex:form>.

Types of Visualforce Components in Salesforce

In Salesforce, we categorize the Visualforce components as Standard and Custom components. Within standard components, we divide the components based on their functionalities and properties.

1. Visualforce Action Components:

In Visualforce pages, the action components are used to call the methods from the Controller classes. This component is also used to update the view state of the Visualforce page, and we can also refresh the Visualforce page and navigate to a new page with this component.

We use the two functionalities below to execute the action components on visualforce pages.

Command button: It is used to insert HTML buttons using the component tag <apex:commandButton>.
Command link: It inserts anchor text links using the component tag <apex:commandLink>.

Both components are used between apex: form opening and closing tags. <apex:form> and </apex:form>.

2. Visualforce Styled components

In Visualforce pages, the styled components are used to inherit the properties from the user interface of Force.com while creating a VisualForce page. Using the styled-components, CSS Visualforce files can be created.

For example, to build a web application using JavaScript and jQuery, you need to add a min.js file in your JavaScript folder for the proper functioning of JavaScript components.

The styled Components in Visualforce are categorized into five categories.

Page Structure – There are four page, structure-based components in Force.com – SectionHeader, PageBlockSection, PageBlock, and pageBlockSectionItem. These elements give a clear organizational structure, sections, subsections, labels, and fields.
Action Containers– PageBlockButtons, toolbar, and toolbar group are the main components based on ActionContainers. They provide buttons, links, and different action functions to VisualForce pages.
Table – PageBlockTable inserts rows and columns in the Visualforce page.
Pagination Elements– PanelBar, PanelBarItem, tab, and tabPanel are the key components based on pagination elements. These are used to dynamically show or hide content, buttons, and links.
Notifications– PageMessage is the component used to show error messages.

3. Visualforce Data components:

In Salesforce Visualforce pages, the data components are used to parse and extract data from the controller through various standard HTML elements. For this, they use HTML elements (tags) like <p> </p>, <a>, <br>, etc.

In Visualforce pages, the data components e manipulate fields and records of the Force.com database. The Data components in visualforce are categorized into three parts.

Metadata-Aware components: These components are valid when the fields and records are bounded with the database object. These components use the definition of the database object to determine the page’s appearance.
Primitive data components: These data components add the functionalities of VisualForce to standard HTML tags. The data components that are primitive in visualforce are OutputLabel, InputCheckbox, InputFile, InputHidden, InputSecret, InputText, InputTextArea, SelectList, SelectRadio, SelectCheckBox, etc.
Repeating components: The repeating component allows us to generate HTML data multiple times based on the collection of data, where it displays the same component structure for each item within that collection on a page.

4. Visualforce Primitive components:

Visualforce Primitive components are used to create user interfaces in Salesforce. These components include input fields (<apex:inputText>) and output displays. (<apex:outputText>), buttons (<apex:commandButton>), and more. They are similar to standard HTML elements but have built-in Salesforce functionality for data binding and integration with Apex controllers.

Some primitive components are OutputPanel, OutputText, OutputLink, Image, IncludeScript, StyleSheet, and iFrame.

5. Visualforce User Interface components:

These components are used to build, style, and structure the layout and behavior of Visualforce pages. They include everything from basic HTML-like elements to more complex Salesforce-specific components. Using these components, users can create, modify, and delete records.

In Visualforce, user interface components consist of four types.

ListView components – These components link the database object to a component and are equipped when the ‘Enable Enhanced Lists’ option is disabled for the organization.
EnhancedList components– This advanced version of Listview components has a drop-down list, columns, sortable columns, view names, and tables of records.
Related list components – These elements provide a list of child components. The related records can be edited, deleted, and created based on a user’s permissions.
Detail components – These components provide a subset of the user interface’s details page. Additionally, they provide inline editing features for an object.

6. Visualforce Custom components:

While working with the Visualforce page in Salesforce, we often need to apply a code block with several repetitions. Instead of repeating these code blocks repeatedly, we can create a Visualforce custom component. After creating a custom component, we can use it several times after encapsulating that code using the apex tags.

Custom Visualforce component definitions should be wrapped inside a single <apex: component> tag. We can also use the <apex: attribute> tag to modify the component so that a custom component can be used differently depending on the value of other attributes.

Below are the attributes that we use in the Visualforce custom components.

1. Access: This attribute specifies whether we can access this component outside any page in the same namespace using Public and Global values.

Syntax:

<apex:component access="global"></apex:component>

2. allow DML: This attribute is the boolean type used to include the DML permission in the component. If its value is true, then we can add DML within the component; otherwise, we can’t.

Syntax:

<apex:component allowDML="true"></apex:component>

3. Controller – This attribute refers to the controller created to control the logic of the custom component or the visualforce page.

<apex:component controller="controllerName"></apex:component>

4. extensions – This attribute defines one or more controller extensions to add additional logic to the custom component.

Syntax:

<apex:component extensions="controllerName1, controllerName2"></apex:component>

5. id: This attribute allows the custom component to be referenced by other tags in the component definition.

Syntax:

<apex:component id="compId"></apex:component>

6. language: This string-typed attribute specifies the base language used for the generated HTML output.

Syntax:

<apex:component language="en"></apex:component>

7. layout: This attribute defines the HTML layout style of the component, including values such as block, inline, and none.

Syntax:

<apex:component layout="block"></apex:comonent>

8. rendered: This boolean attribute specifies whether this component is rendered on the page. By default, its value is set to true.

Syntax:

<apex:component rendered="true"></apex:component>

Create a Custom Component in Visualforce

In the example below, we will create a custom Visualforce component that will display a list of account records and then add the custom component to the Visualforce page.

To create a custom component, navigate to the developer console and select File > New > Visualforce component.
After entering the label for the custom Visualforce component, then, enter the code below defining the custom component.

<apex:component>
    <apex:attribute name="accounts" type="Account[]" description="List of Account records to display" />
    
    <apex:pageBlock>
        <apex:pageBlockTable value="{!accounts}" var="account">
            <apex:column value="{!account.Name}" />
            <apex:column value="{!account.Id}" />
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:component>

How to create custom component in Visualforce

Now, follow the steps below to add or embed the visualforce component in the visualforce page.

<apex:page controller="CustomComponentController">
     <apex:form >  
        <apex:pageBlock title="Account Information">  
              
            <!-- command button for showing the accounts in the table-->  
            <apex:commandButton action="{!getAccounts}" value="Show Accounts"/>  
              
            <!-- Embeded Visualforce component-->  
            <c:displayrecords accounts="{!accounts}"></c:displayrecords>>  
        </apex:pageBlock>  
          
    </apex:form>  
</apex:page>

In the Visualforce page, we use the tag <c: (custom component name)>to embed the component in the visualforce page.

The tag <apex:page controller=”CustomComponentController”> is the controller we will define in the next step.

To control the logic of the visualforce page, like displaying the list of accounts, we will create a controller.

public class CustomComponentController {
    public List<Account> acclist {get; set;}

    public void getAccounts() {
        accList = [SELECT Id, Name FROM Account];
    }
}

Now, to view the Visual Force page in which we have embedded the custom visualforce component, navigate to Setup > Visualforce pages.

Then select the visualforce page in which we have added the custom component. In the setup of the visualforce page, click on the Preview button.

Embed custom component to Visualforce page in Salesforce

Now, we can see the button we added to call the custom component, so we will click on it to display the records.

As we click on the button, it will display a list of account records.

Add custom component to visualforce in Salesforce

This way, we can create and add a custom visualforce component to a visualforce page in Salesforce.

Conclusion

In this Salesforce tutorial, we have learned about the various types of components in Visualforce, their functionality, syntax, and practical application in creating dynamic, interactive, and reusable code blocks.

In addition to this, we also learned about the custom Visualforce components, and by following the above example, you can now create your own custom Visualforce components and integrate them into Visualforce pages, providing better functionality to the page and reusability of the code.