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
CoderCoder 

Button click move to next and previous tabs

Hello Friends ,

 

               Im Creating an application where  ihave a tabpannel in which having 3 ot 4 tabs where my logic is if i enter the details in the tab and click next button next tab should be displayed. and remaining all the other tabs should become disabled. andtheremaining tabs is also follows the same proceedure where  i should navigate through the tabs using next and previous buttons only. If  any body knows how to do it can pls explain me . i went through almost all the codes that are in discussion board but i dint get it. 

 

-----------------------------------------------------------

THIS IS MY visuial force code

 

<apex:page standardController="Application__c" showHeader="false" sidebar="false" extensions="appex2">
   <script>
        .activeTab
        {
            background-color: #861515;
            color: white;
            background-image: none;
        }
        .inactiveTab
        {
            background-color: #E8E8E8;
            color: black;
            background-image: none;
        }

/*        function nexttab(tabid)
        {
           document.getElementById(maintab).selectedTab='Contact_details';
        }*/
      
    </script>

    <apex:pageblock title="EduForce" mode="edit">

    <!--Creating Tabs For Personal Details-->
        <apex:tabPanel switchType="client" id="maintab" tabClass="activeTab" inactiveTabClass="inactiveTab" value="{!TabInFocus}" >
            <apex:tab id="pdtab" label="Personal Details" rendered="true" name="Personal_Details">
            <apex:pageBlockSection title="Personal Details">
    <apex:form >
           
                </p><apex:outputLabel value="First Name"/></p>
                <apex:inputField value="{!Application__c.First_Name__c}"/>
               
                <p><apex:outputLabel value="Middle Name"/></p>
                <apex:inputField value="{!Application__c.Middle_Name__c}"/>
               
                <p><apex:outputLabel value="Last Name"/></p>
                <apex:inputField value="{!Application__c.Last_Name__c}"/>
               
                <p><apex:outputLabel value="Age"/></p>
                <apex:inputField value="{!Application__c.Age__c}"/>
               
                <p><apex:outputLabel value="Gender"/></p>
                <apex:inputField value="{!Application__c.Gender__c}" required="true"/>
               
                <p><apex:outputLabel value="Nationality"/></p>
                <apex:inputField value="{!Application__c.Country_Of_Citizenship__c}"/>
               
                <Apex:commandButton value="NEXT"  action="{!nexttab}"  />
                <apex:commandButton value="Cancel"  action="{!nothing}" />

/* HERE I DINT UNDERSTAND Whether Javascipt "onclick=nexttab(contact_Details) "to use or apex code  and  what to do next*/

           </apex:form>
           </apex:pageBlockSection>
            </apex:tab>
           
            <!--Creating a tab for Contact Details-->
            <apex:tab id="cdtab" label="Contact Details" name="Contact_Details">
            <apex:pageBlockSection title="Mailing Address">
            <apex:form >          
                <apex:outputLabel value="Address Line 1"/>
                <apex:inputfield value="{!Application__c.Address_Line_1__c}"/></br>              
                <apex:outputLabel value="Address Line 2"/>
                <apex:inputfield value="{!Application__c.Address_Line_2__c}"/></br>              
                <apex:outputLabel value="Address Line 3"/>
                <apex:inputfield value="{!Application__c.Address_Line_3__c}"/></br>               
                <apex:outputLabel value="City / Town"/>
                <apex:inputfield value="{!Application__c.City_Town__c}"/></br>              
                <apex:outputLabel value="State / Province"/>
                <apex:inputfield value="{!Application__c.State_Province__c}"/></br>               
                <apex:outputLabel value="Country"/>
                <apex:inputfield value="{!Application__c.Country__c}"/></br>              
                <apex:outputLabel value="Postal Code / Zip Code"/>
                <apex:inputfield value="{!Application__c.Zip_Code__c}"/></br>           
            </apex:form>
            </apex:pageBlockSection>           
            <apex:pageBlockSection title="Email Contact">
            <apex:form >          
                <apex:outputLabel value="Email Address"/>
                <apex:inputfield value="{!Application__c.E_Mail_ID__c}"/></br>           
            </apex:form>
            </apex:pageBlockSection>
            </apex:tab>

.......

.

.

 

.

.

</apex:page>

 

 

--------------------------------------------------------

my Apex code

 

