How to Auto populate Dependent Picklist Value based on the value selected in Controlling Picklist

Question

I have 2 Picklist fields on Opportunity Object Country(Controlling) and Geography(Dependent).Based on the value selected in Country Picklist,it auto populates the value in Geography field.This is working fine for Salesofrce Classic but in Lightning I have to select the Dependent Piclist value manually which is well known issue in Lightning as per the below link:

https://help.salesforce.com/articleView?id=000249298&type=1

I have created a Quick Action on Account Object that creates Opportunity Records using Lightning Components. Below is the code for Controller Class:

public with sharing class QuickOpportunityController {
    @AuraEnabled
    public static Account getAccount(Id accountId) {
        // Perform isAccessible() checks here
        return [SELECT Id, Name, BillingCity, BillingState, BillingCountry, Geography__c, Unit__c FROM Account WHERE Id =
                :accountId];
    }

    @AuraEnabled
    public static Boolean getOpportunityCreateAccess() {
        //Check if logged in user has access to create Opporutnity
        return Schema.sObjectType.Opportunity.isCreateable();
    }    

    @AuraEnabled
    public static Opportunity saveOpportunityWithAccount(Opportunity opportunity, Id accountId) {
        // Perform isAccessible() and isUpdateable() checks here

        //Need to update
        opportunity.AccountId = accountId;
        //
        Account objAccount = [SELECT Id, Name, BillingCity, BillingState, BillingCountry, Geography__c, Unit__c FROM Account WHERE Id =
                :accountId];

        //Set Default Values
        opportunity.Probability_to_Win__c = '10%';
        opportunity.StageName = 'Stage 1';
        opportunity.RecordTypeId = Schema.SObjectType.Opportunity.getRecordTypeInfosByName().get('Salesforce Opt').getRecordTypeId();

        if(objAccount!=null) {

            opportunity.Start_Date__c = opportunity.CloseDate + 14;

        }
        opportunity.Account = null;

        upsert opportunity;

        return opportunity;
    }

}

& Below is the Lightning Component Code:

<div class="slds">
    <aura:if isTrue="{! !v.hasCreateAccess}">
        <p class="slds-page-header__title slds-align--absolute-center">You Do not have permission to create new Opportunity</p>
    </aura:if>

    <aura:if isTrue="{!v.hasCreateAccess}">

        <p class="slds-page-header__title slds-align--absolute-center">Create Salesforce Opportunity</p>

        <aura:if isTrue="{!not(empty(v.account.Name))}">
            <!-- Display a header with details about the account -->
            <div class="slds-page-header" role="banner">
                <p class="slds-text-heading--label">Account</p>
                <h1 class="slds-page-header__title slds-m-right--small slds-truncate slds-align-left">{!v.account.Name}</h1>
            </div>
        </aura:if>

        <!-- Display form validation errors, if any -->
        <aura:if isTrue="{!v.hasErrors}">
            <div class="recordSaveError">
                <ui:message aura:id="errorMessageId" title="Error" severity="error" closable="false">
                    Please Enter all required fields.
                </ui:message>
            </div>
        </aura:if>    


        <!-- Display the new contact form -->
        <div class="slds-form--stacked">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="newOpportunityName">
                    <abbr class="slds-required" title="required">*</abbr>
                    Opportunity Name: 
                </label>
                <div class="slds-form-element__control">                
                    <force:inputField aura:id="newOpportunityName" value="{!v.newOpportunity.Name}"/>
                </div>
            </div>

            <div class="slds-form-element">
                <label class="slds-form-element__label" for="newOpportunityclosedDate">
                    <abbr class="slds-required" title="required">*</abbr>
                    Closed Date: 
                </label>
                <div class="slds-form-element__control">
                    <force:inputField aura:id="newOpportunityclosedDate" value="{!v.newOpportunity.CloseDate}"/>
                </div>
            </div>

            <aura:if isTrue="{! !not(empty(v.account.Name))}">
                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="accountName">
                        <abbr class="slds-required" title="required">*</abbr>Account Name: </label>
                    <div class="slds-form-element__control">     
                        <force:inputField aura:id="accountName" value="{!v.newOpportunity.AccountId}"/>
                    </div>
                </div>
            </aura:if>

            <!-- Display the Country Picklist -->
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="opportunityCountry">
                    <abbr class="slds-required" title="required">*</abbr>Country: </label>
                <div class="slds-form-element__control">
                    <force:inputField aura:id="opportunityCountry" value="{!v.newOpportunity.Country__c}"/>
                </div>
            </div>

            <div class="slds-form-element slds-float--right">
                <ui:button label="Cancel" press="{!c.handleCancel}"
                           class="slds-button slds-button--neutral" />

                <ui:button label="Save Opportunity" press="{!c.handleSaveOpportunity}"
                           class="slds-button slds-button--brand" />
            </div>
        </div>

        <div class="slds-spinner_container slds-hide" aura:id="spinner">
            <div class="slds-spinner--brand slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>
