+ Start a Discussion
BhatiaBhatia 

Behavior of apex Listviews component within the apex tabpanel

Anybody is able to control the behavior of apex listviews component within the apex tabpanel

this is the code if i take some number of tabs within the tabpanel and using the listviews component within the tab component  and try to click any of the filters like A,B,C,..... etc or next or previous link , my page get refreshes and it lands to default tab of tabpanel showing unexpected behavior of tab within one apex page. this is the code. Any comment will be appreciated.

<apex:page showHeader="false">
   <apex:tabPanel switchType="client" id="tabpanel">
   <apex:tab label="TAB 1" id="object1">
   <apex:ListViews type="Case"/>
   </apex:tab>    
 
    <apex:tab label="TAB 2" id="object2">
            <apex:listViews type="account"/>
    </apex:tab> 
    </apex:tabPanel>
</apex:page>

 

Thank you

Best Answer chosen by Admin (Salesforce Developers) 
vhanson222vhanson222

This is sort of wonky, but it works:

 

 

<!-- VISUALFORCE PAGE -->
<apex:page showHeader="false" id="thePage" controller="extensionController">
	<script>
		function setCookie(c_name,value)
		{
			var exdate=new Date();
			exdate.setDate(exdate.getDate() + 99);
			var c_value=(escape(value) + : "; expires="+exdate.toUTCString());
			document.cookie=c_name + "=" + c_value;
		}
	</script>

	<apex:form >
		<apex:actionFunction name="setTab" onComplete="return false;" rerender="tabpanel">
			<apex:param name="activeTab" assignTo="{!ActiveTab}" value="" />
		</apex:actionFunction>
	</apex:form>
	
	<apex:tabPanel switchType="client" id="tabpanel" value="{!if(ActiveTab != null, ActiveTab, 'tab1')}">
		<apex:tab label="TAB 1" id="object1" name="tab1" ontabenter="setCookie('apex__counter','tab1');" switchType="client">
			<apex:ListViews type="Case" />
		</apex:tab>
		<apex:tab label="TAB 2" id="object2" name="tab2" ontabenter="setCookie('apex__counter','tab2');" switchType="client">
			<apex:ListViews type="Account" />
		</apex:tab>
	</apex:tabPanel>

</apex:page>



<!-- APEX CONTROLLER -->
public with sharing class extensionController {

	public extensionController()
	{
		Cookie counter = ApexPages.currentPage().getCookies().get('counter');

		// If this is the first time the user is accessing the page,   
		// create a new cookie with name 'counter', an initial value of '1',   
		// path 'null', maxAge '-1', and isSecure 'false'.   
		    if (counter ==null) {
		        counter = new Cookie('counter','tab1',null,999,false);
		        // Set the new cookie for the page  
		        ApexPages.currentPage().setCookies(new Cookie[]{counter});
		    } else {
		// If this isn't the first time the user is accessing the page  
		// create a new cookie, incrementing the value of the original count by 1  
		    
		        ActiveTab = String.valueOf(counter.getValue());
		    }
		    system.debug('@@ActiveTab: ' + ActiveTab);
	}
	
	public string ActiveTab  { get; set; }
	

}

 Basically, every time that you change the list view, the page submits the form which causes the page to lose it's state data.  The solution above uses cookies to dynamically store that data and grab it when the page refreshes to display the last tab the user was on before the page refreshed.

 

All Answers

Prajapati.LakhanPrajapati.Lakhan
Hi, As for as I understood, problem is refreshing the entire page. You can control this behavior using javascript or apex variable to hold the selected tab id and bind that value with apex tabPanel. Using javascript onload event you can change the selected tab based on parameters in the URL. Thanks, Lakhan
BhatiaBhatia

Can you give me some sample code  to do this?

 

Thanks

vhanson222vhanson222

This is sort of wonky, but it works:

 

 

<!-- VISUALFORCE PAGE -->
<apex:page showHeader="false" id="thePage" controller="extensionController">
	<script>
		function setCookie(c_name,value)
		{
			var exdate=new Date();
			exdate.setDate(exdate.getDate() + 99);
			var c_value=(escape(value) + : "; expires="+exdate.toUTCString());
			document.cookie=c_name + "=" + c_value;
		}
	</script>

	<apex:form >
		<apex:actionFunction name="setTab" onComplete="return false;" rerender="tabpanel">
			<apex:param name="activeTab" assignTo="{!ActiveTab}" value="" />
		</apex:actionFunction>
	</apex:form>
	
	<apex:tabPanel switchType="client" id="tabpanel" value="{!if(ActiveTab != null, ActiveTab, 'tab1')}">
		<apex:tab label="TAB 1" id="object1" name="tab1" ontabenter="setCookie('apex__counter','tab1');" switchType="client">
			<apex:ListViews type="Case" />
		</apex:tab>
		<apex:tab label="TAB 2" id="object2" name="tab2" ontabenter="setCookie('apex__counter','tab2');" switchType="client">
			<apex:ListViews type="Account" />
		</apex:tab>
	</apex:tabPanel>

</apex:page>



<!-- APEX CONTROLLER -->
public with sharing class extensionController {

	public extensionController()
	{
		Cookie counter = ApexPages.currentPage().getCookies().get('counter');

		// If this is the first time the user is accessing the page,   
		// create a new cookie with name 'counter', an initial value of '1',   
		// path 'null', maxAge '-1', and isSecure 'false'.   
		    if (counter ==null) {
		        counter = new Cookie('counter','tab1',null,999,false);
		        // Set the new cookie for the page  
		        ApexPages.currentPage().setCookies(new Cookie[]{counter});
		    } else {
		// If this isn't the first time the user is accessing the page  
		// create a new cookie, incrementing the value of the original count by 1  
		    
		        ActiveTab = String.valueOf(counter.getValue());
		    }
		    system.debug('@@ActiveTab: ' + ActiveTab);
	}
	
	public string ActiveTab  { get; set; }
	

}

 Basically, every time that you change the list view, the page submits the form which causes the page to lose it's state data.  The solution above uses cookies to dynamically store that data and grab it when the page refreshes to display the last tab the user was on before the page refreshed.

 

This was selected as the best answer
BhatiaBhatia

Thanks. It works.

Devendra SawantDevendra Sawant

 

Hi,

 

The above code works.

 

I have one requirement where list of Account Records is displayed.

 

When i click on particular record tabpanel with multiple tabs is opened. (Detail tab, Contact tab, Opporunity Tab )

 

You are navigating first account record.

 

Now you have completed working at Opportunity tab.(you have stopped navigating at Opportunity tab) and now you have clicked on new acount record, it will navigate to Opportuinities of Current record. Ideally it should navigate to the Detail of new Account record instead of Opportunity of New Account Record.

 

How to solve this issue? What changes are required into the above code?

 

It would be great help. Thanks in advance.

 

 

Cheers,

Devendra S

Nirmal ChristopherNirmal Christopher
Super cool its working