VisualForce components are small, reusable features such as widgets, panels, UIs, and more that you use in VisualForce page markup. You can use standard VisualForce components and create your own custom components.
You can read more about VisualForce components here to obtain an overview of VisualForce components and what are some default limitations of VisualForce components and pages.
In Salesforce projects, there are few conditions where a developer has to repeat the same code again and again. So, instead of repeating the same code, we can create a VisualForce custom component. Basically, the VisualForce Custom component comes into play when you reuse the piece of code inside your Apex tags.
In this blog post, we will discuss how to create, edit, and manage VisualForce custom components.
Creating a VisualForce custom component
To create a VisualForce custom component manually, you need to perform the following steps:
Step 1: In Salesforce Setup, enter components in the Quick Find box, then select the VisualForce components.
Step 2: Click New.
Step 3: In the Label text box, enter the text that will be used to identify specific components in the Setup tools.
Step 4: In the Name text box, enter the text that identifies this specific component in the VisualForce markup. This name must contain only underscores and alphanumeric characters and must be unique to your org. It must start with a letter without spaces, it must not end with an underscore, and should not contain two underscores.
Step 5: In the Description text box, enter the text description for the custom component. This description is displayed in the component reference along with other standard component descriptions as you click Save.In the body text box, enter VisualForce Markup for custom component definition. A single component can contain up to 1MB of text or around 1,000,000 characters.
Step 6: Click Version Settings to determine the version of VisualForce and the API used with this component. You can also specify versions for all managed packages that are installed in your organization.
Step 7: Click Save to save your changes and view the custom Component’s Detail screen, or click Quick Save to save your changes and continue editing your component. Your VisualForce Markup must be valid before you can save your component.
Viewing and Editing VisualForce Custom Components
From Setup, enter Components in the Quick Find box, then select VisualForce Components and click the name of a custom component to view its definition.
You can do the following on the detailed page:
Step 1: Click Edit to edit the custom component.
Step 2: Click Delete to delete the custom component.
Step 3: Click Clone to create a copy of the custom component. You must specify a new name for the new component.
Step 4: Click Where is this used? To view a list of all references to the custom component in your organization.
Step 5: Click Show Dependencies to view the items, such as another component, permission, or preference that must exist for this custom component to be valid.
Managing VisualForce Custom Components
After creating custom components, you can view, edit, and delete them.
From Setup, enter Components in the Quick Find box, then select VisualForce Components to display the Components list page, which shows the list of custom components defined for your organization.
You can do the following on the displayed page:
Step 1: Click New to define a new custom component.
Step 2: Click a custom component name to display detailed information about the component.
Step 3: Click Edit to modify a component’s name or markup.
Step 4: Click Del to remove a custom component from your organization.
Salesforce introduced VisualForce, a component-based user interface (UI) framework, to provide the next-generation building sophisticated solution for creating dynamic and reusable user interfaces for the Salesforce Lightning platform. VisualForce is a tag-based markup language similar to Hypertext Markup Language (HTML). It has a UI framework for creating various engaging, user-friendly, and dynamic applications.