How to Create a Visualforce Picklist

Hello treasure hunters! I was recently faced with a throwback issue in a visualforce page and so I thought it would be helpful to list out some of the code I had saved to help with writing visualforce code. This week I’m going to highlight the picklist view on a visualforce page and break down some of the functionality on the page. As well as show you some tricks I used for my visualforce page selectlist components.

Visualforce Pages use Merge Fields

Since visualforce pages are server based, not client based as Lightning Web Components ( LWC ) are today, references can be made to merge fields directly in the page.

Merge fields are an expression language like formulas where everything inside the brackets and exclamation point “{! }” is automatically replaced on the page.

A Picklist in Visualforce

With the merge fields and the standard visualforce component, developers are able to use values directly from records, from a controller (apex class) or they can set the options directly in the visualforce page.

Below is an example of a standard selectlist component in a visualforce page.

The selectlist component needs to be within an <apex:form> component for the component to function on the page properly. Otherwise you will have error messages on the page.

The commandbutton is the component that transfers the value from the page to the controller variable. The visualforce page technology is Ajax aware and can within a form tag automatically add behavior to the page without having to refresh the entire page.

    <apex:form>
        <apex:selectList value="{!countries}" multiselect="true">
            <apex:selectOptions value="{!items}"/>
        </apex:selectList><p/>

        <apex:commandButton value="Test" action="{!test}" rerender="out" status="status"/>
    </apex:form>

The selectOptions tag I have in this instance is using information from a controller where the values are listed out in apex or a standard controller.

The controller can set these values with the get method where the “items” variable is part of the controller method as shown below.

        public List<SelectOption> getItems() {
            List<SelectOption> options = new List<SelectOption>();
            options.add(new SelectOption('US','US'));
            options.add(new SelectOption('CANADA','Canada'));
            options.add(new SelectOption('MEXICO','Mexico'));
            return options;
        }

The values can be either one option or multi-select for the selectList component. As shown above, the selectlist is set to allow for multiple selection through the multiselect=”true” part of the component. Without the multiselect tag the default is set to allow only one selection for each component.

The selected item from the page is stored in the “countries” variable. Which correlates to a get method in the visualforce page controller. If the select options had multiselect as false or had the default of no multiselect then the method below would only have a String instead of the String array (String[]) as the return.

        public String[] getCountries() {
            //If multiselect is false, countries must be of type String
            return countries;
        }

The view on the visualforce page would be similar to the following:

Quick Picklists in Visualforce

Another method I liked to employ on my visualforce pages was to build the options directly in the visualforce page. It allowed for building out the option list within the page instead of the controller. Here, I built out a Yes or No picklist on the page with a single selection.

<br/> 
   Do you live in this country?
 <br/>
 <apex:form>      
    <apex:selectList id="questionOne" value="{!questionOneAnswer}" size="1">
         <apex:actionSupport event="onchange" action="{!updateLiving}" rerender="area1"/>
            <apex:selectOption itemValue="Yes" itemLabel="Yes"/>
            <apex:selectOption itemValue="No" itemLabel="No"/>            
        </apex:selectList>
   </apex:form>

    <apex:outputPanel id="area1">      
                    <p>You have selected:</p>              
                    <apex:outputText id="livesThere" value="{!questionOneAnswer}" />
   </apex:outputPanel>

The actionSupport tag in the example above, allowed for running another method in the controller at the same time as the action was done on the page. The action in this case is a change in the picklist value selection.

Here is an example of the controller code.

  public class sampleCon {
      public String questionOneAnswer {get; set;}
      public String living = '';
           
      public void updateLiving(){
           living = questionOneAnswer;
      }

Notice that the values for the selectOption component are just on the visualforce page and not in the controller like in the first example. I used this trick for small picklists or picklists unrelated to record values as it was an easy way to build the list directly in the page.

Here is what the visualforce page would look like.

You can add css styling and other images as you can with a standard html page to really get a full page but these are some of the ways you can use the standard selectOptions components. Also see the visualforce developer guide for more information on building Salesforce visualforce pages: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_intro.htm