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.
-
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.
- 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.
-
Override the standard Account detail page with the TabbedAccount page.
- From the object management settings for accounts, click Buttons, Links, and Actions.
- From the list, find View, which represents the detail page of an account record. To override this page, click Edit from the dropdown menu.
- In the Salesforce Classic Override section, select Visualforce page as the override type, and then select TabbedAccount from the dropdown menu.
- To apply the TabbedAccount page in Lightning Experience or the Salesforce mobile app, select Use the Salesforce Classic override.
- Save your changes.
- On the Accounts tab, select any account record. The record detail page is now TabbedAccount.