You need to sign in to do that
Don't have an account?
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/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,
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.
Did you get this working?