RSS Feeds

My Wiki

Tabbed Accounts in 30 seconds

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:

edit

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)

edit

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

3. You will be prompted to create the tabbedAccount page

4. Click on the Link

Your screen should look like this:

edit

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“

edit

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

Or...

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

edit

Override standard Account view

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

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

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

4. Click Save

edit

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

edit

Optional advanced stuff…

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

edit

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>

edit

Step 2: Reference these in the apex:tabPanel tag

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

edit

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.apexdevnet.com/index.php/Tabbed_Accounts_in_30_seconds"

Category: Code Sample