function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
klabklab 

VF Page with Tab Panel and Focus on Tabs

Hi VF experts,

 

I've been running into an issue with creating a VF page using Tab Panel, and each Tab within the Tab Panel holds a List View of a Custom Object.  I am not using Enchanced Lists because there is a limit on how many of those can be displayed on a VF page, so I have resorted to the basic List View.

 

My problem is whenever a user clicks on a sort funciton, selects a view from the dropdown, or clicks to view more records, the Tab Focus of the Tab Panel is set back to the default tab.  The user then has to click back to the tab he/she was on to see the result of the sort function, new selected view or different records.  So it remembers what the user did on the individual tab itself, but the Tab focus always goes to the default one.  

 

I've search high and low for a solution to this. Here are a few I found that don't seem to work.

 

http://boards.developerforce.com/t5/Visualforce-Development/ListView-inside-tabPanel-refreshing-whole-page/m-p/639571#M65884

 

http://boards.developerforce.com/t5/Visualforce-Development/Setting-selectedTab-via-CurrentPage-parameters/td-p/118568

 

http://boards.developerforce.com/t5/Visualforce-Development/tabPanel-selectedTab-issue/m-p/74299

 

Here is my controller code

 

public with sharing class TestsTabController {
    
    String selectedTabName = null;  //variable from the VF page
    Id currentUserId;
    Boolean boolSelectedTabSet = false;
    String defaultSelectedTabName = 'object2';
    String currentTabName = null; //variable to hold the value of the selectedTabName;
    
    public TestsTabController(){  //constructor
    	currentUserId = UserInfo.getUserId();    // userID for debug purposes
    }
    
    private void computeSelectedTabName(){
        If (this.boolSelectedTabSet == true){  //if setSelectedTabName function has been invoked and bool set to true
            this.selectedTabName =  this.currentTabName; // set selectedTabName to the value of currentTabName
        } else { //if set function has not been invoked, use defaultTabName value
            this.selectedTabName = this.defaultSelectedTabName;	// set selectedTabName to default
	}
    }
    
    public String getSelectedTabName() {
            computeSelectedTabName();  // run method to see if value of selectedTabName should be set to default or to the displayed tab in the UI
            return this.selectedTabName; 
    }
      
    public void setSelectedTabName(String tabName) {
	 this.currentTabName = tabName;  // set the selectedTabName to the currentTabName
         this.boolSelectedTabSet = true; //set the bool to true
    }
}

 

 

Here is my code for the VF page

 

<apex:page showheader="true" id="thePage"  tabstyle="Tests__tab" controller="TestsTabController">
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
       <apex:tabPanel switchType="ajax" value="{!selectedTabName}" id="tabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">            
        <apex:tab label="object1" name="object1" id="tabOne">
            <apex:ListViews type="object1__c" /></apex:tab>        
        <apex:tab label="object2" name="object2" id="tabTwo">
            <apex:ListViews type="object2__c" /></apex:tab>
        <apex:tab label="object3" name="object3" id="tabThree">
            <apex:ListViews type="object3__c"  /></apex:tab>
        <apex:tab label="object4" name="object4" id="tabFour">
            <apex:ListViews type="object4__c" /></apex:tab>
        <apex:tab label="object5" name="object5" id="tabFive">
            <apex:ListViews type="object5__c" /></apex:tab>
    </apex:tabPanel>
</apex:page>

 

Any ideas on what is wrong or how this can be accomplished?

 

Thank you,

klabklab

While doing some debugging on this, it looks like when anything inside the listview is clicked, it reloads the VF page and doesn't invoke the setter method of the controller, so the getter method is invoked and the tab is set to default.  I wonder if javascript remoting would help me here at all -to call the private method and set the Tab name for reload.   I'll keep trouble-shooting as I go here.

gurditta.garg@gmail.comgurditta.garg@gmail.com
Hi Klab,

Did you get this working?