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
SattibabuSattibabu 

How to read picklist options values dynamically and display details of each option in the same VF Page

How to dynamically get values of options we select from PICKLIST . For example I have an account picklist on my VF page which has all the account names as pick list option values. Whenever I select account name from pick list , respective account details like accountname, contact name, oppty name should populate dynamically on the same VF page.

Detailed Description of the requirement :
1. A drop down on Accounts
2. On selecting a particular Account need to get following details:
      A. Opportunities associated with that account
      B. Contact Person for that opportunity- Name if one contact person, number with embedded hyperlink in case of more than one( Hyperlink                should lead to all contact with following information  : Name, Account , Email id)
      C. Lead Name if opportunity has originated from Lead Conversion    
      ​D. Lead Owner of that particular lead.


I can able to dynamically get account values from controller class to Account picklist in VF page, but I don’t know how to display account details(each account we select in picklist) in the same VF page of other section.

Please check my below incomplete VF page and Controller class: 
<---VF Page to To get Account PickList and to display each account details: --->

<apex:page controller="AccountDetails">

  <apex:form >
  <apex:pageblock title="AccountDetails" id="camps_list">
  <table style="width: 100%"><tr>
  <td>

          <apex:outputLabel value="Account Name:"/>
          <apex:selectList value="{!filterid}" size="1">
          <apex:actionSupport event="onchange" action="{!fetchRecords}"  rerender="cases_table"/>
          <apex:selectOptions value="{!AccountList}"></apex:selectOptions>
          </apex:selectList>
 </td>
 
 <td>
  No Of Records Displayed:
<apex:selectList value="{! PageSize }" size="1" id="sl">
    <apex:selectOption itemValue="5" itemLabel="5"/>
    <apex:selectOption itemValue="20" itemLabel="20"/>
    <apex:actionSupport event="onchange" reRender="contacts_list"/>
</apex:selectList>

 </td>
</tr>
</table>
</apex:pageBlock>

<apex:pageBlock >

<h1>AccountRelated List records</h1>

</apex:pageblock>
 
  </apex:form>
</apex:page>

<----Controller Class--->

public without sharing class AccountDetails 
{

    public String results { get; set; }

    public String filterid { get; set; }

    public String fetchRecords { get; set; }
    public String PageSize { get; set; }
    public List<Account> accts = new List<Account>();
    public List<Contact> listContacts {get;set;}
    public List<Case> listCases {get;set;}
    public List<Opportunity> listOpptys {get;set;}
    public String selectedAcctId {get;set;}

    public AccountDetails()
    {
    
    }
    
    public List<SelectOption> AccountList
    {
        get
        {
            accts = [Select u.name, u.Id From Account u];
            
            AccountList = new List<SelectOption>();
            
            for(Account tempacct: accts)
            {
                AccountList.add(new SelectOption(tempacct.Id, tempacct.Name));
            }
            return AccountList;
        }
        set;
    }
    
   public void fetchRecords() {
        
    }
    
}
Please can someone help me on it
 
Swayam AroraSwayam Arora
Hi Sattibabu,

You can achieve this using Javascript Remoting. I am adding a sample code to show how it works.
  
<apex:page controller="AccountDetails">

  <apex:form >
  <script>
  function callControllerMethod() {
      Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.AccountDetails.fetchRecords}',
            function(result, event){
                if (event.status) {
                    alert(result);
                } else if (event.type === 'exception') {
                    alert(event.message);
                }
            }, {escape: true}
        );
    }
  </script>
  <apex:pageblock title="AccountDetails" id="camps_list">
  <table style="width: 100%"><tr>
  <td>
          <apex:outputLabel value="Account Name:"/>
          <apex:selectList value="{!filterid}" size="1" onchange="callControllerMethod()">
          <apex:selectOptions value="{!AccountList}"></apex:selectOptions>
          </apex:selectList>
 </td>
 <td>
  No Of Records Displayed:
<apex:selectList value="{! PageSize }" size="1" id="sl">
    <apex:selectOption itemValue="5" itemLabel="5"/>
    <apex:selectOption itemValue="20" itemLabel="20"/>
    <apex:actionSupport event="onchange" reRender="contacts_list"/>
</apex:selectList>
 </td>
</tr>
</table>
</apex:pageBlock>
<apex:pageBlock >
<h1>AccountRelated List records</h1>
</apex:pageblock>
  </apex:form>
</apex:page>



Controller:-


global without sharing class AccountDetails 
{
    public String results { get; set; }
    public String filterid { get; set; }
    public String fetchRecords { get; set; }
    public String PageSize { get; set; }
    public List<Account> accts = new List<Account>();
    public List<Contact> listContacts {get;set;}
    public List<Case> listCases {get;set;}
    public List<Opportunity> listOpptys {get;set;}
    public String selectedAcctId {get;set;}

    public AccountDetails()
    {
    
    }
    
    public List<SelectOption> AccountList
    {
        get
        {
            accts = [Select u.name, u.Id From Account u];
            
            AccountList = new List<SelectOption>();
            
            for(Account tempacct: accts)
            {
                AccountList.add(new SelectOption(tempacct.Id, tempacct.Name));
            }
            return AccountList;
        }
        set;
    }
    @RemoteAction
    global static String fetchRecords() {
        return 'done';
    }    
}

Here, onChange of the Account dropdown I am calling a Javascript function which internally making a Remote call to the controller. Once your controller method executes it return the value in 'result' variable. In my sample code I have returned String but you can return any object, list, list of objects etc.

Below are few links:-
http://www.salesforce.com/docs/developer/pages/Content/pages_js_remoting.htm
http://www.salesforce.com/docs/developer/pages/Content/pages_js_remoting_example.htm

or you can simply search on google for 'Javascript Remoting in Salesforce'.

Let me know if you need any help.

Please close the thread marking this answer as Best Answer if it really helped. Closing the thread help others finding the correct answer.

Regards,
Swayam Arora