How to Create Tab Panel in Salesforce

H

This blog will provide you information about creation of tabpanel in salesforce.

TabPanel is a page area that displays as a set of tabs. When a user clicks a tab header, the tab’s associated  content displays, hiding the content of other tabs.

Steps

1. Create a new visualforce page (Setup → Build → Develop → Pages)

2. Write the below code inside page.

In below code I’m showing related lists of standard object Account in different tabs. when user click on any of tab, it will show related list of corresponding object related to account.

<apex:page standardController=”Account” sidebar=”true” tabStyle=”account”>

<apex:tabPanel switchType=”client” selectedTab=”tabdetails” id=”AccountTabPanel”>

<apex:tab label=”Information” name=”Information” id=”Information”>

<apex:detail relatedList=”true” title=”true”/>

</apex:tab>

<apex:tab label=”Contacts” name=”Contacts” id=”Contact”>

<apex:relatedList subject=”{!account}” list=”contacts” />

</apex:tab>

<apex:tab label=”Opportunities” name=”Opportunities” id=”Opp”>

<apex:relatedList subject=”{!account}” list=”opportunities” />

</apex:tab>

<apex:tab label=”Open Activities” name=”OpenActivities” id=”OpenActivity”>

<apex:relatedList subject=”{!account}” list=”OpenActivities” />

</apex:tab>

<apex:tab label=”Notes&Attachments” name=”Notes & Attachments” id=”notesattach”>

<apex:relatedList subject=”{!account}” list=”CombinedAttachments” />

</apex:tab>

</apex:tabPanel>

</apex:page>

 

Above visualforce page should be look like below image in the browser.

Hope this post helps you.

Thank You!

About the author

trupti.dhoka
By trupti.dhoka

Category