Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ajaybharathajaybharath 

How to display records of account object as tabs in VF

Hi All
i'm new to salesforce . I have been asked to display the records of the Account Object as multiple tabs along with their related lists in a VF layout .

Can anyone please help me out with the code

 

Thanks in Advance

Best Answer chosen by Admin (Salesforce Developers) 
AravindBabu512AravindBabu512

Hi,

 

Please try the below code. This will display the complete Account details with the related lists. You can modify as its is required.

 

--VF Code
<apex:page controller="TopAccountController" sidebar="false">
    <apex:sectionHeader title="Top 10 Accounts"/> 
    <apex:dynamicComponent componentValue="{!tabbedView}"/><br/><br/>
</apex:page>


--Controller
public class TopAccountController {
 
    private List<Account> topAccounts;
    public String tabbedView {  set; }
    public TopAccountController (){
        topAccounts = [SELECT Name,AccountNumber,Site,
                AccountSource,AnnualRevenue,
                Industry,Phone,Type FROM Account LIMIT 6]; 
    }
 
    public Component.Apex.TabPanel getTabbedView(){
        Component.Apex.TabPanel panel = new Component.Apex.TabPanel(
                                                       switchType = 'client',
                                                       title = 'Top 10 Accounts');
        String lastAccountId;
    
        for (Integer i = 0; i< topAccounts.size(); i++){
            Account o = topAccounts[i];
            
            if (lastAccountId != o.Id){
                Component.Apex.Tab acctTab = new Component.Apex.Tab();
                acctTab.label = o.Name;
                Component.Apex.detail rl = new Component.Apex.detail();
                system.debug('Before RL');
                rl.subject=o.Id;
                rl.relatedList = TRUE;
                rl.title = false;
                acctTab.childcomponents.add(rl);
                system.debug('After RL');
                panel.childComponents.add(acctTab);

            }   

          /*  Component.Apex.OutputText oppText = new Component.Apex.OutputText(escape = false);
            oppText.value = '';
            
            if (lastAccountId != o.Id){
                oppText.value += '<table class="customT"><thead class="customT"><tr class="customT"><th class="customT">Account Number</th><th class="customT">Company Name</th><th class="customT">Type</th><th class="customT">Industry</th><th class="customT">Phone No.</th><th class="customT">Expected Revenue</th></tr><tBody class="customT"></thead><tBody class="customT">';
            }
 
            oppText.value += '<tr><td class="customT">' + o.AccountNumber + '</td>';
            oppText.value += '<td class="customT">' + o.Type + '</td>';
            oppText.value += '<td class="customT">' + o.Industry + '</td>';
            oppText.value += '<td class="customT">' + o.Phone + '</td>';
            oppText.value += '<td class="customT">' + o.AnnualRevenue + '</td>';
            oppText.value += '</tr>';            
 
            if ( (i == topAccounts.size() -1) || o.Id != topAccounts[i+1].Id ){
                 oppText.value += '</tBody></table>';     
            } 
 
            panel.childComponents.get(panel.childComponents.size() -1 ).childComponents.add(oppText); 
            lastAccountId = o.Id; */
        }
        return panel;
    }

}

 

Please mark it solved, if it answers your question.

 

Thanks,

Aravind.

 

 

All Answers

AravindBabu512AravindBabu512

Hi,

 

Please try the below code, this is just for your understanding on how to display the details in tab. You can enhance it based on your requirement.

 

<apex:page standardController="Account">
<apex:tabPanel >
<apex:tab label="TAB1">
<apex:detail subject="{!Account.ID}" relatedList="false" title="false"/> 
</apex:tab>
<apex:tab label="TAB2">
<apex:detail subject="{!account.ownerId}" relatedList="false" title="false"/> 
</apex:tab>
</apex:tabPanel>
</apex:page>

 
ajaybharathajaybharath

Thanks Aravind ,


I have tried this code .. It works to some extent . The Component.Apex.outputText works fine . What i need is to get related list of those account records . So I tried using this code . I got this output

 

Acc_as_tab

 

 

 

Now when I add Component.Apex.Detail its showing error as insufficient privilege

Please help !

 

Controller

 

public with sharing class TopAccountController {
 
    private List<Account> topAccounts;
    
    public TopAccountController (){
        topAccounts = [SELECT Name,AccountNumber,Site,
                AccountSource,AnnualRevenue,
                Industry,Phone,Type,Company_Name__c FROM 
                            Account LIMIT 10]; 
    }
 
    public Component.Apex.TabPanel getTabbedView(){
        Component.Apex.TabPanel panel = new Component.Apex.TabPanel(
                                                       switchType = 'client',
                                                       title = 'Top 10 Accounts');
 
        String lastAccountId;
    
        for (Integer i = 0; i< topAccounts.size(); i++){
            Account o = topAccounts[i];
            
            if (lastAccountId != o.Id){
                Component.Apex.Tab acctTab = new Component.Apex.Tab();
                acctTab.label = o.Name;
                panel.childComponents.add(acctTab);
                Component.Apex.Detail detail = new Component.Apex.Detail();
                detail.subject = 'o.Id';
                detail.relatedList = true;
                detail.title = false;
                panel.childComponents.add(detail);
            }   

            Component.Apex.OutputText oppText = new Component.Apex.OutputText(escape = false);
 
            oppText.value = '';
 
            if (lastAccountId != o.Id){
                oppText.value += '<table class="customT"><thead class="customT"><tr class="customT"><th class="customT">Account Number</th><th class="customT">Company Name</th><th class="customT">Type</th><th class="customT">Industry</th><th class="customT">Phone No.</th><th class="customT">Expected Revenue</th></tr><tBody class="customT"></thead><tBody class="customT">';
            }
 
            oppText.value += '<tr><td class="customT">' + o.AccountNumber + '</td>';
            oppText.value += '<td class="customT">' + o.Company_Name__c + '</td>';
            oppText.value += '<td class="customT">' + o.Type + '</td>';
            oppText.value += '<td class="customT">' + o.Industry + '</td>';
            oppText.value += '<td class="customT">' + o.Phone + '</td>';
            oppText.value += '<td class="customT">' + o.AnnualRevenue + '</td>';
            oppText.value += '</tr>';            
 
            if ( (i == topAccounts.size() -1) || o.Id != topAccounts[i+1].Id ){
                 oppText.value += '</tBody></table>';     
            } 
 
            panel.childComponents.get(panel.childComponents.size() -1 ).childComponents.add(oppText); 

        //panel.childComponents.get(panel.childComponents.size() -1 ).childComponents.add(detail); 
            lastAccountId = o.Id;
        }
        return panel;
    }

    public Component.Apex.Detail getdynamicDetail(){
         Component.Apex.Detail detail = new Component.Apex.Detail();
          detail.subject='o.Id';
	 detail.relatedList = true;
	 detail.title = false;
         return detail;
    }
}

 

