Visualforce Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Compile Visualforce Successfully
Creating Your First Page
Displaying Field Values with Visualforce
Using the Visualforce Component Library
Override an Existing Page with a Visualforce Page
Redirecting to a Standard Object List Page
Using Input Components in a Page
Adding and Customizing Input Field Labels
Setting the Tab Order for Fields in a Form
Adding Dependent Fields to a Page
Create Visualforce Dashboard Components
Displaying Related Lists for Custom Objects
Enabling Inline Editing
Converting a Page to a PDF File
Building a Table of Data in a Page
Editing a Table of Data in a Page
Using Query String Parameters in a Page
Use Ajax in a Page
Put Visualforce Pages on External Domains
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

Creating Your First Page

With development mode enabled, you can create your first Visualforce page by entering a URL for the page in your browser's address bar as follows:
https://MyDomain_login_URL/apex/myNewPageName

For example, if you want to create a page called “HelloWorld” and your Salesforce organization uses MyDomain_login_URL, enter http://MyDomain_login_URL/apex/HelloWorld.

Because the page does not yet exist, you are directed to an intermediary page from which you can create your new page. Click Create Page <myNewPageName> to create it automatically.

If you do not have Visualforce development mode enabled, you can also create a new page from Setup by entering Visualforce Pages in the Quick Find box, then selecting Visualforce Pages, and then clicking New.

Visualforce pages can always be edited from this part of setup, but to see the results of your edits you have to navigate to the URL of your page. For that reason, most developers prefer to work with development mode enabled so they can view and edit pages in a single window.

Note

A New Visualforce Page A new Visualforce page displayed above the Visualforce Page Editor

You now have a Visualforce page that includes default text. To edit your new page, click the Page Editor bar that appears at the bottom of the browser. It expands to show you the following Visualforce markup:

<apex:page>
    <!-- Begin Default Content REMOVE THIS -->
    <h1>Congratulations</h1>
    This is your new Apex Page: HelloWorld
    <!-- End Default Content REMOVE THIS -->
</apex:page>

This default markup includes the only required tag for any page— the <apex:page> tag that begins and ends any page markup. Embedded within the start and close <apex:page> tags is plain text, some of which is formatted with a standard HTML tag, <h1>.

As long as you keep the required <apex:page> tag you can add as much plain text or valid HTML to this page as you want. For example, after entering the following code and clicking Save in the Page Editor, the page displays the text “Hello World!” in bold:

<apex:page>
    <b>Hello World!</b>
</apex:page>

Pay attention to warnings—the Visualforce editor displays a warning if you save a page with HTML that does not include a matching end tag for every opened tag. Although the page saves, this malformed HTML might cause problems in your rendered page.

Tip