Tabbed Accounts in 30 seconds

Image:Header_sample.gif


Tabbed Accounts in 30 seconds (or less!)

Many users prefer to have information organized on tabs. Now with Visualforce you can do this in less than 30 seconds (Ok, maybe a minute or two if its your first time)

Basically we want to go from this:
To this:

Before you start

Before you start, you will need the following:

1. Developer Edition Org with Visualforce enabled. If you don't have a Developer Edition account click here

2. A computer capable of “Cut and Paste”

3. 30 Seconds of spare time (or maybe a little more if it's your first time)

Step 1: Create blank Visualforce page

1. Log into your Development account

2. After successful login, edit the path of the URL in the browser to this: 

apex/TabbedAccount

Image:4.1.png

3. You will be prompted to create the tabbedAccount page

4. Click on the Link

Image:5.1.png

Your screen should look like this:

Step 2: Edit Visualforce Page

1. In the page editor at the bottom, simply delete all the text and replace with this code: 

<apex:page standardController="Account" showHeader="true" tabStyle="account" >
   <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
      <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="NotesAndAttachments" />
      </apex:tab>
   </apex:tabPanel>
</apex:page>

2. Then click „save“

Image:7.1.png

Step 3: Make Visualforce page available in Account search results list

Congratulations! If your screen looks like the one below, everything is fine… All we need to do now is point the page to an account…

You can point the page to an account by adding the Object ID to the URL: 

 https://[your URL]?id=0013000000JJiAU

Image:10.1.png

Or...

since we should still have about 10 seconds left, we can override the standard account view with our new Visualforce page.

Override standard Account view

1. Navigate to Setup -> App Setup -> Customize -> Accounts -> Buttons and Links.

2. Click “Override” next to the View link.

Image:11.1.1.png

3. Click the “Page” radio button and select “TabbedAccount” from the dropdown list.

Image:11.1.2.png

4. Click Save

Finally

Congratulations, you're done!

The Accounts tab should look like this:

Clicking on the Account Name in any list will now bring you to the Tabbed details page

Optional advanced stuff…

Many people have asked if its possible to change the color of the tags… Yes of course it is!

Step 1: Add a CSS style to override the default styles 

<style>
     .activeTab {background-color: #236FBD; color:white; background-image:none}
     .inactiveTab { background-color: lightgrey; color:black; background-image:none}
  </style>

Step 2: Reference these in the apex:tabPanel tag 

<apex:tabPanel switchType="client" selectedTab=" tabdetails" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">

Full listing of Visulforce Page with Customised tab colors 

<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="NotesAndAttachments" />
      </apex:tab>
   </apex:tabPanel>
</apex:page>

Your page should now look like this:

Retrieved from "http://wiki.developerforce.com/index.php/Tabbed_Accounts_in_30_seconds"