VF page

 

<apex:page controller="TopAccountController">
    <apex:sectionHeader title="Top 10 Accounts"/> 
    	<apex:dynamicComponent componentValue="{!tabbedView}"/><br/><br/>
	<apex:dynamicComponent componentValue="{!dynamicDetail}"/>
</apex:page>

 

Thanks in Advance
Aj

 

 

 
AravindBabu512AravindBabu512

Hi,

 

In my example code i have provided the related list as false, you can have it true and check once. Also your requirement is to show the Account details in tab or the related lists in tab, i.e, if you have account 1,2,3 should you display the accounts as tabs or on clicking the Account 1, the related lists Contacts, Opportunities should be displayed in tab. If this is your requirement, please check if this helps http://wiki.developerforce.com/page/Tabbed_Accounts_in_30_seconds

 

 

Thanks,

Aravind
ajaybharathajaybharath

Thanks Aravind

My requirement is to display the account as tabs . For Eg : if i have 3 accounts say A,B,C
I must get Account A as a separate tab and its corresponding details and its related list under the same tab
and Account B as a separate tab and so on ...

 

In my code i'm able to get that account as tabs but i'm not able to get the detail component inside the tab dynamically
Thanks in Advance
AravindBabu512AravindBabu512

Hi,

 

Please try the below code. This will display the complete Account details with the related lists. You can modify as its is required.

 

--VF Code
<apex:page controller="TopAccountController" sidebar="false">
    <apex:sectionHeader title="Top 10 Accounts"/> 
    <apex:dynamicComponent componentValue="{!tabbedView}"/><br/><br/>
</apex:page>


--Controller
public class TopAccountController {
 
    private List<Account> topAccounts;
    public String tabbedView {  set; }
    public TopAccountController (){
        topAccounts = [SELECT Name,AccountNumber,Site,
                AccountSource,AnnualRevenue,
                Industry,Phone,Type FROM Account LIMIT 6]; 
    }
 
    public Component.Apex.TabPanel getTabbedView(){
        Component.Apex.TabPanel panel = new Component.Apex.TabPanel(
                                                       switchType = 'client',
                                                       title = 'Top 10 Accounts');
        String lastAccountId;
    
        for (Integer i = 0; i< topAccounts.size(); i++){
            Account o = topAccounts[i];
            
            if (lastAccountId != o.Id){
                Component.Apex.Tab acctTab = new Component.Apex.Tab();
                acctTab.label = o.Name;
                Component.Apex.detail rl = new Component.Apex.detail();
                system.debug('Before RL');
                rl.subject=o.Id;
                rl.relatedList = TRUE;
                rl.title = false;
                acctTab.childcomponents.add(rl);
                system.debug('After RL');
                panel.childComponents.add(acctTab);

            }   

          /*  Component.Apex.OutputText oppText = new Component.Apex.OutputText(escape = false);
            oppText.value = '';
            
            if (lastAccountId != o.Id){
                oppText.value += '<table class="customT"><thead class="customT"><tr class="customT"><th class="customT">Account Number</th><th class="customT">Company Name</th><th class="customT">Type</th><th class="customT">Industry</th><th class="customT">Phone No.</th><th class="customT">Expected Revenue</th></tr><tBody class="customT"></thead><tBody class="customT">';
            }
 
            oppText.value += '<tr><td class="customT">' + o.AccountNumber + '</td>';
            oppText.value += '<td class="customT">' + o.Type + '</td>';
            oppText.value += '<td class="customT">' + o.Industry + '</td>';
            oppText.value += '<td class="customT">' + o.Phone + '</td>';
            oppText.value += '<td class="customT">' + o.AnnualRevenue + '</td>';
            oppText.value += '</tr>';            
 
            if ( (i == topAccounts.size() -1) || o.Id != topAccounts[i+1].Id ){
                 oppText.value += '</tBody></table>';     
            } 
 
            panel.childComponents.get(panel.childComponents.size() -1 ).childComponents.add(oppText); 
            lastAccountId = o.Id; */
        }
        return panel;
    }

}

 

Please mark it solved, if it answers your question.

 

Thanks,

Aravind.

 

 

This was selected as the best answer
ajaybharathajaybharath

WOW ! Works Perfect !
Thanks a lot for your help !!!
May I know what was the error in my code ..
If i'm rite i think i have given that detail subject like 'o.Id' instead of o.Id and dint add that String tabbedview .

 

Thank you once again for the effort u took to solve this :) :)