custom dependent picklist

Custom Dependent Picklist Field With lightning:select In Lightning Component

Lightning Component

Hey guys, today in this post we are going to create a new updated version of Custom Dependent Picklist fields using ‘lightning:select‘ base component in salesforce.

custom-dependent-picklist lightning

Prerequisites : basic understanding of Lightning Component & apex Programming
Step  0 : Setup Picklist field dependency

In this post , first we have create 2 custom picklist fields on salesforce  standard Contact object

Country__c &  City__c

then set field dependency. here country is the controller field  and city is the dependent field.

Custom dependent picklist salesforce sfdcmonkey

Step  1 : Create apex controller
[dependentPicklist_UpdateCtrl.apxc]

  • you don’t need to change anything in above apex classes.
Step  2 : Create Lightning Component
DependentPicklist.cmp

DependentPicklistController.js

Check also :  Custom Multi-Select Picklist In Lightning Component With Select2 jQuery Plugin
DependentPicklistHelper.js

 

  • check above code comments.
  • You just need to change the object API Name/Type on line number 15.[DependentPicklist.cmp].
  • And change dependent field and controller field API Names on line number 16 – 17.[DependentPicklist.cmp].

TestApp.app

want to create 3 level picklist field dependency ? check example here 

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

 Let us know if it helps you 🙂

people also check : How to use SVG in Salesforce Lightning Component ?

 

(Visited 14,493 times, 1 visits today)

12 comments

  • Hi,

    Thanks a lot for this component. Its really helpful!

    I need to store the values of the above component details along with another component values by clicking on save button. May I know how this can be achieved please!

    Thanks in advance:)

  • Hi Piyush,

    This is great, thanks! How would you adapt this code to include two dependent picklist fields being controlled by the same controlling picklist field on the same form?

  • i copied the code and all done but i am not getting the values in both controlled and dependant field,

    here i changed the field api names as country__  c  and city__c,

    still i am not getting the values.

    can you please help me in this

  • I want to create dependent picklist having three dependent columns and it should applies independently on multiple rows. It means picklist fields in Columns are dependent but picklist fields in rows are not dependent to each other .I use the code given in http://sfdcmonkey.com/2018/08/31/dependent-picklist-lightningselect-lightning-salesforce/ , but it makes rows also dependent on each other. Please help if any one has code for this.

    This is my component code:

    <aura:iteration items=”{!v.NewoperationalApproverData}” var=”OperationalAPProver” indexVar=”rowIndex”>
    <tr class=”slds-text-title_caps”>
    <td>

    {!rowIndex + 1}

  • I want to create dependent picklist having three dependent columns and it should applies independently on multiple rows. It means picklist fields in Columns are dependent but picklist fields in rows are not dependent to each other .I use the code given in http://sfdcmonkey.com/2018/08/31/dependent-picklist-lightningselect-lightning-salesforce/ , but it makes rows also dependent on each other. Please help if any one has code for this.

    The following is my  code component:

    <aura:iteration items=”{!v.NewoperationalApproverData}” var=”OperationalAPProver” indexVar=”rowIndex”>
    <tr class=”slds-text-title_caps”>
    <td>

    {!rowIndex + 1}

Leave a Reply