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
raj jordanraj jordan 

hi all, I have to create a vf page with account object as a tab and when we click on account tab its record should display in form of custom links and when we click on record link the fields which we want to populate should be displayed

 I have to create a vf page with account object as a tab and when we click on account tab its record should display in form of custom links and when we click on record link the fields which we want to populate should be displayed

please help me to achieve this

Thanks in Advance
Rohan Gupta 4Rohan Gupta 4
My visualforce look likes.

User-added image

 Visualforce Page
           
<apex:page showHeader="false" sidebar="false" standardController="Account" extensions="AccView">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <apex:form >
      <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
            <apex:tab label="Account" name="name1" id="tabOne">
                <div class='col-sm-5'>
                <apex:outputPanel layout="block" style="overflow:auto;height:550px" >
                  <apex:pageBlock >
                      <table class="table table-hover">
                            <thead>
                              <tr>
                                <th style='font-size:20px'>Account Records</th>
                              </tr>
                            </thead>
                            <tbody>
                                <apex:repeat var="a" value="{!accList}">
                                    <tr>
                                        <td>
                                          <li style='list-style:none;font-size:15px;text-decoration:none'>
                                              <apex:commandLink value="{!a.Name}" action="{!show}">
                                                  <apex:param name="acIdParam" value="{!a.id}" assignTo="{!acId}"/>
                                              </apex:commandLink>
                                          </li>
                                         </td>
                                    </tr>
                                </apex:repeat>
                            </tbody>
                      </table>  
                  </apex:pageBlock>
                </apex:outputPanel>
              </div>
                  
              <div class='col-sm-7'>
               <div class='col-sm-6'>
                  <apex:outputPanel layout="block" style="overflow:auto;height:550px" >
                    <apex:pageBlock >
                       <table class="table table-hover">
                        <thead>
                          <tr>
                            <th style='font-size:20px'>Fields</th>
                          </tr>
                        </thead>
                        <tbody>
                          <apex:repeat var="b" value="{!accField}">
                              <tr>
                                  <td>
                                      <li style='list-style:none;font-size:15px;text-decoration:none'>
                                          <apex:commandLink value="{!b}" action="{!sh}" reRender="lab">
                                              <apex:param name="fetchParam" value="{!b}" assignTo="{!fetch}"/>
                                          </apex:commandLink>
                                      </li>
                                  </td>
                              </tr>
                        </apex:repeat>  
                        </tbody>
                      </table> 
                  </apex:pageBlock>
                  </apex:outputPanel>
                  </div>
                  
                  <div class='col-sm-6 form-group'> 
                    <apex:pageBlock id="lab">
                        <table class="table table-hover">
                            <thead>
                              <tr>
                                <th style='font-size:20px'>Details</th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style='font-size:16px;color:darkblue'>
                                       <b>{!fetch}</b>
                                    </td> 
                                    </tr>
                                    <tr>
                                    <td style='font-size:17px;color:green;font-family:verdena'>
                                        {!s}
                                    </td>
                                    </tr>
                            </tbody>
                      </table>    
                    </apex:pageBlock>
                  </div>
              </div>
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
</apex:page>
Controller
  
public with sharing class AccView 
{
    public List<Account> accList {get;set;}
    public List<Account> accDetail {get;set;}
    public List<sObject> accDetail1 {get;set;}
    public List<String> accField {get;set;}
    
    public String query {get;set;}
    public String query1 {get;set;}
    public String acId {get;set;}
    public String fetch {get;set;}
    public String s {get;set;}
    public String SobjectApiName {get;set;}
    public String commaSepratedFields {get;set;}
    public Integer flag;
    public Integer flag1;
    
    public AccView(ApexPages.StandardController controller) 
    {
        SobjectApiName = 'Account';
        commaSepratedFields = '';
        acId = '';
        fetch = 'Select Any Record';
        flag = 0;
        flag1 = 0;
        accField = new List<String>();
        
        Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
        Map<String, Schema.SObjectField> fieldMap = schemaMap.get(SobjectApiName).getDescribe().fields.getMap();
        
        for(String fieldName : fieldMap.keyset())
        {
            if(commaSepratedFields == null || commaSepratedFields == '')
            {
                commaSepratedFields = fieldName;
            }
            else
            {
                commaSepratedFields = commaSepratedFields + ', ' + fieldName;
            }
            accField.add(fieldName);
        }
 
        query = 'select ' + commaSepratedFields + ' from ' + SobjectApiName;
        accList = Database.query(query);
    }
    
    public void show()
    {
        
        s = '';
        flag = 1;
        
        if(flag == 1)
        {
            query = 'select ' + commaSepratedFields + ' from '+ SobjectApiName;
            accDetail = Database.query(query);
            flag = 2;
            flag1 = 1;
            
        }
        if(flag == 2 && flag1 == 1)
        {
            fetch = 'Select Any Field';
        }   
    }
    
    public void sh()
    {
        flag = 3;
        if(flag == 3 && flag1 == 1)
        {
            fetch = fetch.capitalize();
            accDetail1 = Database.query('SELECT '+fetch+' FROM Account WHERE Account.id =\'' + acId+ '\' limit 1');
            for(SObject record : accDetail1)
                s = ' '+record.get(fetch);
                
                flag = 4;
        }
        else if(flag == 3 && flag1 == 0)
        {
            fetch = 'Select Any Record';
        }    
    }
}


 
raj jordanraj jordan
Thanks Rohan for ur solution
if i click on the record link can wedirectly display the required fields data?
Rohan Gupta 4Rohan Gupta 4
Which field you want to display. Please mention it.
raj jordanraj jordan
account name and phone
Rohan Gupta 4Rohan Gupta 4
When you clicks on a Account's record, it will display the fields data of selected record.

