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?
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
</p>
<!-- 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);
}
})
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>
No Apex =)
