Create Dependent Picklist on Custom Object Using the Lightning Component and Apex Controller | how to Create Dependent Picklist and Controlling Picklist in salesforce

Today I am working on create dependent picklist on custom object using the lightning component and apex controller.

In the dependent picklist there are two dependent picklists. Where one is controlling field and another is dependent field.

It is a dynamic component function where need to pass object name, dependent and controlling field.

If we select the controlling picklist value then other side of dependent field value will be automatic display associated with controlling field value.

➡ To know more details about Dependent Picklist , Click Here.

LightningDependentPicklistCmp1.cmp [Lightning Component]

<aura:component controller="LightningDependentPicklistCmpController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" > <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <!-- aura attributes--> <aura:attribute name="parentList" type="list" default="[]" description=""/> <aura:attribute name="childList" type="list" default="[]"/> <aura:attribute name="pickListMap" type="map"/> <aura:attribute name="disabledChildField" type="boolean" default="true"/> <aura:attribute name="objectName" type="string" default="NewStudent__c"/> <aura:attribute name="parentFieldAPI" type="string" default="State__c"/> <aura:attribute name="childFieldAPI" type="string" default="City__c"/> <aura:attribute name="parentFieldLabel" type="string" /> <aura:attribute name="childFieldLabel" type="string"/> <aura:attribute name="parentValue" type="string" default=""/> <aura:attribute name="childValue" type="string" default=""/> <lightning:card title="Dependent Picklist Demo"> <div class="slds-grid slds-wrap"> <div class="slds-col slds-col_size-6-of-12"> <!-- Controller Field --> <lightning:layoutItem size="12" padding="around-small"> <lightning:select name="parentField" aura:id="parentField" value="{!v.parentValue}" label="{!v.parentFieldLabel}" onchange="{!c.changeFieldByParent}"> <aura:iteration items="{!v.parentList}" var="value"> <option value="{!value}">{!value}</option> </aura:iteration> </lightning:select> </lightning:layoutItem> </div> <div class="slds-col slds-col_size-6-of-12"> <!--Dependent Field--> <lightning:layoutItem size="12" padding="around-small"> <lightning:select name="childField" value="{!v.childValue}" label="{!v.childFieldLabel}" disabled="{!v.disabledChildField}"> <aura:iteration items="{!v.childList}" var="value"> <option value="{!value}">{!value}</option> </aura:iteration> </lightning:select> </lightning:layoutItem> </div> </div> </lightning:card> </aura:component>

LightningDependentPicklistCmp1Controller.js [JavaScript File]

