Tabs – apex tab panels Example

Tabs – apex tab panels: <apex:tabpanel > Examples:

Example1: TabPanels with Tabs:

In this scenario we used tabpanel for displaying the records of more than one object. Tabpanel can contains any number of tabs. Here we used individual tabs for objects.

Visualforce page:
<apex:page sidebar=”false” controller=”DisplayDataTestxyz”>
<apex:form >
<apex:tabpanel >
<apex:tab label=”Testing Data”>
<!– Logic for displaying the Accounts Data –>
<apex:pageblock >
<apex:pageblocksection >
<apex:pageblocktable value=”{!testingrecords}” var=”tr”>
<apex:column headerValue=”Name”>
{!tr.Name}
</apex:column>
<apex:column headerValue=”City”>
{!tr.City__c}
</apex:column>
</apex:pageblocktable>
</apex:pageblocksection>
</apex:pageblock>
</apex:tab>
<apex:tab label=”DataLoadTest Data”>
<!– Logic for Displaying the Conthttps://c.ap1.visual.force.com/apex/tabpanelsacts Data –>
<apex:pageblock >
<apex:pageblocksection >
<apex:pageblocktable value=”{!dataloadtestrecords}” var=”dr”>
<apex:column headerValue=”Name”>
{!dr.Name}
</apex:column>
<apex:column headerValue=”City”>
{!dr.City__c}
</apex:column>
<apex:column headerValue=”Country”>
{!dr.City__c}
</apex:column>
<apex:column headerValue=”Phone”>
{!dr.phone__c}
</apex:column>
</apex:pageblocktable>
</apex:pageblocksection>
</apex:pageblock>
</apex:tab>
</apex:tabpanel>
</apex:form>
</apex:page>

Apex class:
public with sharing class DisplayDataTestxyz {
List<DataLoadTest__c> lstdlt = new List<DataLoadTest__c>();
public List<DataLoadTest__c> getDataloadtestrecords() {
lstdlt=[select Id,name,city__c,country__c,phone__c from DataLoadTest__c];
return lstdlt;
}
List<Testing__c> lsttesting = new List<Testing__c>();
public List<Testing__c> getTestingrecords() {
lsttesting=[select Id,name,city__c from Testing__c];
return lsttesting;
}
}

Tabpanels for displaying related lists for specific Account

In this scenario we used two pages, one for displaying all accounts and another for displaying individual contacts, opportunities and cases for a particular account. In second page we used tabpanel for displaying contacts, cases and opportunities.

page1:
<apex:page sidebar=”false” controller=”RelatedListClass”>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!accRecords}” var=”acc”>
<apex:column >
<apex:commandLink value=”{!acc.Name}” action=”{!passingId}”>
<apex:param name=”accId” value=”{!acc.Id}” assignTo=”{!accId}”/>
</apex:commandLink>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

class1:
public with sharing class RelatedListClass {
public PageReference passingId() {
pagereference ref = new pagereference(‘/apex/relatedlistdatadisplaypage?value=’+accId);
ref.setredirect(true);
return ref;
}
List<Account> lstaccounts = new List<Account>();
public List<Account> getAccRecords() {
lstaccounts = [select Id,name from Account];
return lstaccounts;
}
public String accId{get;set;}
}
page2:
<apex:page controller=”RelatedListDataDisplayClass” sidebar=”false”>
<apex:form >
<apex:tabpanel >
<apex:tab label=”Contacts”>
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!conRecords}” var=”con”>
<apex:column >
{!con.Name}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:tab>
<apex:tab label=”Opportunities”>
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!oPPRecords}” var=”opp”>
<apex:column >
{!opp.Name}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:tab>
<apex:tab label=”Cases”>
<apex:pagemessages ></apex:pagemessages>
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!caseRecords}” var=”c”>
<apex:column >
{!c.caseNumber}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:tab>
</apex:tabpanel>
</apex:form>
</apex:page>
class2:
public with sharing class RelatedListDataDisplayClass {
List<case> lstcase = new List<case>();
public List<case> getCaseRecords() {
lstcase = [select Id,caseNumber,AccountId from case where AccountId = : aId];
if(lstcase.size()==0)
{
ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.WARNING, ‘Case List Doest not contains any records’);
ApexPages.addMessage(myMsg);
}
return lstcase;
}
List<opportunity> lstopp = new List<opportunity>();
public List<opportunity> getOPPRecords() {
lstopp=[select Id,name,AccountId from opportunity where AccountId =: aId];
return lstopp;
}
List<contact> lstcontacts = new List<contact>();
public list<contact> getConRecords() {
lstcontacts=[select Id,name,AccountId from Contact where AccountId =: aId];
return lstcontacts;
}
String aId = apexpages.currentpage().getparameters().get(‘value’);
}