Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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. 

Devendra@SFDCDevendra@SFDC

 

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');
   
        if(intTabFocus=='1')
        {
         tabInFocus = 'Tab 1';
        }
        if(intTabFocus=='2')
        {
            tabInFocus = 'Tab 2';
        }
        if(intTabFocus=='3')
        {
            tabInFocus = 'Tab 3';
        }
         if(intTabFocus=='4')
        {
            tabInFocus = 'Tab 4';
        }
     }
}

 

VF page Code:

<apex:page standardController="Account" showHeader="true" tabStyle="Account" 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" 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 -->   
</apex:tab>
      <!-- End of Tab 1-->
Similarly include remaining tabs..
<apex:tabPanel>
<apex:page>

 

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

 

Hope this helps.

 

Thanks,

Devendra