Skip to content

Instantly share code, notes, and snippets.

@martyychang
Last active September 27, 2017 03:11
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save martyychang/af8aa7705da69d23598e to your computer and use it in GitHub Desktop.
Save martyychang/af8aa7705da69d23598e to your computer and use it in GitHub Desktop.
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 -->
<div>
<h2>Account</h2>
<select aura:id="account" onchange="{!c.handleAccountChange}">
<option>--None--</option>
<aura:iteration items="{!v.accountOptions}" var="option">
<option value="{!option.value}">{!option.label}</option>
</aura:iteration>
</select>
</div>
<!-- Dependent Contact picklist -->
<div>
<h2>Contact</h2>
<select aura:id="contact">
<option>--None--</option>
<aura:iteration items="{!v.contactOptions}" var="option">
<option value="{!option.value}">{!option.label}</option>
</aura:iteration>
</select>
</div>
</aura:application>
public class DependentPicklistDemoController {
@AuraEnabled
public static List<Contact> getContacts() {
return [
SELECT Id, Name, AccountId, Account.Name
FROM Contact
LIMIT 200
];
}
}
({
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
component.set("v.contactOptions",
selectContact.optionsByControllingValue[event.target.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;
accountOptions.push(accountOption);
// 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;
contactOptionsByAccountId[accountId].push(contactOption);
});
// 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;
});
$A.enqueueAction(getContacts);
}
})
@sfdc001
Copy link

sfdc001 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