+ Start a Discussion
ApexnoviceApexnovice 

Leads Detail Sections in Tabbed form

Hello,

 

I am currently working on setting up a UI in which the leads tab would be in a Tabbed format and would like to know how I can break out the Lead Detail page to have each section ( Lead detail,Address Information. Additional Information) each be its own tab..  I added a snip of the code to give an idea where i am going wrong.. The tab is the created but includes all section of lead detail

 

<apex:tabPanel switchType="client"
                  selectedTab="tabdetails"
                  id="LeadTabPanel">
      <apex:tab label="Details" name="AccDetails"
                id="tabdetails">
         <apex:detail relatedList="false" title="true"/>
      </apex:tab>

 

I want to add the below but doesnt work

 

<apex:tabPanel switchType="client"
                  selectedTab="tabdetails"
                  id="LeadTabPanel">
      <apex:tab label="Details" name="AccDetails"
                id="tabdetails">
         <apex:detail relatedList="false" title="true"/>
      </apex:tab>

 

      
      <apex:tab label="Additional Information" name="AdditionalInformation"
                id="tabAdditionalInformation">
         <apex:detail relatedList="false" title="true"/>
      </apex:tab>
      

 

Thanks!
               

Best Answer chosen by Admin (Salesforce Developers) 
kkr.devkkr.dev

<apex:tabPanel id=”theTabPanel”>
<apex:tab label=”Details”>

<apex:outputField value=”{!Account.Name}”/>
<apex:outputField value=”{!Account.Fax}”/>
<apex:outputField value=”{!Account.Phone}”/>

</apex:tab>
<apex:tab label=”Description”>

<apex:outputField value=”{!Account.Description}”/>
<apex:outputField value=”{!Account.Details}”/>
</apex:tab>
<apex:tab label=”Additional Information”>

<apex:outputField value=”{!Account.Info}”/>
<apex:outputField value=”{!Account.MoreInfo}”/>

</apex:tab>
</apex:tabPanel>

All Answers

kkr.devkkr.dev

Hi,

 

  Use the below example for your reference.

 

 

 

 <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>

ApexnoviceApexnovice

I am able to create tabs based on the below but within the leads tab i am unable to segment the sections of the page layout to be a tab. I.e if i have a my leads tab, within the leads tab i would like to create tabs for the sections of the page layout vs scrolling down to the section.. I

 

https://cs11.salesforce.com/sfc/p/Z00000005Awu1XHsukjrURLjiYurXb7tZaCTVC8

Devendra@SFDCDevendra@SFDC

The detail section of lead will contain all the sections from pagelayout.
The tab which contains relateList is used to display related object records. Here in you case the sections of detail page are belongs the same Lead record.

Regards,
Devendra S

ApexnoviceApexnovice

Yes correct, What i am attempting to do is when the lead is opened the lead record info is in a tabbed view. So each tab would contain certain info based on the lead that was "clicked"

 

I.e  Lead 101 is clicked and when we are viewing lead 101 the lead detail section would be tabs vs scrolling

kkr.devkkr.dev

<apex:tabPanel id=”theTabPanel”>
<apex:tab label=”Details”>

<apex:outputField value=”{!Account.Name}”/>
<apex:outputField value=”{!Account.Fax}”/>
<apex:outputField value=”{!Account.Phone}”/>

</apex:tab>
<apex:tab label=”Description”>

<apex:outputField value=”{!Account.Description}”/>
<apex:outputField value=”{!Account.Details}”/>
</apex:tab>
<apex:tab label=”Additional Information”>

<apex:outputField value=”{!Account.Info}”/>
<apex:outputField value=”{!Account.MoreInfo}”/>

</apex:tab>
</apex:tabPanel>

This was selected as the best answer
ApexnoviceApexnovice

Thanks!!

Devendra@SFDCDevendra@SFDC

 

Try this :

 

<apex:page standardController="Lead" showHeader="true" tabStyle="Lead" extensions="testTabController">
<head>
<!-- Style Code Goes here -->
      <style>
      .activeTab {font-size:1.25em;font-style:normal;font-family: 'Calibri';font-weight:bold;background-color: #3090C7; color:white;width:60px;height:20px;background-image:none;border: 0px solid #747e96;border-bottom: 0px solid #fff; 
    }
.inactiveTab {font-size:1.25em;font-style:normal;font-family: 'Calibri';font-weight:bold;background-color: #E0FFFF; color:black;width:60px;height:20px;background-image:none;border: 0px solid #747e96;border-bottom: 0px solid #fff; 
    }
</style>
</head>
   <!-- Start Tab Panel -->

<apex:tabPanel switchType="client" id="AccTabPanel" tabClass="activeTab" activeTabClass="activeTab" inactiveTabClass="inactiveTab" width="100%" contentClass="tabContent" styleClass="theTabPanel">
               
              <apex:tab label="Tab 1" name="Tab 1" id="tabdetails1"  style="width:100px;">
<apex:include pageName="VF_Page_1"/>
</apex:tab>
              <apex:tab label="Tab 2" name="Tab 2" id="tabdetails2"  style="width:100px;">
<apex:include pageName="VF_Page_2"/>
</apex:tab>

              <apex:tab label="Tab 3" name="Tab 3" id="tabdetails3"  style="width:100px;">
<apex:include pageName="VF_Page_3"/>
</apex:tab>

      <apex:tabPanel>
<!-- End TabPanel -->
<apex:page>

 

Each tab of tabpanel will contain visualforce page to display related section.

Each VF page will contain its controller class to retrieve fields from Leads records and Use VF page to display those fields.

 

 

Hope this helps.

 

Thanks,

Devendra S