Visualforce Tutorials - Learn Salesforce Visualforce page Coding

Visualforce Tutorials – Learn Salesforce Visualforce Page Coding

Visualforce is Salesforce’s tag-based framework for building custom user interfaces on the Lightning Platform. A Visualforce page uses XML-like markup, can include HTML, CSS, and JavaScript, and can use Apex controllers for server-side logic and Salesforce record operations.

This Visualforce tutorial covers the basics a beginner needs before writing Salesforce Visualforce page code: page structure, standard components, custom components, standard controllers, custom controllers, controller extensions, and when to compare Visualforce with Lightning Web Components.

What Salesforce Visualforce is used for

Visualforce is the Markup Language (Tag based language) similar to HTML and XML which was developed by Salesforce.com. It contains tags and controllers where tags are also called as Components. Visualforce uses XML like syntax to create front end design pages and it uses APEX as the backend to implement business logic.

Visualforce is still found in many Salesforce orgs, especially for existing custom pages, older Salesforce Classic pages, page overrides, email-template related work, and PDF-style output. For a new Lightning Experience user interface, it is usually better to evaluate Lightning Web Components first and use Visualforce when the page-based model is the better fit.

Basic Visualforce page structure in Salesforce

A Visualforce page starts with the <apex:page> tag. Inside it, you add standard Visualforce components such as <apex:form>, <apex:pageBlock>, <apex:outputField>, and <apex:commandButton>. If the page works with Salesforce data, connect it to a standard controller, custom controller, or controller extension.

</>

Copy

<apex:page>
    <h1>Hello Visualforce</h1>
    <p>This is a simple Visualforce page.</p>
</apex:page>

Visualforce pages have some unique components that make them easy to create feature rich user interfaces for Force.com. They use standard web technologies such as HTML, JavaScript, and CSS. Pages are composed on the server and not the client. In this Visualforce developer tutorial, we have to understand about Components and Controllers.

How to create a Visualforce page in Salesforce

To create a Visualforce page from Salesforce Setup, search for Visualforce Pages in Quick Find, click New, enter the page label and name, add the markup, and save the page. You can also create a page from Developer Console when your org permissions allow it.

Open Salesforce Setup.
Search for Visualforce Pages in Quick Find.
Click New.
Enter the label, name, and description.
Write the Visualforce markup.
Save the page and use Preview to test it.

For official examples while practicing, refer to the Salesforce Visualforce Developer Guide quick start and Trailhead Visualforce Fundamentals.

Visualforce components and Apex tags

Visualforce components are reusable page elements. Salesforce provides standard components in the apex: namespace, and developers can create custom components in the c: namespace.

Standard Visualforce components with apex tags

Standard Visualforce components help you build Salesforce-style pages without writing every HTML element manually. Common examples include <apex:page>, <apex:form>, <apex:pageBlock>, <apex:pageBlockSection>, and <apex:commandButton>.

</>

Copy

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="Account Details">
            <apex:pageBlockSection>
                <apex:outputField value="{!Account.Name}" />
                <apex:outputField value="{!Account.Phone}" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Custom Visualforce components with c namespace tags

Custom Visualforce components are created by developers when the same UI block or behavior must be reused across pages. They start with the c: namespace, for example <c:CustomerSummary>.

Visualforce controllers in Salesforce page development

A Visualforce controller defines what happens when a user opens a page, submits a form, clicks a button, or performs another page action. Salesforce Visualforce supports standard controllers, custom controllers, and controller extensions.

Standard controllers for Salesforce objects

A standard controller gives a Visualforce page built-in record behavior for a standard or custom object. It is a good starting point when a page works with one record and needs normal actions such as view, edit, save, or delete.

We can use Standard controllers for custom objects and Standard objects.
They provide standard functionality like save, delete and create records.
Some standard object don’t have standard controllers.

</>

Copy

<apex:page standardController="Media__c">

Custom controllers for Visualforce business logic

A custom controller is an Apex class that implements the logic for a Visualforce page without relying on a standard controller. Use a custom controller for wizards, custom queries, calculations, multi-record pages, and page flows that do not match normal single-record behavior.

</>

Copy

