VisualForce: Dependent Picklists

Display the Right Values at the Right Time

A common developer task is to show values that are dependent. We’ve all had cases when we need to pick a State & City or when we are browsing for a new computer and we need to select Brand & Model. In my developer experience, I’ve come to identify two types of dependent picklist in Visualforce: Model-dependent and Model-related.

Model-dependent Picklists

One of the many things I love about development on the Salesforce Platform is that both Apex and Visualforce are out-of-the-box and “database-ready”. This means the code I write in the platform already knows everything about my existing objects and fields, including the dependencies between them.

Configuring Dependent Picklists in Salesforce is a piece of cake. Let’s say you have two custom fields on the Opportunity Object:

1. A checkbox named Needs_Discount__c
2. The picklist Discount_Type__c that contains the following values: “Business”, “Personal”, “Promo Code”, “Referral”, and “N/A”

Your goal is to display the “N/A” value only if the Needs_Discount__c checkbox is unchecked; any other time, the Discount_Type__c field should show all the values except for “N/A” to your users.

Here is how you configure this Model-dependent picklist:

1. After creating your custom fields, click the “Field Dependencies” button on the “Custom Field & Relationships” related list.

2. Click “New” on the “Opportunity Field Dependencies” page

3. Use the drop-down to select the appropriate Controlling Field and Dependent Field, and then click “Continue”.

4. Choose the values that should be available on the Dependent Field, based on the value selected for the Controlling Field and click “Include Values”.

a. If Needs_Discount__c is unchecked:

b. If Needs_Dicount__c is checked:


5. You’re done! Here is a small video demonstrating the outcome on a standard page layout.

This type of Dependent Picklist is the easiest one to display in Visualforce. By taking advantage of the standard controller that comes by default with most major Standard Objects and all Custom Objects, and using the apex:inputField Visualforce tag, you can display this dependency between the two fields with no more than 11 lines of code.

Here is an example:

This is all of the code that is needed to present the dependency on the Visualforce page:

As you can see from the snippet above, the reason I call this type of picklist dependency “Model-dependent” is because their dependency is explicitly defined in the Model schema, aka the object. Once more, there is little code-development involved in order to show their dependent nature.

Model-related Picklists

Unlike the model-dependent picklist, this dependency is not defined explicitly in an object. Instead, the objects are linked together via a master-detail or lookup relationship. Here is a scenario:

You need to create a Visualforce page with a field lookup to Accounts. When an Account is selected, the picklist should show all the Contacts related for that account. Just like this:

Here are the code highlights:

In the Visualforce page

  • We are using a custom controller, in which we create and manipulate all the variables shown in the page.
  • On line 7, we use the Visualforce tag apex:actionSupport to re-render the picklist named relatedContacts” every time the account lookup value changes.
  • Lines 9-11 define the custom picklist that renders values based on the selected account. Notice the use of the apex:selectOption tag with a variable called “associatedContacts”

Inside the Visualforce Page Controller

  • On Lines 3-4 we define the variables used in the Visualforce page. Notice that these variables are declared using the public keyword; this allows Visualforce to access their values.
  • Lines 11-20 are where the fun happens. Here we define a getter method that is called anytime the “associatedContacts” variable is rendered or re-rendered on the Visualforce page. Inside the function, we are doing a SOQL For Loop to grab all the Contacts related to the selected account and finally returning the list that will be displayed as the drop-down options.

Pretty neat and simple, right? Now you have another tool on your Developer belt to use anytime you need to present a custom dependency between two Objects.


About the Author

Clara Perez is a Salesforce MVP and Lead Developer at Great Wave who loves teaching Salesforce concepts.