Today's Offer - Salesforce Certification Training - Enroll at Flat 10% Off.

- Salesforce Blogs -

VisualForce Component: Type of VisualForce Component in Salesforce

Visualforce is a tag-based markup language similar to Hypertext Markup Language (HTML). It has a user interface framework for building various attractive and dynamic applications. In this blog, we are going to discuss Visualforce components, its types, and its uses.

If you want to use Visualforce in Salesforce, then you have to learn HTML tags first. With the use of HTML tags and Salesforce Object Query Language (SOQL), we can create Visualforce webpages. As a developer, if you want to deploy or test other technologies in Visualforce, then you can do so in the practice of creating Visualforce pages that support development technologies like jQuery, Javascript, CSS, HTML, Flash, Ajax, etc.

salesforce Curriculum

Visualforce Components Limits:

Before proceeding forward to Visualforce components, we must be aware of the default limit of its components and pages.

Limit Value
The maximum length of a Visualforce page name (the text in the URL that uniquely identifies the Visualforce page)

40 characters

Page names can’t be longer than 40 characters.

 

The maximum length for the source code of a Visualforce page (the source code, not the rendered response)

1 MB of text

A single page can hold up to 1 MB of text, or approximately 1,000,000 characters.

The maximum length for the source code of a Visualforce component (the source code)

1 MB of text

A single component can hold up to 1 MB of text, or approximately 1,000,000 characters.

The maximum width of a Visualforce page displayed on a profile tab

750 pixels

A single page displayed on a profile tab can’t be wider than 750 pixels.

Types of Visualforce components:

There are types of Visualforce components: - 

Types of Visualforce components

Visualforce Action components

Action components in the Visualforce page are used to invoke methods on the controller. These are also used to update view state. With the use of Action components, we can refresh the Visualforce page and navigate to a new page.

While working with Action components, two things are observed: -

  • Command button : It is used to insert HTML buttons.
  • Command link: It is used to insert anchor text links. 

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

Visualforce Styled components

When we create a Visualforce page, it is required to inherit properties of Force.com native user interface, for this purpose Force.com styled-components are used. Using these components, CSS Visualforce files can be created. For example, when you create a web application using Javascript or JQuery, you need to include ‘min.js’ file in your Javascript folder so that your Javascript components do not suffer or misbehave.

Read: Difference Between Salesforce and Servicenow

Visualforce Styled components

Visualforce Styled components are categorized into five sub-categories: -

  • Page Structure: In page Structure, we have four structural elements in Force.com. These are: SectionHeader, PageBlockSection, PageBlock, and These elements provide a clear organizational structure, sections, subsections, labels, and fields.
  • Action Containers: PageBlockButtons, toolbar, and toolbar group are the key components based on ActionContainers. It provides buttons, links, and different action functions to Visualforce pages.
  • Table: Here, PageBlockTable is the element which is used to insert rows and columns.
  • Pagination Components: PanelBar, PanelBarItem, tab, and tabPanel are the components based on PaginationComponents. These are used to show or hide content, buttons, and links dynamically.
  • Notifications: PageMessage is the element used to show error messages.

Visualforce Data components

Data components in Visualforce enables VF page to move data into controller and it is also used to extract data from controller by using various standard HTML elements. It makes use of HTML elements (tags) like <p> </p>, <a>, <br>, etc.

Data components basically manipulate fields and records of the Force.com database within Visualforce page. Data components are sub-divided into three main categories: -

Visualforce Data components

  • Metadata-Aware components: These elements are valid when the fields and records are bounded with the database object. These components make use of the definition of the database object to determine the appearance of the page. Two elements are used here: InputField and OutputField.
  • Primitive data components: These elements add the functionality of the Visualforce to standard HTML tags. This type of elements must be inserted inside a FORM tag.
  • Various primitive data components are: OutputLabel, InputCheckbox, InputFile, InputHidden, InputSecret, InputText, InputTextArea, SelectList, SelectRadio, SelectCheckBox, etc.
  • Repeating components: These elements provide the body to every child in the collection. The available elements are - DataList, DataTable, and Repeat.

Visualforce Primitive components

Primitive components are used to connect standard HTML and Visualforce functions. These components add Visualforce functionality to HTML elements. Some of the primitive elements are: - OutputPanel, OutputText, OutputLink, Image, IncludeScript, StyleSheet, and iFrame.

salesforce quiz

Visualforce User Interface components

Force.com user interface components are used to inherit both the appearance of native user interface and its behavior. Using these components, we can create, modify, and delete records.

Interface components

Force.com User Interface components are of four types: -

  • ListView components: These elements bind the database object to a component and are furnished only when ‘Enable Enhanced Lists’ option is disabled for the organization.
  • EnhancedList components: This is an advanced version for ListView components. These elements have a drop-down list, columns, sortable columns, view names, and tables of records.
  • RelatedList components: These elements furnish a list of child components. Based upon the permissions of a user, the related records can be edited, deleted, and created. It supports both Detail and Lookup relationships.
  • Detail components: These elements provide a subset to the user interface’s detail page for an object. It also provides inline editing feature for an object.

