+ Start a Discussion
SujanSaiSujanSai 

Tabs in salesforce

Hi all,
How to createatabbed view in Visualforce page..Please help

Thanks in advance,
Sujan
Himanshu Jasuja 9Himanshu Jasuja 9
Hi surya,

This content has been retired. An updated version of this content can be found in Overriding an Existing Page with a Visualforce Page in the Visualforce Developer's Guide
Try this link:-
https://developer.salesforce.com/page/Tabbed_Accounts_in_30_seconds
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_quick_start_tabs.htm

Hope this helps you.Please mark as a best anwser if its solve your problem.
DeepthiDeepthi (Salesforce Developers) 
Hi Surya,

You can check the below code:
<apex:page controller="TabbedViewControl">
 <apex:tabPanel value="{!selecttab1}" switchType="client" id="theTabPanel">
<!-----------Customer personal information------------>
<apex:tab label="Personal information" name="per" id="one">
  <apex:form >
 <apex:pageBlock >
 <apex:pageBlockButtons location="bottom">
 <apex:commandButton value="next" action="{!next1}"/>
 </apex:pageBlockButtons>
 <fieldset>
 <legend> Customer Details</legend>
<table cellspacing='15'>
<tr><th>First Name</th>
 <td><apex:inputField value="{!c.salutation__c}"/>&nbsp;&nbsp;
 <apex:inputField value="{!c.First_name__c}"/></td>
 <th>Last Name</th>
 <td><apex:inputField value="{!c.Lastname__c}"/></td>
 </tr>
 
 <tr><th>Email</th>
 <td><apex:inputField value="{!c.Email__c}"/></td>
 <th>Mobile Number</th>
 <td><apex:inputField value="{!c.phone_number__c}"/></td></tr>
 <tr>
 <th>Product Image</th>
 <td><apex:inputField value="{!c.product_image__c}">
 <!--<apex:image id="img" value="http://static13.jassets.com/p/Swiss-Eagle-Swiss-made-Field-SE-6033-22-Silver2FWhite-Analog-Watch-0847-155532-1-catalog.jpg"/>-->
 </apex:inputField>
 </td></tr>
 </table>

 </fieldset>
 </apex:pageBlock>
 </apex:form>
 </apex:tab>
 
 <apex:tab label="Address" name="add12" id="two">
 <apex:form >
 <apex:pageBlock rendered="{!input}">

 <apex:pageBlockButtons location="bottom">
 <apex:commandButton value="Save" action="{!save}"/>
 </apex:pageBlockButtons>

 <fieldset>
 <legend>Customer Address</legend>
 
 <table cellspacing='15'>
 <tr>
 <th>Billing Street</th><td><apex:inputField value="{!c.Billing_Street__c}"/> </td>
 <th>Billing City</th><td><apex:inputField value="{!c.Billing_City__c}"/></td>
 </tr>
 
 <tr>
 <th>Billing State</th>
 <td><apex:inputField value="{!c.billing_state1__c}"/></td>
 <th>Postal Code</th><td><apex:inputField value="{!c.Billing_Postal_Code__c}"/></td>
</tr>
</table>

 </fieldset>
</apex:pageBlock>
<apex:pageBlock ><apex:pageBlockSection rendered="{!output}">
<apex:outputField value="{!c.First_name__c}"/>
<apex:outputField value="{!c.Lastname__c}"/>
 
<apex:outputField value="{!c.Email__c}"/>
<apex:outputField value="{!c.phone_number__c}"/>
<apex:outputField value="{!c.Billing_Street__c}"/>
<apex:outputField value="{!c.Billing_City__c}"/>
<apex:outputField value="{!c.billing_state1__c}"/>
<apex:outputField value="{!c.Billing_Postal_Code__c}"/>
</apex:pageBlockSection>
 </apex:pageBlock>
 </apex:form>


 </apex:tab>
 </apex:tabPanel>
 </apex:page>
 
public with sharing class TabbedViewControl {

    public boolean input { get; set; }

    public PageReference next1() {
     selecttab1 ='add12';
        return null;
    }

    

    public String selecttab1 { get; set; }

    public PageReference save() {
   insert c;
   output=true;
   input=false;
        return null;
    }


    public boolean output { get; set; }

    public customer__C c { get; set; }
    public TabbedViewControl(){
        selecttab1 ='per';
     c= new customer__c();
     output=false;
     input=true;
    } 
}

Hope this helps you!
Best Regards,
Deepthi
JyothsnaJyothsna (Salesforce Developers) 
Hi Surya,

Please check the below developer forum link for best example of tabbed view in visualforce page with screenshots.

https://developer.salesforce.com/forums/ForumsMain?id=906F0000000DD5EIAW

Hope this helps you!
Best Regards,
Jyothsna