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. Give a jump start to your Cloud professional career by enrolling yourself in a comprehensive Online Salesforce Training, today!

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.

If you are just starting your career in Salesforce, consider going for a Salesforce Cloud Course to move your career on the right path.

Types of Visualforce components:

There are 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.

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: -

Check this comprehensive guide at How to Create Assignment Rules in Salesforce? [Updated in 2020]

Read: Top 7 Impactful Data Loaders Tools for Salesforce : Import & Export Data

• 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.

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.

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-

<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.

We recommend you to go through various Salesforce blogs available on the JanBask Training which may really increase your knowledge and answer your queries related to Salesforce.

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:

Read: A Comprehensive Salesforce Tutorial For Experienced & Beginners

<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

Check about the Salesforce –  Difference Between Microsoft Dynamics and Salesforce CRM.

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

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

 

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.

Take this 2-minute free Salesforce Quiz to check your Salesforce knowledge and stay updated with the latest updates and innovations in Salesforce.

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.

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.

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

Consider joining the JanBask Salesforce community which may keep you updated with the new trends of Salesforce.

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-

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

Read: How To Create a Custom Object TABS In Salesforce.Com?

Setting Preferences

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

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. A comprehensive Online Salesforce Training program provides an equal pathway into the tech industry for everyone. Along with that, these courses will up-skill you with globally-recognized credentials & transform your career to the next level.

Hope this tutorial has helped you in understanding Visualforce component and the real-time examples. Happy Learning!

FAQs

Q1. Is Salesforce good for your career? 

Ans- The Salesforce Developer skill set is one of the most sought-after occupations in the ecosystem and one of the greatest jobs in the world.

Q2. Can a non-I.T person do a Salesforce course?

Ans- We start the training from the basic level so that anyone can start even if he belongs to a non-IT background. So, it is not necessary to be from an IT background to join this course but a right zeal to learn Salesforce basics is enough to start a career with us right away.Our salesforce Beginner to Advanced courses sessions will start from the very basics, Salesforce history, how it was started and why it is necessary to learn, etc. 

Q3. Which is the best beginner Salesforce certification? 

Ans- The Salesforce Administrator certification is the ideal one to get as a novice. This will provide you a solid foundation for learning more about Salesforce, whether you want to focus on the developer side later or the customer-facing side now.

Q4.What fundamental skills are needed to learn Salesforce?

Ans- A Salesforce developer must first have schooling in software development in order to acquire the necessary abilities. A bachelor's degree is available in math, computer science, software engineering, and related subjects.

Q5. What help can I get in Salesforce certification?

Ans- Training curriculum of our online Salesforce Developer training course is prepared in a way that it has all the concepts of Salesforce Developer’s certification already inserted in it. A team of industry experts diligently sit and then develop our Salesforce developers training course syllabus after an aggressive market research on all the recent technology, exam patterns, Industry Requirements, etc.

Q6. What are the differences between learning Salesforce online and offline?

Ans- With the online Salesforce Certification courses, get the undivided attention of instructors and mentors 24*7. Connect anytime and from anywhere to resolve your queries.

• Be in control of your Salesforce career path with flexible training sessions and study anytime you want without compromising your work schedule.
• Earn lifetime access to top salesforce Beginner to Advanced courses tailor-made to suit the changing industry dynamics.
• Online Salesforce courses expose the student to learning using different LMSs (learning management systems), incorporate audio/video into assignments, participate in online training workshops and further enhance their technical skills.

Q8. How do I start preparing for the Salesforce interview? 

Ans- Start your preparation with these suggestions: Learn How To Shake Hands Online Assume, it's just another interview, Show Your Enthusiasm, Accept Feedback, Pose inquiries and Send notes of gratitude.

Q9. What skills will I learn from these courses?

Ans- From these courses, you will learn-

• Salesforce CRM and its features, Salesforce objects, field types, and validation rules
• Data modeling and management and Workflow automation
• Sales and service cloud configuration, Lightning components installation, complete Salesforce interface, Application deployment and Force.com platform change management and so much more.

Q10. What is the pattern of a Salesforce certification exam?

Ans- The Salesforce exam is a 90-minute long exam comprising 60 single or multiple-choice questions. The passing score for the exam is 65%.

Introduction

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. Give a jump start to your Cloud professional career by enrolling yourself in a comprehensive Online Salesforce Training, today!

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.

If you are just starting your career in Salesforce, consider going for a Salesforce Cloud Course to move your career on the right path

Types of Visualforce components:

There are 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. and  

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.

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

, ,
, 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: -

Check this comprehensive guide at How to Create Assignment Rules in Salesforce? [Updated in 2020]

