Visualforce in Salesforce: Complete Guide | SalesforceTutorial

Visualforce is a tag-based markup language that enables developers to build custom user interfaces within Salesforce. Using HTML-like syntax, Visualforce creates sophisticated, data-driven pages and applications that integrate seamlessly with Salesforce data and business logic.

This comprehensive guide covers everything about Visualforce in Salesforce, from basic concepts to advanced implementation patterns. Whether you’re building your first Visualforce page or implementing complex custom controllers, this tutorial provides the practical knowledge you need.

What is Visualforce in Salesforce?

Visualforce is a tag-based markup language similar to HTML that provides a UI framework for building dynamic applications on the Salesforce platform. Visualforce pages use a Model-View-Controller (MVC) architecture where the view layer consists of Visualforce markup and the controller layer handles business logic.

Key characteristics of Visualforce:

• Tag-based syntax with apex: prefixed components
• Server-side rendering with automatic data binding
• Integration with Apex controllers for business logic
• Support for standard web technologies (HTML, CSS, JavaScript)
• Built-in security and sharing rule enforcement

Visualforce Page Components and Elements

Every Visualforce page consists of two primary elements that work together to create functional user interfaces:

1. Visualforce Markup

Visualforce markup forms the presentation layer and includes:

• Visualforce tags – Components prefixed with apex: (e.g., <apex:page>, <apex:form>)
• Standard HTML – Regular HTML elements for structure and styling
• JavaScript and CSS – Client-side scripting and styling
• Expression language – Dynamic data binding using {!expression} syntax

2. Visualforce Controllers

Controllers provide the business logic and data manipulation capabilities. Salesforce supports three types of Visualforce controllers:

Standard Controllers

Standard controllers are automatically generated for every standard and custom object. They provide basic CRUD operations and standard page functionality.

<apex:page standardController="Contact">
    <apex:form>
        <apex:pageBlock title="Contact Details">
            <apex:pageBlockSection>
                <apex:inputField value="{!Contact.FirstName}"/>
                <apex:inputField value="{!Contact.LastName}"/>
                <apex:inputField value="{!Contact.Email}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons>
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Custom Controllers

Custom controllers are Apex classes that provide completely custom business logic and data handling. Use custom controllers when you need functionality beyond what standard controllers offer.

<apex:page controller="ContactCustomController">
    <apex:form>
        <apex:pageBlock title="Custom Contact Management">
            <apex:pageBlockTable value="{!contacts}" var="con">
                <apex:column value="{!con.Name}"/>
                <apex:column value="{!con.Email}"/>
                <apex:column value="{!con.Phone}"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Example custom controller class:

public class ContactCustomController {
    public List<Contact> contacts {get; set;}
    
    public ContactCustomController() {
        // Query contacts with proper SOQL limits
        contacts = [SELECT Id, Name, Email, Phone 
                   FROM Contact 
                   WHERE Email != null 
                   ORDER BY LastModifiedDate DESC 
                   LIMIT 50];
    }
    
    public PageReference refreshContacts() {
        // Refresh logic here
        return null;
    }
}

Controller Extensions

Extension controllers combine standard controller functionality with custom logic. They extend standard controllers while adding custom methods and properties.

<apex:page standardController="Contact" extensions="ContactExtension">
    <apex:form>
        <apex:pageBlock title="Extended Contact Form">
            <apex:pageBlockSection>
                <apex:inputField value="{!Contact.FirstName}"/>
                <apex:inputField value="{!Contact.LastName}"/>
                <apex:outputText value="{!customCalculation}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons>
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:commandButton value="Custom Action" action="{!customMethod}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Essential Visualforce Tags and Components

Visualforce provides numerous tags for building user interfaces. Here are the most commonly used Visualforce page tags:

Core Page Structure Tags

• <apex:page> – Defines the page and its properties
• <apex:form> – Creates forms for user input and data submission
• <apex:pageBlock> – Creates styled content sections
• <apex:pageBlockSection> – Organizes form fields in sections
• <apex:pageBlockTable> – Displays data in tabular format

Input and Output Tags

• <apex:inputField> – Automatic field rendering with validation
• <apex:outputField> – Read-only field display
• <apex:inputText> – Text input controls
• <apex:outputText> – Text display with formatting
• <apex:selectList> – Dropdown and multi-select lists

