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
DSLDSL 

How to use switchType

Hi,

I'm having troubles with the switchType part of a tabPanel. I can't tell a difference between ajax and server, and client breaks my page by making everything centered and not letting me click any tabs.

I'm trying to have the controller force a tab change by using selectedTab="{!selectedTab}", then having the controller simply change that selectedTab variable. Has anyone made that work?

Also, does anyone have a sample style sheet to change that default green color?

Thanks!
dsl
Ron HessRon Hess
the trick is to bind to the value property

here is a working sample, slightly modified from the documentation


Code:
<apex:page showHeader="true" tabStyle="account" controller="tryTabs" >

        <!-- Define Tab panel .css styles -->
        <style>
                .activeTab {background-color: #236FBD; color:white; background-image:none}
                .inactiveTab { background-color: lightgrey; color:black; background-image:none}
        </style>

        <!-- Create Tab panel -->
        <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
                                  tabClass="activeTab" inactiveTabClass="inactiveTab" value="{!whichTab}" >
                <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
                <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
        </apex:tabPanel>
</apex:page>

 

controller:
Code:
public class tryTabs {

    public String getWhichTab() {
        return 'name2';
    }

}

 
andresperezandresperez

The SwitchType property of a TabPanel has three different options: Client, Server and Ajax.

To explain the difference between all of them, I have built a small sample:

This is my page:
<apex:page controller="aaTest">
    <apex:form>
        <apex:tabPanel switchType="client">
            <apex:tab label="Tab 1"><apex:inputText value="{!A1}" /></apex:tab>
            <apex:tab label="Tab 2"><apex:inputText value="{!A1}" /></apex:tab>
        </apex:tabPanel>        
        <apex:tabPanel switchType="server">
            <apex:tab label="Tab 1"><apex:inputText value="{!A2}" /></apex:tab>
            <apex:tab label="Tab 2"><apex:inputText value="{!A2}" /></apex:tab>
        </apex:tabPanel>
    
        <apex:tabPanel switchType="ajax">
            <apex:tab label="Tab 1"><apex:inputText value="{!A3}" /></apex:tab>
            <apex:tab label="Tab 2"><apex:inputText value="{!A3}" /></apex:tab>
        </apex:tabPanel>
    </apex:form>
</apex:page>
It uses this controller:
public class aaTest {
    private String A1 = '';
    private String A2 = '';
    private String A3 = '';
    
    public String getA1() { return A1; }
    public String getA2() { return A2; }
    public String getA3() { return A3; }
    public void setA1(String A1) { this.A1 = A1; }
    public void setA2(String A2) { this.A2 = A2; }
    public void setA3(String A3) { this.A3 = A3; }
}

To understand how this works, try one tabPanel at a time.

  1. Select "Tab 1"
  2. Write something on the inputText box
  3. Switch to the "Tab 2"
  4. This is where the real differences appear.

For SwitchType="Client": The inputText box on "Tab 2" does not get filled.

For SwitchType="Server": The inputText box  on "Tab 2" does indeed get filled, but the entire page gets refreshed.

For SwitchType="Ajax": The inputText box  on "Tab 2" does indeed get filled, but the only a section of the page gets refrehed.
DSLDSL
Thanks Ron, that did the trick!
MrTheTylerMrTheTyler

Andres,

 

I found your explanation very helpful.  Your example should be added to the the vForce documenation since it isn't helpful on this topic at all.

 

 

Regards,

 

Tyler
IronDukeIronDuke

This is one of the very few threads I've seen discussing the switchType attribute on the tabPanel, so I figured I'd contribute the problem I had today in the hopes that someone will find it useful.

 

Today I ran into a problem where I had identical selectLists across five different tabs, but the controller variable would not update according to the value in the SelectList unless I changed the SelectList on the last tab. After a lot of experimenting, I finally figured out that it was being caused by the  switchType="client" attribute on the tabPanel. If I had to guess, I'd say that all of my SelectLists were being laoded simutaniously, and since only one of them could be linked back to controller variable, only the SelectList on the last tab was actually functional.

 

Switching to ajax or server as the switchType did fix the problem, but I wanted to keep the fast load times between tabs, and so I solved the problem by creating five different variables in the controller, one for each tab's SelectList. I won't say it was the cleanest solutions, but it fixed the problem without sacrificing speed when changing tabs.

 

Hope this was helpful, and I'd be happy to hear if anyone has a better solution!
sekhar rajasekhar raja

use switch type="client" for better performance
ganeshsfdc1@gmail.comganeshsfdc1@gmail.com

thank you for  your example.
diegooteguidiegootegui

Hi.. i am from argentina and I am not a developer but I had to study and try new things sometimes without understanding what I am doing.

I have been using "client" and that works fine for the speed but in some of the pages that are included in the tabs we are using more menus of the following sort that I put later on.. but the problem is that with this vertical menues tha pages do not work as all the content of each section appear one below the other.. any suggestions?

 

<ul class="nav nav-tabs" id="tabnav" style="width:130px" align="left">
<li class="active"><a class="active" href="#tab1">Introducción</a></li>
<li><a href="#tab2">El Compromiso</a></li>
<li><a href="#tab4">El Voluntario</a></li>
<li><a href="#tab6">La Tecnología</a></li>
<li><a href="#tab7">Los Puestos</a></li>
<li><a href="#tab8">Las Noticias</a></li>
<li><a href="#tab9">Próximos Pasos</a></li>

</ul>

and then 

<div id="tabs" align="left">
<div class="tab-pane" id="tab1"><a name="tab1"></a>
Lakshmi SLakshmi S
Hi andresperez,
Thanks for your explanation on switch type.
Akash Biswas 9Akash Biswas 9
@andresperez thanku very much for this example this helped me a lot for clearing my doubts .
But I have one another prob ....
Iam using a command button inside a tab (tabpanel switchType='client') and the command button is not working.
can you plz help me out...