Visualforce Custom components

In Salesforce projects, there are numerous times when 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. Ideally, Visualforce Custom component is when you reuse the piece of code inside your Apex tags. When you encapsulate that code, then only you can reuse it for n-number of times.

Custom Visualforce component definitions must be wrapped inside a single <apex: component> tag. We can also use <apex: attribute> tag to customize the component so that a custom component can be used in different ways depending upon the value of different attributes.

In the following example, we will learn how to create a basic custom component.

Component Code


<apex:component >
<apex:attribute name="textValue" description="This is the value for the component" type="String" required="true"/>
<apex:attribute name="textColor" description="This is color for the border." type="String" required="true"/>
<apex:outputText value="{!textValue}" style="color:{!textColor};"/>
</apex:component>

The above code is creating two attributes using <apex: attribute> tag. The first attribute is deciding what text should be displayed, and the second attribute is deciding the color of the text. We can use any number of attributes in the component. The component can also have a controller which helps in the more customizable component.

Now we need to use this component. We can use component in visualforce page using <c:componentName>.

Visualforce code


<apex:page tabStyle="Account">
<apex:pageBlock >
<apex:pageBlockSection title="myComponent Test" collapsible="false">
<c:myComponent textValue="This Text is blue" textColor="blue" />
<c:myComponent textValue="But this is red" textColor="red" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

Defining Visualforce Custom Components

These options are available in Salesforce Classic and Salesforce Lightning Experience. You can locate these options in- Contact Manager, Group, Professional, Enterprise, Performance, Unlimited, and Developer Editions.

To apply these options, you need user permissions to customize the application, which includes- to create custom components.

To manually create a Visualforce custom component, you need to perform the following steps:

  1. In Setup, enter Components in the Quick Find box, then select Visualforce Components.
  2. Click New.
  3. In the Label text box, enter the text that should be used to identify the custom component in Setup tools.
  4. In the Name text box, enter the text that should identify this custom component in Visualforce markup. This name can contain only underscores, and alphanumeric characters and must be unique in your org. It must begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores.
  5. In the Description text box, enter a text description of the custom component. This description appears in the component reference with other standard component descriptions as soon as you click Save.
  6. In the Body text box, enter Visualforce markup for the custom component definition. A single component can hold up to 1 MB of text, or approximately 1,000,000 characters.
  7. Click Version Settings to specify the version of Visualforce and the API used with this component. You can also specify versions for any managed packages installed in your organization.
  8. 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.

The code will be-

Read: Salesforce Admin Interview Questions and Answers

<apex:component>
<apex:attribute name="myattribute" type="String" description="TODO: Describe me"/>
<!-- Begin Default Content REMOVE THIS -->
<h1>Congratulations</h1>
This is your new Component: mynewcomponent
<!-- End Default Content REMOVE THIS -->
</apex:component>

Viewing and Editing Visualforce Custom Components

These options are available in Salesforce Classic and Salesforce Lightning Experience. You can locate these options in- Contact Manager, Group, Professional, Enterprise, Performance, Unlimited, and Developer Editions.

To apply these options, you need user permissions to customize the application which includes- to clone, edit, delete, or set versions for 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.

From the detail page, you can do any of the following:

  • Click Editto edit the custom component.
  • Click Deleteto delete the custom component.
  • Click Cloneto create a copy of the custom component. You must specify a new name for the new component.
  • Click Where is this used?To view a list of all references to the custom component in your organization.
  • Click Show Dependenciesto display the items, such as another component, permission, or preference that must exist for this custom component to be valid.

Once your component has been created, you can view it athttp://mySalesforceInstance/apexcomponent/nameOfNewComponent, where the value of mySalesforceInstance is the host name of your Salesforce instance (for example, na3.salesforce.com) and the value of nameOfNewComponent is the value of the Name field on the custom component definition.

The component is displayed as if it’s a Visualforce page. Consequently, if your component relies on attributes or on the content of the component tag’s body, this URL may generate results that you don’t expect. To more accurately test a custom component, add it to a Visualforce page and then view the page.

Managing Visualforce Custom Components

These options are also available in Salesforce Classic and Salesforce Lightning Experience. You can locate these options in- Contact Manager, Group, Professional, Enterprise, Performance, Unlimited, and Developer Editions.

To apply these options, you need user permissions to customize the application, which includes- to create and edit 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. From this page, you can:

  • Click New to define a new custom component
  • Click a custom component name to display detailed information about the component
  • Click Edit to modify a component's name or markup
  • Click Del to remove a custom component from your organization

Using Visualforce Component Library

The <apex: page> tag that must be placed at the start and end of all Visualforce markup. However, you can insert images or tables into an HTML document with the <img> or <table> tags, respectively. You can add user interface components to your Visualforce pages using tags that are defined in the Visualforce component library.

For example, to add a component that looks like a section on a detail page, use the <apex:pageBlock> component tag:


