9

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?

1

2 Answers 2

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 =)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .