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

Override an Existing Page with a Visualforce Page

Replace an existing page, such as a standard record detail page, with a Visualforce page that uses custom tabs to organize the record information into sections.
  1. Create a Visualforce page called TabbedAccount. 
    <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>
    • The <style> tag is an HTML element, not a Visualforce component. It defines the CSS classes for two types of tabs: activeTab and inactiveTab.
    • The <apex:tabPanel> component generates tabs.
      • Its tabClass attribute specifies the CSS class used when a tab is active.
      • Its inactiveTabClass attribute specifies the CSS class used when a tab is inactive.
    • Each child <apex:tab> component within the <apex:tabPanel> component represents a tab with different information about the account.
      • The first tab uses the <apex:detail> tag to show the account’s details.
      • The other tabs use the <apex:relatedList> tag to show lists of records related to the account.
  2. To preview the TabbedAccount page, specify the ID of a particular account in the URL, for example, https://MyDomain_login_URL/apex/TabbedAccount?id=001D000000IRt53.
  3. Override the standard Account detail page with the TabbedAccount page.
    1. From the object management settings for accounts, click Buttons, Links, and Actions.
    2. From the list, find View, which represents the detail page of an account record. To override this page, click Edit from the dropdown menu.
    3. In the Salesforce Classic Override section, select Visualforce page as the override type, and then select TabbedAccount from the dropdown menu.
    4. To apply the TabbedAccount page in Lightning Experience or the Salesforce mobile app, select Use the Salesforce Classic override.
    5. Save your changes.
  4. On the Accounts tab, select any account record. The record detail page is now TabbedAccount.