martyychang · September 27, 2017 03:11 · Nov 5, 2014 · Nov 5, 2014
diff --git a/dependentPicklistDemoController.js b/dependentPicklistDemoController.js
@@ -66,5 +66,5 @@
             selectContact.optionsByControllingValue = contactOptionsByAccountId;
         });
         $A.enqueueAction(getContacts);      
-	}
+    }
 })
diff --git a/DependentPicklistDemoController.cls b/DependentPicklistDemoController.cls
@@ -0,0 +1,11 @@
+public class DependentPicklistDemoController {
+
+    @AuraEnabled
+    public static List<Contact> getContacts() {
+        return [
+            SELECT Id, Name, AccountId, Account.Name
+            FROM Contact
+            LIMIT 200
+        ];
+    }
+}
diff --git a/dependentPicklistDemo.app b/dependentPicklistDemo.app
@@ -0,0 +1,34 @@
+<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>
diff --git a/dependentPicklistDemoController.js b/dependentPicklistDemoController.js
@@ -0,0 +1,70 @@
+({
+    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);      
+	}
+})