View Component Basics :In our previous Salesforce Tutorial we have learned about Different Visualforce Controller. In this CRM Salesforce Training Tutorial we are going to learn about View Component Basics like what are the important areas to understand in View Components.

As already we have learned that view components are the the type of components which works with controllers to define appearance and behaviour of a Visualforce User interface. View Components are embedded with Visualforce page using XML markup.

view component basics

View Component Basics

To understand clearly about view components in visualforce we have to learn about three topics. They are

  • View Component Syntax.
  • Page Definition.
  • Component Visibility.

View Component Syntax

View Components consists of three parts they are

  • Component Name.
  • Attributes.
  • Component Body.

To understand clearly about view component syntax let us see an example.

<apex:dataList value=”{!resources}” var=”resource”>
<b>{!resources.Name}</br>
</apex:datalist>

Component Name :- From above code the name of the Component is named as tag name datalist. Datalist renders an HTML list with series of Li tags with a UL tags.

Attributes:- Every component has it’s own supported attributes. Attributes are the set of static name or expressions. From above example Var is the attribute which specifies a variable name to access each element of the collection.

Component Body :- The text between starting tag and ending tag is named as the component body.

Page Definition.

Page Definition is nothing but defining PAGE component in the beginning  of Visualforce page. When page component is defined in visualforce page is connects with controller and also it overrides the appearance of the page. Page component requires standard or custom controllers.

Controlling Component Visibility

We can control the visibility of the components in visualforce page by defining the component Boolean value as false. CSS and Java scripts can be controlled in visualforce page. Ex: Display : none