Get Started with Visualforce

Since Lightning Web Components is the preferred way to build UI with Salesforce, head over to the Migrate from Visualforce to Lightning Web Components trail to learn how to use LWC and comply with current web standards. Otherwise, continue with this badge to learn more about Visualforce.

Learning Objectives

After completing this unit, you’ll be able to:

Describe what Visualforce is and what it’s used for.
List three or more places where Visualforce can be used.

Introduction to Visualforce

Visualforce is a web development framework that enables developers to build sophisticated, custom user interfaces for mobile and desktop apps that can be hosted on the Lightning Platform. You can use Visualforce to build apps that align with the styling of Lightning Experience, as well as your own completely custom interface.

Visualforce enables developers to extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps. Use powerful built-in standard controller features, or write your own custom business logic in Apex. You can build functionality for your own organization, or create apps for sale in the AppExchange.

Visualforce app development is familiar to anyone who has built web apps. Developers create Visualforce pages by composing components, HTML, and optional styling elements. Visualforce can integrate with any standard web technology or JavaScript framework to allow for a more animated and rich user interface. Each page is accessible by a unique URL. When someone accesses a page the server performs any data processing required by the page, renders the page into HTML, and returns the results to the browser for display.

An Example Visualforce Page

Here’s a short example of a working Visualforce page.

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

This page displays a contact data entry form.

In just over a dozen lines of markup, this page does a lot.

It connects to the Visualforce standard controller, a part of the Visualforce framework that provides automatic data access and modification, standard actions, and more.
When accessed without a record ID, the page displays a blank data entry form. When you click Save, a new record is created from the form data.
When accessed with a record ID, the page looks up the data for that contact record and displays it in an editable form. When you click Save, your changes for the contact are saved back to the database.
Each input field is smart about how it presents its value.
- The email field knows what a valid email address looks like, and displays an error if an invalid email is entered.
- The date field displays a date widget when you click into the field to make entering a date easier.
The Save button calls the save action method, one of the standard actions provided by the standard controller.

Where You Can Use Visualforce

Salesforce provides a range of ways that you can use Visualforce within your organization. You can extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps.

The following are some of the ways you can add Visualforce to your organization. Remember that these screenshots are showing examples and don't reflect the custom pages and apps in your org.

Open a Visualforce Page from the App Launcher

Your Visualforce apps and custom tabs are all available from the App Launcher. To open the App Launcher, click

in the navigation bar. To see all of your apps and items, select View All.

Click a custom app (1) to activate it. Items in the app display in the navigation bar, including any Visualforce tabs you’ve added to the app. Note that you need to add your Visualforce pages to tabs for them to be accessible in the App Launcher. Visualforce tabs that aren’t in apps can be found in All Items (2).

As described in the preceding example, you can add Visualforce tabs to an app and they display as items in the app’s navigation bar.

Display a Visualforce Page within a Standard Page Layout

Extend your page layouts by embedding Visualforce pages on them to display completely custom content on a standard page. The behavior here is identical to Salesforce Classic, except you need to view the record’s Details to see the page layout.

Visualforce on a Lightning Experience page layout

Add a Visualforce Page as a Component in the Lightning App Builder

When you create a custom app page in the Lightning App Builder, you can add a Visualforce page to the page by using the Visualforce component.

Add a Visualforce page to a Lightning App Builder page

You must enable "Available for Lightning Experience, Lightning Communities, and the mobile app" for a Visualforce page to make it available in the Lightning App Builder.

Launch a Visualforce Page as a Quick Action

Although their placement in the Lightning Experience user interface is quite different from Salesforce Classic, the process of adding quick actions is much the same. Add them to the appropriate publisher area on the object’s page layout.

Display a Visualforce Page by Overriding Standard Buttons or Links

You can override the actions available on an object with a Visualforce page. When the user clicks a button or link that has been overridden, your page displays instead of the standard page. Setting this up is pretty much identical to Salesforce Classic. Indeed, you’ll have a hard time telling that you’re in Lightning Experience when defining an action override!

Override the Edit action on Contact object

Display a Visualforce Page Using Custom Buttons or Links

You can create new actions for your objects, in the form of buttons and links, by defining them on an object. JavaScript buttons and links aren’t supported in Lightning Experience, but Visualforce (and URL) items are. The process of defining Visualforce buttons and links is identical to that in Salesforce Classic, so we won’t bother to show it here.

Resources

Visualforce Developer’s Guide
Dreamforce Session: Introduction to Visualforce
Trailhead: Lightning App Builder
Trailhead: Use Visualforce in Lightning Experience