Last active
September 27, 2017 03:11
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class DependentPicklistDemoController { | |
@AuraEnabled | |
public static List<Contact> getContacts() { | |
return [ | |
SELECT Id, Name, AccountId, Account.Name | |
FROM Contact | |
LIMIT 200 | |
]; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
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); | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
i am getting below error by running above code.
Failed to save undefined: Invalid definition for ccmt:dependentPicklistDemoController: null: Source
how to resolve