Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Demonstration of how to configure dependent picklists in Lightning on the Salesforce1 Platform, using features currently available in the Winter '15 beta
<aura:application controller="ccmt.DependentPicklistDemoController">
<aura:attribute name="accountId" type="String" default=""/>
<aura:attribute name="accountOptions" type="Object[]"/>
<aura:attribute name="contactId" type="String" default=""/>
<aura:attribute name="contactOptions" type="Object[]"/>
<!-- Application-level event handlers -->
<aura:handler name="init" value="{!this}" action="{!c.handleInit}"/>
<!-- Application title header -->
<h1>Dependent Picklist Demo</h1>
<!-- Controlling Account picklist -->
<select aura:id="account" onchange="{!c.handleAccountChange}">
<aura:iteration items="{!v.accountOptions}" var="option">
<option value="{!option.value}">{!option.label}</option>
<!-- Dependent Contact picklist -->
<select aura:id="contact">
<aura:iteration items="{!v.contactOptions}" var="option">
<option value="{!option.value}">{!option.label}</option>
public class DependentPicklistDemoController {
public static List<Contact> getContacts() {
return [
SELECT Id, Name, AccountId, Account.Name
FROM Contact
handleAccountChange : function(component, event, helper) {
// Get a reference to the dependent picklist
var selectContact = component.find("contact");
// Call the helper function to refresh the
// dependent picklist, based on the new controlling value
handleInit : function(component, event, helper) {
var self = this; // safe reference
// Enqueue the action to get a max of 200 contacts
// from Salesforce, and configure the callback handler
// to set the Contact picklist to be dependent
// on the Account picklist, simultaneously enumerating
// the Account picklist options
var getContacts = component.get("c.getContacts");
getContacts.setCallback(self, function(a) {
var contacts = a.getReturnValue(); // Array<Object>
// Construct the list of Account picklist options
var accountOptions = [];
// Construct the map of dependent Contact picklist
// options, keyed on Account ID values
var contactOptionsByAccountId = new Object();
// Go through all of the returned Contact records
// to enumerate the list of Account options and also
// to build the map of dependent Contact options
contacts.forEach(function(element, index, array) {
var accountId = element.AccountId;
// If the contact's Account is new to us
if (contactOptionsByAccountId[accountId] === undefined) {
// Add the Account as an option for the
// Account picklist
var accountOption = new Object();
accountOption.value = element.AccountId;
accountOption.label = element.Account.Name;
// Construct an empty array to initialize
// the list of dependent Contact picklist options
contactOptionsByAccountId[accountId] = [];
// Add the Contact as an option under the appropriate
// controlling Account ID value
var contactOption = new Object();
contactOption.value = element.Id;
contactOption.label = element.Name;
// Set the Account options
component.set("v.accountOptions", accountOptions);
// Attach the map of Contact options, keyed on
// controlling Account ID values
var selectContact = component.find("contact");
selectContact.optionsByControllingValue = contactOptionsByAccountId;

This comment has been minimized.

Copy link

commented Sep 27, 2017

i am getting below error by running above code.

Failed to save undefined: Invalid definition for ccmt:dependentPicklistDemoController: null: Source

how to resolve

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.