function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

tabPanel: selectedTab issue

I'm having trouble setting the selectedTab attribute of a tabPanel dynamically.  It works fine if I set selectedTab to a string in the visualforce page, but if I try and use something set by the controller it doesn't work.  Am I missing something obvious or is there an issue with the tabPanel tag?  

Controller:

Code:
public class testTabController {
 String tabInFocus = System.currentPageReference().getParameters().get('tab');
 public String getTabInFocus() {
  return tabInFocus;
 }
 public void setTabInFocus( String s ) {
  this.tabInFocus = s;
 }
}

 Page:
Code:
<apex:page controller="testTabController" sidebar="false" showheader="true">

 <p>tabInFocus: &lt;{!TabInFocus}&gt;</p>
 <apex:tabPanel switchType="client" selectedTab="{!TabInFocus}" id="testTabs">
  
  <apex:tab label="Label 1" name="oneTab" id="tab1" >
   <p>This is number one</p>
  </apex:tab>
  
  <apex:tab label="Label 2" name="twoTab" id="tab2" >
   <p>This is number two</p>
  </apex:tab>
  
  <apex:tab label="Label 3" name="threeTab" id="tab3" >
   <p>This is number three</p>
  </apex:tab>
  
 </apex:tabPanel>

</apex:page>

URL:
Code:
/apex/test_tab?tab=twoTab

 


 
The tab is selected properly if I use a static string, e.g.:

Code:
<apex:tabPanel switchType="client" selectedTab="twoTab" id="testTabs">

 
Any ideas?
Best Answer chosen by Admin (Salesforce Developers) 
aballardaballard

The selectedTab attribute specifies thr DEFAULT tab to be displayed when the page is loaded.

The current active tab can be specified using the value attribute:

Code:
 <apex:tabPanel switchType="client" value="{!TabInFocus}"  id="testTabs">


 You'll need a setter for TabInFocus as well as a getter, because this binding will also pass the currently selected tab back to the controller. 


 

All Answers

aballardaballard

The selectedTab attribute specifies thr DEFAULT tab to be displayed when the page is loaded.

The current active tab can be specified using the value attribute:

Code:
 <apex:tabPanel switchType="client" value="{!TabInFocus}"  id="testTabs">


 You'll need a setter for TabInFocus as well as a getter, because this binding will also pass the currently selected tab back to the controller. 


 

This was selected as the best answer
kmccollkmccoll
Thanks - solves my issue perfectly.

Note to the powers that be - the documentation and/or naming conventions could be a bit clearer on this topic.
maheshep.ax379maheshep.ax379
this topic saved my day thanks
p1_dfsp1_dfs
Code:
<apex:page standardController="InventoryReserve__c" extensions="OrderExecutionCon" showheader="true" standardStylesheets="true">
<style>
.activeTab {
        background-color: #861515;
        color: white;
        background-image: none;
}
.inactiveTab {
        background-color: #E8E8E8;
        color: black;
        background-image: none;
        }
        <!--
.actionLink {
  visibility:hidden;
  
  }
  -->   
</style>
<script>
function settab(inputText) {

document.getElementById('user_tab').value=inputText;
}
function showdefault() {
document.getElementById('user_tab').value='Picklist';
document.getElementsByName('gii__button01')[0].value="Create Picklist By Sales Order";
document.getElementsByName('gii__button02')[0].value="Create Picklist By Product";
}
function showQuickPacklist(){
document.getElementsByName('gii__button01')[1].value="Quick Packlist By Sales Order";
document.getElementsByName('gii__button02')[1].value="Quick Packlist By Account";
}
function showPacklist(){
}
function showPackConfirm(){
document.getElementsByName('gii__shipconfirm')[0].style.visibility="hidden";
}
function showshipconfirm(){

document.getElementsByName('gii__button01')[2].value="Quick Ship By Sales Order";
document.getElementsByName('gii__button02')[2].value="Quick Ship By Account";
}
function showinvoice(){
document.getElementsByName('gii__button01')[3].value="Quick Invoice By Sales Order";
document.getElementsByName('gii__button02')[3].value="Quick Invoice By Account";
}
</script>
<apex:panelGrid columns="2" width="100%" style="text-align:right;">
<apex:panelGroup >
&nbsp;
</apex:panelGroup>
<apex:panelGroup >
<a href="javascript:openPopupFocusEscapePounds('', 'Help', 700, 600, 'width=700,height=600,resizable=yes,toolbar=yes,status=no,scrollbars=yes,menubar=yes,directories=no,location=no,dependant=no', false, false);" title="Help for this Page (New Window)"><span  class="helpLink">Help for this Page</span><img src="/s.gif" alt="Help"  class="helpIcon" title="Help"/></a>
</apex:panelGroup>
</apex:panelgrid>