</div>

I want to know if it possible in lightning to auto populate dependent picklist field value(Geography) based on value selected in controlling picklist(Country). Good thing here is Dependent Picklist contains only one value as There is only one geography per country.

Answer 1

Can you check this code? Notice how am I defining attributes for the picklists, and then I have selected a value from controlling picklist, the values get refreshed in the dependent one.

<aura:component >
<aura:attribute name="parentOptions" type="List"/>
<aura:attribute name="dependentPicklist" type="Object"/>
<aura:attribute name="dependentOptions" type="List"/>
<aura:attribute name="disabledPick" type="Boolean" default="true"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-container--center slds-container--small slds-m-top--small">
    <div class="slds-form--stacked">

        <lightning:select name="parentPicklist" label="Country" aura:id="parentPicklist" onchange="{!c.PickChange}">
            <option value="">None</option>
            <aura:iteration items="{!v.parentOptions}" var="p">
                <option value="{!p.value}">{!p.text}</option>
            </aura:iteration>
        </lightning:select>

        <lightning:select name="dependentPicklist" label="Cities" disabled="{!v.disabledPick}">
            <option value="">None</option>
            <aura:iteration items="{!v.dependentOptions}" var="d">
                <option value="{!d.value}">{!d.text}</option>
            </aura:iteration>
        </lightning:select>

    </div>
</div>

And this is the code for client side controller:

({
    doInit : function(component, event, helper) {
        var pVals = [
            {text:"India", value: "India"},
            {text:"USA", value: "USA"}
        ];

        var dPick = {
            "India" : [
                {text:"Hyderabad", value: "Hyderabad"},
                {text:"Chennai", value: "Chennai"}
            ],
            "USA" : [
                {text:"San Francisco", value: "San Francisco"},
                {text:"Chicago", value: "Chicago"}
            ]
        };

        component.set('v.parentOptions', pVals);
        component.set('v.dependentPicklist', dPick);

    },

    PickChange : function(component, event, helper) {
        var parentValue = component.find('parentPicklist').get('v.value');
        component.set('v.dependentOptions', component.get('v.dependentPicklist')[parentValue]);

        if(parentValue != '')
        component.set('v.disabledPick',false);
        else
        component.set('v.disabledPick',true);
    }
})

Answer 2

I have solved this requirement by creating custom setting inwhich I have added all country names in Name Standard Field of Custom setting then I create custom field called as Opportunity Geography inwhich I have added region of respective countries and Modify the controller class code like this:

 public with sharing class QuickOpportunityController {
    @AuraEnabled
    public static Account getAccount(Id accountId) {
        // Perform isAccessible() checks here
        return [SELECT Id, Name, BillingCity, BillingState, BillingCountry, Geography__c, Unit__c FROM Account WHERE Id =
                :accountId];
    }

    @AuraEnabled
    public static Boolean getOpportunityCreateAccess() {
        //Check if logged in user has access to create Opporutnity
        return Schema.sObjectType.Opportunity.isCreateable();
    }    

    @AuraEnabled
    public static Opportunity saveOpportunityWithAccount(Opportunity opportunity, Id accountId) {
        // Perform isAccessible() and isUpdateable() checks here

        //Need to update
        opportunity.AccountId = accountId;
        //
        Account objAccount = [SELECT Id, Name, BillingCity, BillingState, BillingCountry, Geography__c, Unit__c FROM Account WHERE Id =
                              :accountId];
        //Calling Custom Setting to get all values
        Map<String, Opportunity_AutoGeoMapping__c> mapOfCountryGeography = Opportunity_AutoGeoMapping__c.getAll();
        //Set Default Values
        opportunity.Probability_to_Win__c = '10%';
        opportunity.StageName = 'Stage 1';
        opportunity.RecordTypeId = Schema.SObjectType.Opportunity.getRecordTypeInfosByName().get('Salesforce Opt').getRecordTypeId();

        if(objAccount!=null) {

            opportunity.Start_Date__c = opportunity.CloseDate + 14;

        }
        if(!mapOfCountryGeography.isEmpty()){
            //Passing Country Value
            Opportunity_AutoGeoMapping__c geoCustomSetting = mapOfCountryGeography.get(opportunity.Country__c);
            //Based on the country provided,it is assigning geography field when an Opportunity Record is saved
            opportunity.Geography__c=geoCustomSetting.Opportunity_Geography__c; 
        }
        opportunity.Account = null;

        upsert opportunity;

        return opportunity;
    }

}

By adding custom setting here helps me to auto populate Geography value based on the input in Country.I don't need create country list in Client Side Controller.

But I would love to hear an expert suggestion if this is a recommended approach when Dependent Picklist is not Auto populate in Lightning specially when creating custom quick action.