Sunday, February 1, 2015

How To Use the Apex:tabPanel In visualforce page

The Following attributes mandatory  for using tabPanel.

1.switchType="client"     value="{!CurrentTab}"
2.Here currentTab shows presentTab when you moving one tab to another tab.
3.<apex:tab/> attribute  name="Tab"[used for development],shows current tab name.and label shows the UI.



Default Tab is Account and when your click on Next button it will goes to account1 tab.

==============VISUALFORCE PAGE====================
<apex:page controller="tabpanelclass" showHeader="false">
   <apex:form >
    <apex:pageMessages id="errMsg" />
     <apex:tabPanel switchType="client" value="{!CurrentTab}" id="tabpanel">
        <apex:tab name="Tab" label="Account" labelWidth="200px" style="color:blue;font size:10px">
          <apex:pageBlock >
            <apex:pageBlockButtons >
              <apex:commandButton value="Next" action="{!tabMethod}" reRender="tabpanel,errMsg">
                <apex:param name="tabNext" value="Tab1"/>
              </apex:commandButton>
            </apex:pageBlockButtons>
          </apex:pageBlock>
        </apex:tab>
        <apex:tab name="Tab1" label="Account1" labelWidth="200px" >
            <apex:pageBlock >
            <apex:pageBlockButtons >
              <apex:commandButton value="Next" action="{!tabMethod1}" reRender="tabpanel">
                  <apex:param name="tabNext" value="Tab2"/>
              </apex:commandButton>
              <apex:commandButton value="Previous" action="{!tabMethod}" reRender="tabpanel">
                <apex:param name="tabNext" value="Tab"/>
              </apex:commandButton>
            </apex:pageBlockButtons>
          </apex:pageBlock>
        </apex:tab>
        <apex:tab name="Tab2" label="Account2" labelWidth="200px" >
          <apex:pageBlock >
            <apex:pageBlockButtons >
              <apex:commandButton value="Next" action="{!tabMethod2}" reRender="tabpanel">
                  <apex:param name="tabNext" value="Tab3"/>
              </apex:commandButton>
              <apex:commandButton value="Previous" action="{!tabMethod1}" reRender="tabpanel">
                  <apex:param name="tabNext" value="Tab1"/>
              </apex:commandButton>
            </apex:pageBlockButtons>
          </apex:pageBlock>
        </apex:tab>
        <apex:tab name="Tab3" label="Account3" labelWidth="200px" >
           <apex:pageBlock >
            <apex:pageBlockButtons >
              <apex:commandButton value="Next" action="{!tabMethod3}" reRender="tabpanel">
                 <apex:param name="tabNext" value="Tab4"/>
              </apex:commandButton>
              <apex:commandButton value="Previous" action="{!tabMethod2}" reRender="tabpanel">
                 <apex:param name="tabNext" value="Tab2"/>
              </apex:commandButton>
            </apex:pageBlockButtons>
          </apex:pageBlock>
        </apex:tab>
        <apex:tab name="Tab4" label="Account4" labelWidth="200px" >
           <apex:pageBlock >
            <apex:pageBlockButtons >
              <apex:commandButton value="Next" action="{!tabMethod4}" reRender="tabpanel">
                 <apex:param name="tabNext" value="Tab"/>
              </apex:commandButton>
              <apex:commandButton value="Previous" action="{!tabMethod3}" reRender="tabpanel">
                 <apex:param name="tabNext" value="Tab3"/>
              </apex:commandButton>
            </apex:pageBlockButtons>
          </apex:pageBlock>
        </apex:tab>
     </apex:tabPanel>
   </apex:form>
</apex:page>
=======================CONTROLLER==========================
public class tabpanelclass {

    public PageReference tabMethod4() {
        nextTabValue = Apexpages.currentPage().getParameters().get('tabNext');
        system.debug('@@@@@@@@@@@'+nextTabValue);
        CurrentTab=nextTabValue;
        return null;
    }


    public PageReference tabMethod3() {
        nextTabValue = Apexpages.currentPage().getParameters().get('tabNext');
        system.debug('@@@@@@@@@@@'+nextTabValue);
        CurrentTab=nextTabValue;
        return null;
    }


    public PageReference tabMethod2() {
        nextTabValue = Apexpages.currentPage().getParameters().get('tabNext');
        system.debug('@@@@@@@@@@@'+nextTabValue);
        CurrentTab=nextTabValue;
        return null;
    }


    public PageReference tabMethod1() {
        nextTabValue = Apexpages.currentPage().getParameters().get('tabNext');
        system.debug('@@@@@@@@@@@'+nextTabValue);
        CurrentTab=nextTabValue;
        return null;
    }


    public PageReference tabMethod() {
       nextTabValue = Apexpages.currentPage().getParameters().get('tabNext');
       system.debug('@@@@@@@@@@@'+nextTabValue);
        if(count>2)
       CurrentTab=nextTabValue;
      else{
        ApexPages.Message Msg = new ApexPages.Message(ApexPages.Severity.ERROR,'Error: Hai Ashok');
       ApexPages.addMessage(msg);
      }
       return null;
    }

    public integer count=1;
    public String CurrentTab { get; set; }
    public String nextTabValue{get;set;}
    public tabpanelclass(){
      CurrentTab='Tab';// IT SHWOS DEFAULT TAB NAME
    }
}

No comments:

Post a Comment