11

It's possible to define dependent picklist in the setup and the are supported out-of-the-box in Visualforce.

Are they also supported in Lightning natively? Is it on the roadmap to support them soon? If not: is there a best practice or a easily reusable workaround available right now?

5

I don't think they are natively supported. But as you are asking for workaround then here is a sample code you can try. Reference

dependentPicklistDemo.app

    <!-- 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>

DependentPicklistDemoController.cls

public class DependentPicklistDemoController {

    @AuraEnabled
    public static List<Contact> getContacts() {
        return [
            SELECT Id, Name, AccountId, Account.Name
            FROM Contact
            LIMIT 200
        ];
    }
}

dependentPicklistDemoController.js

({
    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);      
    }
})
1

They are as of at least API version 41 in lightning, basically, by creating a lightning:recordEditForm

This component requires API version 41.0 and later.

I am referencing the Case object and created a version picklist dependent on the Product field.

<lightning:recordEditForm aura:id="recordEditForm"
                                onsuccess="{!c.handleRecordSaved}"
                                onsubmit="{!c.handleRecordSubmit}"
                                objectApiName="Case">

        <lightning:messages />


            <lightning:inputField fieldName="Subject" />
            <lightning:inputField fieldName="Product__c" />
            <lightning:inputField fieldName="Version__c" />
            <lightning:inputField fieldName="Description" />


         <lightning:button aura:id="submit" type="submit" label="Create asset" class="slds-m-top_medium"/>

    </lightning:recordEditForm> 

enter image description here enter image description here

No Apex =)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.