<apex:page standardController="Account">
<apex:pageBlock title="Hello {!$User.FirstName}!">
You are viewing the {!account.name} account.
</apex:pageBlock>
</apex:page>

The <apex:pageBlock> Component

The <apex:pageBlock> Component

Tags also exist for other common Salesforce interface components, such as related lists, detail pages, and input fields. For example, to add the content of a detail page, use the <apex:detail> component tag:


<apex:page standardController="Account">
<apex:pageBlock title="Hello {!$User.FirstName}!">
You are viewing the {!account.name} account.
</apex:pageBlock>
<apex:detail/>
</apex:page>

The <apex:detail> Component Without Attributes

The <apex:detail> Component Without Attributes

Without any specified attributes on the tag, <apex:detail> displays the complete detail view for the context record. If you want to modify properties such as which record details are displayed, or whether related lists or the title appear, you can use attributes on the tag. For example, the following markup displays the details of the context account's owner, without related lists or a colored title bar:


<apex:page standardController="Account">
<apex:pageBlock title="Hello {!$User.FirstName}!">
You are viewing the {!account.name} account.
</apex:pageBlock>
<apex:detail subject="{!account.ownerId}" relatedList="false" title="false"/>
</apex:page>

The <apex:detail>  Component Without Related List or Title Elements

The <apex:detail> Component Without Related List or Title Elements

Read: How to Get Certified as a Salesforce Professional and Verify the Certification

 

If a component is updated or edited, the Visualforce page that references it is also updated.

To browse the component library, click Component Reference in the Page Editor. From this page, you can drill down into any component to see the attributes that are available for each, including any custom components that you define.

Creating a Visualforce Page

Visualforce pages are the webpages that belong to Salesforce. These pages are created using a text-based mark-up language which is similar to HTML, but its primary use is to access, update, and display the data of an organization. The page is accessed by using URL which is similar to a traditional webserver page.

free salesforce demo

To create a Visualforce page, follow the steps: -

Go to the link developer console → File → New → Visualforce page. The new window opens, asking for a page name. For now, we’ll call it HelloworldPage.

Creating a Visualforce Page

Click Save. Then, click on Preview. This opens a new webpage showing the result as shown in the following screenshot.

Creating a Visualforce Page

Adding components

In this section, we will learn how to add components to a program that is already created. Let us add some user interface components to the program created above. We add a block and a section in that block by using the following code-

Creating a Visualforce Page

On the preview of the page, we’ll get the following output.

Creating a Visualforce Page

Setting Preferences

We can set the various settings for easy navigation by going to Help → Preferences.

Creating a Visualforce Page

Conclusion

Let us summarize what we have learned in this blog:

  • Visualforce is a framework
  • Visualforce page is an interface
  • Apex is the code written on it
  • Combination of the above three facts is Salesforce

Salesforce introduced Visualforce to provide the next-generation building urbane solution to create a custom user interface on the Lightning platform. Hope this tutorial has helped you in understanding Visualforce component and the real-time examples. Happy Learning!

Read: Apex:Actionfunction In The Salesforce VisualForce Page

    Janbask Training

    JanBask Training is a leading Global Online Training Provider through Live Sessions. The Live classes provide a blended approach of hands on experience along with theoretical knowledge which is driven by certified professionals.


Trending Courses

AWS

  • AWS & Fundamentals of Linux
  • Amazon Simple Storage Service
  • Elastic Compute Cloud
  • Databases Overview & Amazon Route 53

Upcoming Class

2 days 14 Nov 2019

DevOps

  • Intro to DevOps
  • GIT and Maven
  • Jenkins & Ansible
  • Docker and Cloud Computing

Upcoming Class

3 days 15 Nov 2019

Data Science

  • Data Science Introduction
  • Hadoop and Spark Overview
  • Python & Intro to R Programming
  • Machine Learning

Upcoming Class

3 days 15 Nov 2019

Hadoop

  • Architecture, HDFS & MapReduce
  • Unix Shell & Apache Pig Installation
  • HIVE Installation & User-Defined Functions
  • SQOOP & Hbase Installation

Upcoming Class

4 days 16 Nov 2019

Salesforce

  • Salesforce Configuration Introduction
  • Security & Automation Process
  • Sales & Service Cloud
  • Apex Programming, SOQL & SOSL

Upcoming Class

2 days 14 Nov 2019

QA

  • Introduction and Software Testing
  • Software Test Life Cycle
  • Automation Testing and API Testing
  • Selenium framework development using Testing

Upcoming Class

-0 day 12 Nov 2019

Business Analyst

  • BA & Stakeholders Overview
  • BPMN, Requirement Elicitation
  • BA Tools & Design Documents
  • Enterprise Analysis, Agile & Scrum

Upcoming Class

3 days 15 Nov 2019

SQL Server

  • Introduction & Database Query
  • Programming, Indexes & System Functions
  • SSIS Package Development Procedures
  • SSRS Report Design

Upcoming Class

7 days 19 Nov 2019

Comments

Search Posts

Reset

Receive Latest Materials and Offers on Salesforce Course

Interviews