String TabInFocus = System.currentPageReference().getParameters().get('tab');
    public void nexttab()
    {
        string x=System.currentPageReference().getParameters().get('Contact_Details');
        TabinFocus=x;
        //document.getElementById('{!$Component.maintab}').selectedTab='Contat_details';

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

 

----------------------------------------------

IF ANY BODY KNOW PLEASE HELP ME 

Best Answer chosen by Admin (Salesforce Developers) 
sfdcfoxsfdcfox

There's a pure Visualforce way to do this. Observe the following:

 

Page:


<apex:page controller="theController">
<apex:form >
<apex:tabPanel id="tabPanel" selectedTab="{!selectedTab}">
  <apex:tab title="tab1" label="tab 1" id="tab1" disabled="{!istab1disabled}">
    <apex:commandButton value="Next" action="{!enabletab2}" rerender="tabPanel"/>
  </apex:tab>
  <apex:tab title="tab2" label="tab 2" id="tab2" disabled="{!istab2disabled}">
    <apex:commandButton value="Previous" action="{!enabletab1}" rerender="tabPanel" />
  </apex:tab>
</apex:tabPanel>
</apex:form>
</apex:page>


 

Controller:


public class theController {

    public theController() {
        selectedTab = 'tab1';
    }
   private string selectedtab;

  public boolean getistab1disabled() {
    return selectedTab <> 'tab1';
  }

  public boolean getistab2disabled() {
    return selectedTab <> 'tab2';
  }

  public void enabletab1() {
    selectedtab = 'tab1';
  }

  public void enabletab2() {
    selectedtab = 'tab2';
  }

  public string getselectedtab() {
     return selectedtab;
  }
}


As you can see, the tabs will automatically disable, so only the current tab is "active". The next and previous buttons will automatically re-enable the next or previous tab, respectively.

All Answers

metaforcemetaforce

See if this will solve your problem:

 

<script>
if ('{!$CurrentPage.parameters.currentTab}' != '')
{
if (RichFaces && RichFaces.panelTabs['{!$Component.mainTabs}'])
{
var tabs = RichFaces.panelTabs['{!$Component.mainTabs}'];
for (var i = 0; i < tabs.length; i++)
{
if (tabs[i].name == '{!$CurrentPage.parameters.currentTab}')
{
RichFaces.switchTab('{!$Component.mainTabs}', tabs[i].id, tabs[i].name);
break;
}
}
}
}
</script>

 

Refer the link here for more detials.

 

AD

-------------------------------------------------------------------------------

Mark it as an accepted solution if it works and help the community
sfdcfoxsfdcfox

There's a pure Visualforce way to do this. Observe the following:

 

Page:


<apex:page controller="theController">
<apex:form >
<apex:tabPanel id="tabPanel" selectedTab="{!selectedTab}">
  <apex:tab title="tab1" label="tab 1" id="tab1" disabled="{!istab1disabled}">
    <apex:commandButton value="Next" action="{!enabletab2}" rerender="tabPanel"/>
  </apex:tab>
  <apex:tab title="tab2" label="tab 2" id="tab2" disabled="{!istab2disabled}">
    <apex:commandButton value="Previous" action="{!enabletab1}" rerender="tabPanel" />
  </apex:tab>
</apex:tabPanel>
</apex:form>
</apex:page>


 

Controller:


public class theController {

    public theController() {
        selectedTab = 'tab1';
    }
   private string selectedtab;

  public boolean getistab1disabled() {
    return selectedTab <> 'tab1';
  }

  public boolean getistab2disabled() {
    return selectedTab <> 'tab2';
  }

  public void enabletab1() {
    selectedtab = 'tab1';
  }

  public void enabletab2() {
    selectedtab = 'tab2';
  }

  public string getselectedtab() {
     return selectedtab;
  }
}


As you can see, the tabs will automatically disable, so only the current tab is "active". The next and previous buttons will automatically re-enable the next or previous tab, respectively.
This was selected as the best answer
simhasimha

THANK you Very much Ur COde is working Fine I got the Result.

But when I click the Previous button Instead of going to previous page its first checking for validation,If all the fields are entered then only its redirecting to previous page.

yvk431yvk431

In order to skip the validation for a button click use the commandbutton attribute immidiate = "true"

Hope this is what you are looking for!

 

cheers

neckrneckr

I am having trouble implementing the code.  Can you display an example of how the code is used with 4 or more tabs?

sfdcfoxsfdcfox

 

<apex:page controller="multiTabDisableController">
    <apex:form >
        <apex:tabPanel selectedTab="{!currentTab}" id="tabPanel" switchType="client" immediate="true">
            <apex:tab label="Page 1" disabled="{!currentTab<>'1'}">
                This is tab 1 content.<br/>
                <apex:inputText /><br/>
                <apex:commandButton value="Next" action="{!nextTab}" reRender="tabPanel"/>
            </apex:tab>
            <apex:tab label="Page 2" disabled="{!currentTab<>'2'}">
                This is tab 2 content.<br/>
                <apex:inputText /><br/>
                <apex:commandButton value="Prev" action="{!prevTab}" reRender="tabPanel"/>
                <apex:commandButton value="Next" action="{!nextTab}" reRender="tabPanel"/>
            </apex:tab>
            <apex:tab label="Page 3" disabled="{!currentTab<>'3'}">
                This is tab 3 content.<br/>
                <apex:inputText /><br/>
                <apex:commandButton value="Prev" action="{!prevTab}" reRender="tabPanel"/>
                <apex:commandButton value="Next" action="{!nextTab}" reRender="tabPanel"/>
            </apex:tab>
            <apex:tab label="Page 4" disabled="{!currentTab<>'4'}">
                This is tab 4 content.<br/>
                <apex:inputText /><br/>
                <apex:commandButton value="Prev" action="{!prevTab}" reRender="tabPanel"/>
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
</apex:page>

 

public class multiTabDisableController {
    public String currentTab { get; set; }
    
    {
        currentTab = '1';
    }
    
    public void nextTab() { currentTab = String.valueOf(Integer.valueOf(currentTab)+1); }
    public void prevTab() { currentTab = String.valueOf(Integer.valueOf(currentTab)-1); }
}

Try out this code. It's a four-tab setup, and I made it a bit shorter than the last version. Just tested this in my dev org, it works.

 

 

neckrneckr

Thanks for the code sample. I got it working :).  I just realized that using the disabled attribute in the tab component disables all my non-active tabs and does not allow the user to self navigate using the tab labels as I had previously.  I need to give the user the flexibility to self navigate if they do not want to walk through all the steps.  Is there an attribute I can use to provide this?

 

Thanks again!

sfdcfoxsfdcfox

You'd not go through all this hassle; keep the nextTab and prevTab routines (see my example), but just take out the disabled attribute (it defaults to false, and thus would make the tabs available for clicking). The original poster wanted to have the tabs disabled so that the user had to use the navigation buttons.

Neha@SfdcNeha@Sfdc
thankyou sfdcfox your code helped a lot........