User-added image

Visualforce page 
<apex:page showHeader="false" sidebar="false" standardController="Account" extensions="AccView1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <apex:form >
      <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
            <apex:tab label="Account" name="name1" id="tabOne">
                <div class='col-sm-5'>
                <apex:outputPanel layout="block" style="overflow:auto;height:550px" >
                  <apex:pageBlock >
                      <table class="table table-hover">
                            <thead>
                              <tr>
                                <th style='font-size:20px'>Account Records</th>
                              </tr>
                            </thead>
                            <tbody>
                                <apex:repeat var="a" value="{!accList}">
                                    <tr>
                                        <td>
                                          <li style='list-style:none;font-size:15px;text-decoration:none'>
                                              <apex:commandLink value="{!a.Name}" action="{!show}" reRender="ref">
                                                  <apex:param name="acIdParam" value="{!a.id}" assignTo="{!acId}"/>
                                              </apex:commandLink>
                                          </li>
                                         </td>
                                    </tr>
                                </apex:repeat>
                            </tbody>
                      </table>  
                  </apex:pageBlock>
                </apex:outputPanel>
              </div>
                  
              <div class='col-sm-7'>
                  <apex:outputPanel layout="block" style="overflow:auto;height:550px;font-size:13px;" >
                    <apex:pageBlock id="ref">
                          <apex:repeat value="{!accDetail}" var="b">
                              <apex:detail subject="{!b}" relatedList="false" title="false" inlineEdit="true"/>
                          </apex:repeat>
                  </apex:pageBlock>
                  </apex:outputPanel>
                 
              </div>
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
</apex:page>
Controller 
public with sharing class AccView1 {

    public List<Account> accList {get;set;}
    public List<Account> accDetail {get;set;}
    public String query {get;set;}
    public String acId {get;set;}
    public String SobjectApiName {get;set;}
    public String commaSepratedFields {get;set;}
    
    public AccView1(ApexPages.StandardController controller) 
    {
        SobjectApiName = 'Account';
        commaSepratedFields = '';
        acId = '';
        
        Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
        Map<String, Schema.SObjectField> fieldMap = schemaMap.get(SobjectApiName).getDescribe().fields.getMap();
        
        for(String fieldName : fieldMap.keyset())
        {
            if(commaSepratedFields == null || commaSepratedFields == '')
            {
                commaSepratedFields = fieldName;
            }
            else
            {
                commaSepratedFields = commaSepratedFields + ', ' + fieldName;
            }
        }
 
        query = 'select ' + commaSepratedFields + ' from ' + SobjectApiName;
        accList = Database.query(query);
    }
    
    public void show()
    {
            accDetail = Database.query('SELECT '+commaSepratedFields+' FROM Account WHERE Account.id =\'' + acId+ '\' limit 1');
    }
}

I hope it helps you.

 
Rohan Gupta 4Rohan Gupta 4
If you want to display only Account Name and Phone then replace this visualforce page with previous one. 
<apex:page showHeader="false" sidebar="false" standardController="Account" extensions="AccView1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <apex:form >
      <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
            <apex:tab label="Account" name="name1" id="tabOne">
                <div class='col-sm-5'>
                <apex:outputPanel layout="block" style="overflow:auto;height:550px" >
                  <apex:pageBlock >
                      <table class="table table-hover">
                            <thead>
                              <tr>
                                <th style='font-size:20px'>Account Records</th>
                              </tr>
                            </thead>
                            <tbody>
                                <apex:repeat var="a" value="{!accList}">
                                    <tr>
                                        <td>
                                          <li style='list-style:none;font-size:15px;text-decoration:none'>
                                              <apex:commandLink value="{!a.Name}" action="{!show}" reRender="ref">
                                                  <apex:param name="acIdParam" value="{!a.id}" assignTo="{!acId}"/>
                                              </apex:commandLink>
                                          </li>
                                         </td>
                                    </tr>
                                </apex:repeat>
                            </tbody>
                      </table>  
                  </apex:pageBlock>
                </apex:outputPanel>
              </div>
                  
              <div class='col-sm-7'>
                  <apex:outputPanel layout="block" style="overflow:auto;height:550px;font-size:13px;" >
                    <apex:pageBlock id="ref" title="Details">
                          <apex:pageBlockTable value="{!accDetail}" var="b">
                            <apex:column headerValue="Account Name" value="{!b.name}"/>
                                <apex:column headerValue="Phone" value="{!b.phone}"/>
                           </apex:pageBlockTable>
                    </apex:pageBlock>
                  </apex:outputPanel>
                 
              </div>
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
</apex:page>

 
raj jordanraj jordan
Thanks Rohan for ur reply.

As the records are displaying when we save the page
can we display the records when we click on the tab?
firstly when we save the page it should show only tab and when we click on the tab its record should display, is it possible?