Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Compiling Visualforce Successfully
Creating Your First Page
Displaying Field Values with Visualforce
Using the Visualforce Component Library
Overriding 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
Creating 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
Using Ajax in a Page
Putting Visualforce Pages on External Domains
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Live Controller (Pilot)
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating 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
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Overriding an Existing Page with a Visualforce Page

Suppose you want to change the format of an existing page, such as the standard account detail page. All the information for an account displays on a single page. If there's a lot of information, you might end up doing a lot of scrolling. Using a Visualforce page you can make each section for an account display in a tab, such as contacts, opportunities, and so on.

First, create a new Visualforce page using the quick fix.

  1. In your browser, add the text /apex/tabbedAccount to the URL for your Salesforce instance. For example, if your Salesforce instance is https://MyDomainName.my.salesforce.com, the new URL would be https://MyDomainName.my.salesforce.com/apex/tabbedAccount. You will get the following error message:
    A Visualforce error stating "Page tabbedAccount does not exist"
  2. Click Create Page tabbedAccount to create the new page.
  3. Click the Page Editor link in the bottom left corner of the page. This displays the code for the new page, which should look like this:
  4. Replace the existing code with the following and click Save:
  5. Notice that there is no data in the Account page. You need to specify the ID of a particular account in the URL, as you've done with previous pages, for example, https://MyDomainName.my.salesforce.com/apex/tabbedAccount?id=001D000000IRt53. After you add in an account ID, your page should display as follows:
    The Visualforce Page Editor, displaying an account detail page

Things to note about the page markup:

  • <style> is actually part of CSS markup, not Visualforce markup. It defines the styles for two types of tabs: activeTab and inactiveTab.
  • <apex:tabPanel> is used to generate the tabs. Notice how it uses the following attributes:
    • tabClass attribute: specifies the style class used to display a tab when it is active.
    • inactiveTabClass attribute: specifies the style class used to display a tab when it is inactive.
  • Within the definition of the tab panel, is the definition of each child tab component, <apex:tab>. The first tab uses the <apex:detail> tag to return that portion of the detail view for the page:
    While the rest of the tabs use the <apex:relatedList> to specify the different parts of the account page. The following is the tab for contacts. It uses an existing list of contacts.
Now that you've created a page to display an account with tabs, you can use this page to override the detail view for all accounts.
  1. From the object management settings for accounts, go to Buttons, Links, and Actions.
  2. Click Edit next to View.
  3. In the Salesforce Classic section, select Visualforce page.
  4. From the Visualforce page drop-down list, select tabbedAccount.
  5. Click Save.

Click the Account tab, and select any account. The detail for the account is now displayed with tabs.