Display Objects Data in Tabs using Tabpanel in Visualforce Salesforce

By | October 20, 2019

Apex Controller

public class DisplayDatausingtabpanel {
    
    List<DataLoadTest__c> dlt = new List<DataLoadTest__c>();
    
    public List<DataLoadTest__c> getDataloadtestrecords() {
        dlt=[select Id,name,city__c,country__c,phone__c from DataLoadTest__c];
        return dlt;
    }
    
    List<Testing__c> test = new List<Testing__c>();
    
    public List<Testing__c> getTestingrecords() {
        test=[select Id,name,city__c from Testing__c];
        return test;
    }
}

Vf Page

<apex:page sidebar="false" controller="DisplayDatausingtabpanel">
  <apex:form >
      <!-- Tabpanel used for displaying data in tabs  -->
      <apex:tabpanel >
          <apex:tab label="Testing Data">
              <!-- Logic for displaying the Testing Data -->
              <apex:pageblock >
                  <apex:pageblocksection >
                      <apex:pageblocktable value="{!testingrecords}" var="tr">
                          <apex:column headerValue="Name">{!tr.Name}</apex:column>
                          <apex:column headerValue="City">{!tr.City__c}</apex:column>
                      </apex:pageblocktable>
                  </apex:pageblocksection>
              </apex:pageblock>
          </apex:tab>
          <apex:tab label="DataLoadTest Data">
              <!-- Logic for Displaying the DataLoadTest Data -->              
              <apex:pageblock >
                  <apex:pageblocksection >
                      <apex:pageblocktable value="{!dataloadtestrecords}" var="dr">
                          <apex:column headerValue="Name">{!dr.Name}</apex:column>
                          <apex:column headerValue="City">{!dr.City__c}</apex:column>
                          <apex:column headerValue="Country">{!dr.City__c}</apex:column>
                          <apex:column headerValue="Phone">{!dr.Phone__c}</apex:column>                          
                      </apex:pageblocktable>
                  </apex:pageblocksection>
              </apex:pageblock>
          </apex:tab>
      </apex:tabpanel>
  </apex:form>
</apex:page>

Output

click on selected tab, then it will show you the selected sobject data using tabs.

Leave a Reply

Your email address will not be published. Required fields are marked *