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://na1.salesforce.com, the new URL would be https://na1.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:
    <apex:page> 
    <!-- Begin Default Content REMOVE THIS --> 
    <h1>Congratulations</h1> This is your new Page: tabbedAccount <!-- End Default Content REMOVE THIS --> 
    </apex:page>
  4. Replace the existing code with the following and click Save:
    <apex:page standardController="Account" showHeader="true" 
          tabStyle="account" > <style> .activeTab {background-color: #236FBD; color:white; background-image:none} .inactiveTab { background-color: lightgrey; color:black; background-image:none} </style> <apex:tabPanel switchType="client" selectedTab="tabdetails" 
                      id="AccountTabPanel" tabClass='activeTab' 
                      inactiveTabClass='inactiveTab'> <apex:tab label="Details" name="AccDetails" id="tabdetails"> <apex:detail relatedList="false" title="true"/> </apex:tab> <apex:tab label="Contacts" name="Contacts" id="tabContact"> <apex:relatedList subject="{!account}" list="contacts" /> </apex:tab> <apex:tab label="Opportunities" name="Opportunities" 
                    id="tabOpp"> <apex:relatedList subject="{!account}" 
                               list="opportunities" /> </apex:tab> <apex:tab label="Open Activities" name="OpenActivities" 
                    id="tabOpenAct"> <apex:relatedList subject="{!account}" 
                               list="OpenActivities" /> </apex:tab> <apex:tab label="Notes and Attachments" 
                    name="NotesAndAttachments" id="tabNoteAtt"> <apex:relatedList subject="{!account}" 
                               list="CombinedAttachments" /> </apex:tab> </apex:tabPanel> </apex:page>
  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://Salesforce_instance/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:

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 Setup, click Customize | Accounts | Buttons, Links, and Actions.
  2. Click Edit next to View.
  3. For Override With 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.

© Copyright 2000–2014 salesforce.com, inc. All rights reserved.
Various trademarks held by their respective owners.