Visualforce Pages

Visualforce Pages in Salesforce | The Developer Guide

Visualforce Page In Salesforce

Visualforce Page is just like HTML, i.e, It is a tag-based markup language. It allows developers to build sophisticated, user-custom interfaces. It has some user interface components such as a section of a page, a related list, or a field.

It consists of two primary elements :

  • Visualforce markup
  • Visualforce controller

Where can we use this Visualforce Page?

  • Override Standard buttons, Tab overview pages
  • Define Custom Tabs
  • Create a dashboard component and other more things we can do with this Visualforce Page.

Simple Examples of Visualforce Page:

<apex:page>
<h1>Welcome Visualforce Page</h1>
</apex:page>

dont miss out iconDon't forget to check out: Get Selected Records from ListView in Visualforce Page | GETRECORDIDS JavaScript | StandardSetController Salesforce

What is a Controller?

A Controller is an apex class that is used to implement all the logic of a Visualforce page without holding/supporting the standard functionality.

In Visualforce, we have two types of controller:

  • Standard Controller
  • Custom Controller

Standard Controller:

A standard controller is a class that inherits all the standard properties of objects and the functionality of standard buttons. It also provides common operations such as CRUD (Create/ Read/ Update/ Delete) on any Standard or Custom object. E.g.

<apex:page standardController=”Account”>
</apex:page>

Example of Standard Controller:

<apex:page standardController="Account">
  <apex:form>
    <apex:pageBlock title="My Content" mode="edit">
      <apex:pageBlockButtons>
        <apex:commandButton action="{!save}" value="Save"/>
      </apex:pageBlockButtons>
      <apex:pageBlockSection title="My Content Section" columns="2">
        <apex:inputField value="{!account.name}"/>
        <apex:inputField value="{!account.site}"/>
        <apex:inputField value="{!account.type}"/>
        <apex:inputField value="{!account.accountNumber}"/>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

Custom Controller:

A custom controller is an Apex class that applies all the logic for a page without holding a standard controller. E.g,

<apex:page Controller=”myController”>
</apex:page>

Building Standard List Controller

It is just similar to a standard controller that can display a set of records.

Example of Standard List Controller:

<apex:page standardController="Account" recordSetVar="accounts" tabstyle="account" sidebar="false">
  <apex:pageBlock>
    <apex:pageBlockTable value="{!accounts}" var="acc">
      <apex:column value="{!acc.name}"/>
    </apex:pageBlockTable>
  </apex:pageBlock>
</apex:page>

dont miss out iconCheck out an amazing Salesforce Video Tutorial here: Creating Multi Screen Wizard Using Apex and Visualforce Salesforce

Building Custom List Controller

 It is just similar to a standard list controller that displays a set of records.

<apex:page controller="ContactsListWithController">
    <apex:form>
        <apex:pageBlock title="Contacts List" id="contacts_list">
<apex:pageBlockTable value="{! contacts }" var="ct">
     <apex:column value="{! ct.FirstName }"/>
     <apex:column value="{! ct.LastName }"/>
     <apex:column value="{! ct.Title }"/>
     <apex:column value="{! ct.Email }"/>
</apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
private String sortOrder = 'LastName';
public List<Contact> getContacts() {
    List<Contact> results = Database.query(
        'SELECT Id, FirstName, LastName, Title, Email ' +
        'FROM Contact ' +
        'ORDER BY ' + sortOrder + ' ASC ' +
        'LIMIT 10'
    );
    return results;
}

 

Responses

Popular Salesforce Blogs