<input type="hidden" id="user_tab" value="" ></input>
<apex:tabPanel switchType="client" selectedTab="Order Execution"
                id="theMainTabPanel" tabClass="activeTab"
                inactiveTabClass="inactiveTab" >
                <apex:tab label="Picklist" rendered="true" name="PicklistMain" id="tabMainPicklist" ontabenter="showdefault();">
                 <apex:tabPanel switchType="client"  value="{!TabInFocus}"
                       id="thePicklistTabPanel" tabClass="activeTab"
                       inactiveTabClass="inactiveTab"    > 
                        <apex:tab label="Picklist Creation" rendered="true" name="Picklist" id="tabPicklistCreation"  onmouseover="settab('Picklist');" ontabenter="showdefault();" >
                                       
                                        <apex:listViews type="InventoryReserve__c"/>
                                       
                                </apex:tab>    
                     
                                <apex:tab label="Picklist Confirm " rendered="true" name="PicklistConfirm" id="tabPicklistConfirm" onmouseover="settab('Picklist');" >
                                       <apex:listViews type="PickList__c"/>  
                                </apex:tab>
                                 
                 </apex:tabPanel>
                 </apex:tab>
                 <apex:tab label="Packlist" rendered="true" name="PacklistMain" id="tabMainPacklist" ontabenter="showPacklist();" onmouseover="settab('Packlist');" >
                 <apex:tabPanel switchType="client"   value="{!TabInFocus01}" 
                       id="thePacklistTabPanel" tabClass="activeTab" 
                       inactiveTabClass="inactiveTab" > 
                                        
                                <apex:tab label="Quick Packlist" rendered="true" name="QuickPacklist" id="tabQuickPacklist" ontabenter="showQuickPacklist();" onmouseover="settab('Packlist');" >  
                                        <apex:listViews type="InventoryReserve__c"/>
                                </apex:tab>    
                                    
                                <apex:tab label="Packlist Creation " rendered="true" name="PacklistCreation" id="tabPacklistCreation" ontabenter="showPacklist();" onmouseover="settab('Packlist');" >
                                        <apex:listViews type="PacklistQueue__c"/>
                                </apex:tab> 
                                <apex:tab label="Packlist Confirm " rendered="true" name="PacklistConfirm" id="tabPacklistConfirm" ontabenter="showPackConfirm();" onmouseover="settab('Packlist');" >
                                        <apex:listViews type="PackList__c"/>
                                </apex:tab>    
                  </apex:tabPanel>
                  </apex:tab>
                  <apex:tab label="Shipment" rendered="true" name="ShipmentMain" id="tabMainShipment" ontabenter="showshipconfirm();" onmouseover="settab('Shipment');" >
                  <apex:tabPanel switchType="client"   value="{!TabInFocus}" 
                       id="theShipmentTabPanel" tabClass="activeTab"
                       inactiveTabClass="inactiveTab" > 
                                 <apex:tab label="Quick Ship" rendered="true" name="QuickShip" id="tabQuickShip" ontabenter="showshipconfirm();" onmouseover="settab('Shipment');" >
                                        <apex:listViews type="InventoryReserve__c"/>
                                </apex:tab>        
                                 <apex:tab label="Ship Confirm" rendered="true" name="ShipConfirm" id="tabShipConfirm" onmouseover="settab('Shipment');" >
                                        <apex:listViews type="ShipmentQueue__c"/>
                                </apex:tab>
                                  
                  </apex:tabPanel>
                  </apex:tab>
                  <apex:tab label="Invoice" rendered="true" name="InvoiceMain" id="tabMainInvoice" ontabenter="showinvoice();" onmouseover="settab('Invoice');">
                  <apex:tabPanel switchType="client"   value="{!TabInFocus}" 
                       id="theInvoiceTabPanel" tabClass="activeTab"
                       inactiveTabClass="inactiveTab"    > 
                                <apex:tab label="Quick Invoice" rendered="true" name="QuickInvoice" id="tabQuickInvoice" ontabenter="showinvoice();" onmouseover="settab('Invoice');" >
                                        <apex:listViews type="InventoryReserve__c"/>
                                </apex:tab> 
                                <apex:tab label="Create Invoice" rendered="true" name="CreateInvoice" id="tabCreateInvoice" onmouseover="settab('Invoice');" >
                                        <apex:listViews type="Shipment__c"/>
                                </apex:tab> 
                                <apex:tab label="Invoice Details" rendered="true" name="Invoice" id="tabInvoice" onmouseover="settab('Invoice');" >
                                        <apex:listViews type="OrderInvoice__c"/>
                                </apex:tab> 
                  </apex:tabPanel>
                  </apex:tab>
                                       
                     
</apex:tabPanel>

<script>
// call functions to reset the buttons

showdefault();
showQuickPacklist();
showPacklist();
showPackConfirm();
showshipconfirm();
showinvoice();
</script>

</apex:page>

 
Controller :
Code:
public class OrderExecutionCon {

String TabInFocus = System.currentPageReference().getParameters().get('tab');
String TabInFocus01 = System.currentPageReference().getParameters().get('tab');


 public OrderExecutionCon(ApexPages.StandardController controller) {
     
       System.debug('Current Selected tab is :' + TabInFocus);
    }

// public PageReference TabInFocus {get{System.debug('Called'); return TabInFocus;}set{TabInFocus=value;} }
  
  public String getTabInFocus() {
         System.debug(' *****Current Selected tab is :' + TabInFocus);

    return TabInFocus;
  }
  
  public void setTabInFocus( String s ) {
    this.TabInfocus = s;
  }
 
   public String getTabInFocus01() {
         System.debug(' *****Current Selected tab is :' + TabInFocus01);

    return TabInFocus01;
  }
  
  public void setTabInFocus01( String s ) {
    this.TabInfocus01 = s;
  }

 
 
 }

 Any suggestions, how to jump back  to the last tab selected
Devendra SawantDevendra Sawant

 

Hi,

 

I am also facing the same problem.

 

http://boards.developerforce.com/t5/Visualforce-Development/Tab-Navigation/m-p/318363

 

Can anyone help on this topic??

 

Cheers,

Devendra S
Keith987Keith987

Spent today working on this - see Keeping track of the selected tab of an apex:tabPanel in the controller for what I did.

 

Keith