• 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

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.

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.

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 tag. We can also use 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.

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 tag. We can also use 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

The above code is creating two attributes using 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 .

Visualforce code

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-

Congratulations
This is your new Component: mynewcomponent

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.

We recommend you to go through various Salesforce blogs available on the JanBask Training which may really increase your knowledge and answer your queries related to Salesforce.

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  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  > > <>><> > <> <> You are viewing the {!account.name} account.

The  Component

  class="img-responsive" data-src="" src="https://www.janbasktraining.com/blog/uploads/images/image_750x_5d35a3fa0dcd5.jpg" />

Check about the Salesforce –  Difference Between Microsoft Dynamics and Salesforce CRM.

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  component tag:

You are viewing the {!account.name} account.

The  Component Without Attributes

class="img-responsive" data-src="" src="https://www.janbasktraining.com/blog/uploads/images/image_750x_5d35a41ea3cb9.jpg" />

Without any specified attributes on the tag,  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:

You are viewing the {!account.name} account.

The   Component Without Related List or Title Elements

class="img-responsive" data-src="" src="https://www.janbasktraining.com/blog/uploads/images/image_750x_5d35a43ab4820.jpg" />

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.

Take this 2-minute free Salesforce Quiz to check your Salesforce knowledge and stay updated with the latest updates and innovations in Salesforce.

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.

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.

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

Consider joining the JanBask Salesforce community which may keep you updated with the new trends of Salesforce.

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-

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

Setting Preferences

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

FAQs

Q1. Is Salesforce good for your career? 

Ans- The Salesforce Developer skill set is one of the most sought-after occupations in the ecosystem and one of the greatest jobs in the world.

Q2. Can a non-I.T person do a Salesforce course?

Ans- We start the training from the basic level so that anyone can start even if he belongs to a non-IT background. So, it is not necessary to be from an IT background to join this course but a right zeal to learn Salesforce basics is enough to start a career with us right away.Our salesforce Beginner to Advanced courses sessions will start from the very basics, Salesforce history, how it was started and why it is necessary to learn, etc. 

Q3. Which is the best beginner Salesforce certification? 

Ans- The Salesforce Administrator certification is the ideal one to get as a novice. This will provide you a solid foundation for learning more about Salesforce, whether you want to focus on the developer side later or the customer-facing side now.

Q4.What fundamental skills are needed to learn Salesforce?

Ans- A Salesforce developer must first have schooling in software development in order to acquire the necessary abilities. A bachelor's degree is available in math, computer science, software engineering, and related subjects.

Q5. What help can I get in Salesforce certification?

Ans- Training curriculum of our online Salesforce Developer training course is prepared in a way that it has all the concepts of Salesforce Developer’s certification already inserted in it. A team of industry experts diligently sit and then develop our Salesforce developers training course syllabus after an aggressive market research on all the recent technology, exam patterns, Industry Requirements, etc.

Q6. What are the differences between learning Salesforce online and offline?

Ans- With the online Salesforce Certification courses, get the undivided attention of instructors and mentors 24*7. Connect anytime and from anywhere to resolve your queries.

• Be in control of your Salesforce career path with flexible training sessions and study anytime you want without compromising your work schedule.
• Earn lifetime access to top salesforce Beginner to Advanced courses tailor-made to suit the changing industry dynamics.
• Online Salesforce courses expose the student to learning using different LMSs (learning management systems), incorporate audio/video into assignments, participate in online training workshops and further enhance their technical skills.

Q8. How do I start preparing for the Salesforce interview? 

Ans- Start your preparation with these suggestions: Learn How To Shake Hands Online Assume, it's just another interview, Show Your Enthusiasm, Accept Feedback, Pose inquiries and Send notes of gratitude.

Q9. What skills will I learn from these courses?

Ans- From these courses, you will learn-

• Salesforce CRM and its features, Salesforce objects, field types, and validation rules
• Data modeling and management and Workflow automation
• Sales and service cloud configuration, Lightning components installation, complete Salesforce interface, Application deployment and Force.com platform change management and so much more.

Q10. What is the pattern of a Salesforce certification exam?

Ans- The Salesforce exam is a 90-minute long exam comprising 60 single or multiple-choice questions. The passing score for the exam is 65%.

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. A comprehensive Online Salesforce Training program provides an equal pathway into the tech industry for everyone. Along with that, these courses will up-skill you with globally-recognized credentials & transform your career to the next level.

Hope this tutorial has helped you in understanding Visualforce component and the real-time examples. Happy Learning!

FaceBook Twitter Google+ LinkedIn Pinterest Email