Action and Navigation Tags

• <apex:commandButton> – Buttons that trigger server actions
• <apex:commandLink> – Links that execute controller methods
• <apex:actionFunction> – JavaScript-callable server methods
• <apex:actionPoller> – Automatic page refresh functionality

Visualforce Page Development Best Practices

When developing Visualforce pages, follow these production-ready practices:

Performance Optimization

• View State Management – Keep view state under 135KB limit
• SOQL Efficiency – Use selective queries with indexed fields
• Lazy Loading – Implement pagination for large data sets
• Static Resources – Store CSS, JavaScript, and images as static resources

Security Considerations

• CRUD/FLS Enforcement – Respect field-level security in custom controllers
• Input Validation – Validate all user inputs server-side
• XSS Prevention – Use escape="false" carefully
• SOQL Injection – Parameterize dynamic SOQL queries

Governor Limits Awareness

• SOQL Queries – Maximum 100 queries per transaction
• DML Statements – Maximum 150 DML operations per transaction
• Heap Size – 6MB synchronous, 12MB asynchronous
• CPU Time – 10 seconds synchronous, 60 seconds asynchronous

Common Visualforce Use Cases

Visualforce pages serve multiple purposes within Salesforce applications:

Custom User Interfaces

• Complex data entry forms with custom validation
• Dashboard-style pages with multiple data sources
• Wizard-style multi-step processes
• Integration with external systems and APIs

Standard Functionality Override

• Custom detail pages replacing standard layouts
• Override standard buttons with custom logic
• Custom list views with advanced filtering
• Embedded components in page layouts

Mobile and Responsive Design

• Mobile-optimized interfaces using renderAs="pdf"
• Responsive layouts with CSS frameworks
• Touch-friendly controls and navigation

Visualforce Development Tools and Deployment

Salesforce provides multiple development environments for building Visualforce pages:

Development Options

• Developer Console – Built-in browser-based IDE
• VS Code with Salesforce Extensions – Modern development experience
• Salesforce CLI – Command-line development and deployment
• Setup Menu – Direct page creation in Salesforce UI

Deployment Methods

• Change Sets – Standard Salesforce deployment tool
• Salesforce CLI – Modern deployment with source control
• ANT Migration Tool – Legacy deployment option
• Third-party Tools – Gearset, Copado, AutoRABIT

Visualforce vs Lightning Experience

While Lightning Experience and Lightning Web Components represent Salesforce’s modern development platform, Visualforce remains relevant for specific use cases:

When to Use Visualforce

• Complex PDF generation requirements
• Legacy system integrations
• Highly customized user interfaces
• Server-side rendering requirements

Migration Considerations

• Lightning Experience compatibility testing
• Mobile responsiveness updates
• Performance optimization for modern browsers
• Gradual migration to Lightning Web Components

Advanced Visualforce Techniques

AJAX and Partial Page Updates

Implement dynamic user experiences using Visualforce AJAX capabilities:

<apex:page controller="AjaxController">
    <apex:form>
        <apex:actionFunction name="updateData" 
                           action="{!updateMethod}" 
                           reRender="dataPanel"/>
        
        <apex:outputPanel id="dataPanel">
            <apex:pageBlockTable value="{!records}" var="rec">
                <apex:column value="{!rec.Name}"/>
            </apex:pageBlockTable>
        </apex:outputPanel>
        
        <script>
            function refreshData() {
                updateData();
            }
        </script>
    </apex:form>
</apex:page>

Error Handling and User Feedback

Implement robust error handling in Visualforce pages:

<apex:page controller="ErrorHandlingController">
    <apex:form>
        <apex:pageMessages/>
        
        <apex:pageBlock title="Data Entry">
            <apex:pageBlockButtons>
                <apex:commandButton value="Save" action="{!saveRecord}"/>
            </apex:pageBlockButtons>
            
            <apex:pageBlockSection>
                <apex:inputField value="{!record.Name}" required="true"/>
                <apex:inputField value="{!record.Email__c}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Visualforce Tutorial Resources

Expand your Visualforce knowledge with these comprehensive tutorials:

• Visualforce Guide: Understanding Visualforce Controllers
• Comprehensive Visualforce Tutorial
• List of Visualforce Components and Tags
• How to Create Your First Visualforce Page
• Standard Controllers in Salesforce

Frequently Asked Questions