public with sharing class AccountListController {
    public List<Account> accounts { get; private set; }

    public AccountListController() {
        accounts = [SELECT Id, Name, Phone FROM Account LIMIT 10];
    }
}

</>

Copy

<apex:page controller="AccountListController">
    <apex:pageBlock title="Accounts">
        <apex:pageBlockTable value="{!accounts}" var="acc">
            <apex:column value="{!acc.Name}" />
            <apex:column value="{!acc.Phone}" />
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>

</>

Copy

<apex: page controller="CustomApexClass">

Custom Apex Class is an Apex class that controls the Visualforce Actions and Variables.

Controller extensions for adding Visualforce behavior

A controller extension is an Apex class that adds behavior to a standard controller or custom controller. It is useful when you want to keep standard record behavior and add custom methods for the page.

This controller can override existing standard links and a button.

</>

Copy

 <apex: page standardController="Media__c"
       extensions="CustomApexClass, SecondCustomApexClass">

CustomApexClass, SecondCustomApexClass are Apex classes and we can add multiple extension on a Vf page using a comma separated value.

Visualforce versus Lightning Web Components in Salesforce

Visualforce and Lightning Web Components both build Salesforce user interfaces, but they solve UI problems differently. Visualforce is page-centered and mostly server-rendered. LWC is component-centered and uses modern web standards for Lightning Experience. For new interactive Lightning UI, evaluate LWC first. For existing Visualforce pages, PDF-style output, page overrides, or orgs with established Visualforce controller logic, Visualforce can still be the practical choice.

Area	Visualforce page	Lightning Web Component
Structure	Full page with Visualforce markup	Reusable UI component
Rendering	Mostly server-side	Client-side component model
Server logic	Apex controllers and extensions	Apex methods when server data is needed
Common fit	Existing pages, PDF output, page overrides	New Lightning Experience UI components

Salesforce coding languages connected with Visualforce

Visualforce itself uses XML-like markup. Apex is used for controller logic. SOQL and SOSL are used for querying Salesforce data from Apex. HTML, CSS, and JavaScript can be included where standard web behavior is needed.

Visualforce markup: defines the page and Visualforce components.
Apex: handles custom controller and extension logic.
SOQL: retrieves Salesforce records in Apex.
HTML, CSS, and JavaScript: support standard web layout and behavior.

Visualforce tutorial path for beginners

Create a simple <apex:page> and preview it.
Add form and display components such as <apex:form>, <apex:pageBlock>, and <apex:outputField>.
Use a standard controller for a single Salesforce record.
Add a custom controller when the page needs custom logic.
Add a controller extension when standard behavior must be extended.
Compare the requirement with LWC before building a new Lightning-first UI.

Visualforce tutorials and component lessons

Visualforce page coding FAQ

Is Visualforce still used in Salesforce?

Yes. Visualforce is still used in Salesforce orgs, especially for existing custom pages, older page overrides, PDF-style pages, and applications that already depend on Visualforce controllers.

How do I create a Visualforce page in Salesforce?

Open Setup, search for Visualforce Pages, click New, enter the page details, write the markup, and save the page. Developer Console can also be used when it is available in the org.

What coding language is used in a Visualforce page?

A Visualforce page uses XML-like Visualforce markup. Apex is used for controller logic, and HTML, CSS, and JavaScript can be included for web page behavior.

What is the difference between LWC and a Visualforce page?

Visualforce is a page-based framework that is mostly server-rendered. LWC is a modern component framework for Lightning Experience and is generally preferred for new interactive Lightning UI work.

Do Visualforce pages always need an Apex controller?

No. A simple Visualforce page can work without a custom Apex controller. Use a standard controller for normal record actions and a custom controller or extension when the page needs custom logic.

Visualforce tutorial editorial QA checklist

Check that each new Visualforce example uses correct apex: tag syntax.
Confirm that the page explains standard controllers, custom controllers, and controller extensions separately.
Keep the Visualforce versus LWC guidance balanced for current Salesforce development.
Verify that official Salesforce documentation and Trailhead references are current before publishing major updates.
Review every internal Visualforce tutorial link in the learning path.

TutorialKart.com

Visualforce Tutorials – Learn Salesforce Visualforce page Coding