+ Start a Discussion
Veeru AVeeru A 

Save the state for TABPANEL

There are a lot of posts about problems about saving the selected tab when using <apex:tabpanel>. Is there a CLEAN way to do this? Some of the examples think there is a URL that says tab="xyz" at the end....which is not necessarily the case. 

I can detect the click and I have a simple controller that COULD persist something in a set/get but I am having problems cleanly connecting the two. I could go on to the Javascript/Cookie model but I am hoping there is something cleaner. 


Who has a CURRENT working verion of a clean way to persist the selected tab out there. In my VF page, I have a tab panel with 4 tabs that have enhancedlists inside them. If a user picks an item (task or case) to view then hits the back button in the browser...it defaults back to the inital tab....very annoying for a user. 


This is something I think SF should just FIX this correctly....but really...anybody out there fixed this in WInter 12 with APEX:TABPANEL?


Thanks in advance. 



Hi DSchueler,

Try  this,


/* This controller is used to handle navigation between tabs in tabpanel */
public class testTabController 
    public String tabInFocus{get;set;}
    String intTabFocus;
    public testTabController(ApexPages.StandardController con) 
        intTabFocus = System.currentPageReference().getParameters().get('intFocus');
         tabInFocus = 'Tab 1';
            tabInFocus = 'Tab 2';
            tabInFocus = 'Tab 3';
            tabInFocus = 'Tab 4';


VF page Code:

<apex:page standardController="Account" showHeader="true" tabStyle="Account" extensions="testTabController">
<!-- Style Code Goes here -->
      .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; 
   <!-- Start Tab Panel -->

<apex:tabPanel switchType="client" value="{!tabInFocus}" id="AccTabPanel" tabClass="activeTab" activeTabClass="activeTab" inactiveTabClass="inactiveTab" width="100%" contentClass="tabContent" styleClass="theTabPanel">
         <!—Start Tab 1 -->
      <apex:tab label="Tab 1" name="Tab 1" id="tabdetails"  style="width:100px;">
<!—Inside Tab Content -->   
      <!-- End of Tab 1-->
Similarly include remaining tabs..


<apex:tabPanel> has attribute called "value" and it is controlled through class variable tabInFocus.


Hope this helps.