Salesforce Picklist example Visualforce page - Salesforce Tutorial

This Visualforce page and its Apex controller class demonstrate how to display a dropdown list (also known as a picklist) of account names for selection in Salesforce. Here’s a beginner-friendly explanation:

Salesforce Picklist example

Visualforce Page Code

<apex:page sidebar="false" controller="accPickNamesDisplayClass">
    <apex:form>
        <apex:selectList multiselect="false" size="1">
            <apex:selectOptions value="{!accNames}">
            </apex:selectOptions>
        </apex:selectList>
    </apex:form>
</apex:page>

Explanation:

<apex:page sidebar="false" controller="accPickNamesDisplayClass">:

This defines a Visualforce page.
sidebar="false" removes the default Salesforce sidebar, creating a cleaner interface.
controller="accPickNamesDisplayClass" links this page to a custom Apex class (accPickNamesDisplayClass), which will provide the data for the dropdown.

<apex:form>:

This tag creates a form, which groups form elements together, like the dropdown list.

<apex:selectList multiselect="false" size="1">:

<apex:selectList> creates a dropdown list.
multiselect="false" ensures users can select only one option from the list.
size="1" defines the size of the dropdown. Setting this to “1” means the dropdown will show only one option at a time (a single-select list).

<apex:selectOptions value="{!accNames}">:

This tag specifies the options that will appear in the dropdown.
value="{!accNames}" binds the dropdown options to the accNames property in the Apex controller, which provides the account names.

This Visualforce page will display a dropdown of account names, populated by the Apex class.

Apex Controller Code

public with sharing class accPickNamesDisplayClass {
    List<selectOption> options = new List<selectOption>();

    public List<selectOption> getAccNames() {
        for(DataLoadTest__c acc : [select Id, name from DataLoadTest__c]) {
            options.add(new selectOption(acc.name, acc.name));
        }
        return options;
    }
}

Explanation:

public with sharing class accPickNamesDisplayClass:

This defines a public Apex class named accPickNamesDisplayClass.
with sharing enforces the user’s data access permissions, ensuring the user only sees records they are permitted to access.

List<selectOption> options = new List<selectOption>();:

This line creates a list named options to store each option in the dropdown.
Each selectOption object represents one option in the dropdown, containing a display label and a value.

public List<selectOption> getAccNames():

This method, getAccNames, provides the list of options for the dropdown in the Visualforce page.
Visualforce will call this method to retrieve the options for accNames.

for(DataLoadTest__c acc : [select Id, name from DataLoadTest__c]):

This for loop retrieves records from the custom object DataLoadTest__c (which can be replaced with any object, like Account or Contact, depending on your need).
The loop fetches the Id and Name fields of each DataLoadTest__c record.

options.add(new selectOption(acc.name, acc.name));:

For each record retrieved, a new selectOption object is created.
new selectOption(acc.name, acc.name) creates an option where both the display label and the value are set to the name field of the DataLoadTest__c record.
This option is then added to the options list.

return options;:

This method returns the options list, which contains all the selectOption objects.
These options are displayed as the choices in the dropdown on the Visualforce page.

How It Works Together

When the Visualforce page loads, it calls the getAccNames method in the accPickNamesDisplayClass.
This method fetches all DataLoadTest__c records, creates options for each record, and returns them.
The options appear in the <apex:selectList> dropdown, allowing users to select from a list of account names.

This simple setup is a powerful way to display dynamic dropdown lists in Salesforce, pulling data directly from the database with minimal code.