({ doInit : function(component, event, helper) { var action = component.get("c.getDependentPicklist"); action.setParams({ ObjectName : component.get("v.objectName"), parentField : component.get("v.parentFieldAPI"), childField : component.get("v.childFieldAPI") }); action.setCallback(this, function(response){ var status = response.getState(); if(status === "SUCCESS"){ var pickListResponse = response.getReturnValue(); //save response component.set("v.pickListMap",pickListResponse.pickListMap); component.set("v.parentFieldLabel",pickListResponse.parentFieldLabel); component.set("v.childFieldLabel",pickListResponse.childFieldLabel); var pickListMap = component.get("v.pickListMap"); // alert('pickListMap ' + JSON.stringify(pickListMap)); // create a empty array for store parent picklist values var parentkeys = []; // for store all map keys var parentField = []; // for store parent picklist value to set on lightning:select. // Iterate over map and store the key for (var pickKey in pickListResponse.pickListMap) { parentkeys.push(pickKey); } // alert('parentkeys ' + parentkeys); //set the parent field value for lightning:select if (parentkeys != undefined && parentkeys.length > 0) { parentField.push('--- None ---'); } for (var i = 0; i < parentkeys.length; i++) { parentField.push(parentkeys[i]); } // set the parent picklist component.set("v.parentList", parentField); } }); $A.enqueueAction(action); }, changeFieldByParent : function(component, event, helper) { var controllerValue = component.find("parentField").get("v.value");// We can also use event.getSource().get("v.value") var pickListMap = component.get("v.pickListMap"); //alert('pickListMap ' + JSON.stringify(pickListMap)); if (controllerValue != '--- None ---') { //get child picklist value var childValues = pickListMap[controllerValue]; //alert('childValues ' + childValues); var childValueList = []; childValueList.push('--- None ---'); for (var i = 0; i < childValues.length; i++) { childValueList.push(childValues[i]); } // set the child list component.set("v.childList", childValueList); if(childValues.length > 0){ component.set("v.disabledChildField" , false); }else{ component.set("v.disabledChildField" , true); } } else { component.set("v.childList", ['--- None ---']); component.set("v.disabledChildField" , true); } } })

LightningDependentPicklistCmpController.apxc [Apex Controller]

public with sharing class LightningDependentPicklistCmpController { private static final String base64Chars = '' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + 'abcdefghijklmnopqrstuvwxyz' + '0123456789+/'; @AuraEnabled public static PicklistWrapper getDependentPicklist(String ObjectName, string parentField, string childField) { Map<String,List<String>> pickListMap = new Map<String,List<String>>(); PicklistWrapper pw = new PicklistWrapper(); pw.pickListMap = pickListMap; if (Schema.getGlobalDescribe().get(ObjectName) ==null || String.isBlank(parentField) || String.isBlank(ChildField)){ return pw; } Schema.sObjectType objType = Schema.getGlobalDescribe().get(ObjectName).newSObject().getSObjectType(); Map<String, Schema.SObjectField> objFieldMap = objType.getDescribe().fields.getMap(); if (!objFieldMap.containsKey(parentField) || !objFieldMap.containsKey(childField)){ return pw; } List<PicklistEntryWrapper> depEntriesList = (List<PicklistEntryWrapper>)JSON.deserialize(JSON.serialize(objFieldMap.get(ChildField).getDescribe().getPicklistValues()), List<PicklistEntryWrapper>.class); List<String> controllingValues = new List<String>(); for (Schema.PicklistEntry ple : objFieldMap.get(parentField).getDescribe().getPicklistValues()) { pickListMap.put(ple.getLabel(), new List<String>()); controllingValues.add(ple.getLabel()); } for (PicklistEntryWrapper plew : depEntriesList) { String validForBits = base64ToBits(plew.validFor); for (Integer i = 0; i < validForBits.length(); i++) { String bit = validForBits.mid(i, 1); if (bit == '1') { pickListMap.get(controllingValues.get(i)).add(plew.label); } } } pw.pickListMap = pickListMap; pw.parentFieldLabel = objFieldMap.get(parentField).getDescribe().getLabel(); pw.childFieldLabel = objFieldMap.get(childField).getDescribe().getLabel(); return pw; } public static String decimalToBinary(Integer val) { String bits = ''; while (val > 0) { Integer remainder = Math.mod(val, 2); val = Integer.valueOf(Math.floor(val / 2)); bits = String.valueOf(remainder) + bits; } return bits; } public static String base64ToBits(String validFor) { if (String.isEmpty(validFor)) return ''; String validForBits = ''; for (Integer i = 0; i < validFor.length(); i++) { String thisChar = validFor.mid(i, 1); Integer val = base64Chars.indexOf(thisChar); String bits = decimalToBinary(val).leftPad(6, '0'); validForBits += bits; } return validForBits; } public class PicklistWrapper{ @AuraEnabled public Map<String, List<String>> pickListMap; @AuraEnabled public String parentFieldLabel; @AuraEnabled public String childFieldLabel; } public class PicklistEntryWrapper{ public String active; public String defaultValue; public String label; public String value; public String validFor; } }

accountCreationControllerLwc.cls [Apex Controller File]

aaaa

➡ To know more live demo source code in Salesforce lightning, Trigger, Visualforce & LWC, Use this link..