Dynamic custom dependent picklist in lightning component

Vijay Kumar
2 min readAug 3, 2020
Dynamic custom dependent picklist in lightning component

Hey guys, today in this post we are going to learn about How to create custom dependent Picklist dynamically in lightning component.

Real time scenarios:- Create custom dependent Picklist dynamically on custom sObject. Create two Picklist one is State and another is City.
If user changed the State drop-down option then the city name of State automatic filtered and display on city drop-down option.

Files we used in this post example:-

lightningDependentPicklistApp.app

Lightning Application

It is used for call the component to preview on browser.

lightningDependentPicklistCmp.cmp

Lightning Component

It is used for create picklis dropdown of State and City.

lightningDependentPicklistCmpController.js

JavaScript Controller File

It is used for communicate to server side apex method and fetch the value of picklist from init fuction.

dependentPicklistController.apxc

Apex Class Controller

It is used for collect the picklist value of both custom fields dynamically.

Custom Object and their fields

Final Output

Other post that would you like to learn

Note:- Custom sObject >> NewStudent__c and there Custom Picklist Fields

You need to change Picklist Option value with your Picklist Option value.

You need to set field dependency on that fields. There State is the controller field and city is the dependent field.

Step 1:- Create Lightning Application : lightningDependentPicklistApp.app

From Developer Console >> File >> New >> Lightning Application

lightningDependentPicklistApp.app [Component Application File]

Step 2:- Create Lightning Component : lightningDependentPicklistCmp.cmp

From Developer Console >> File >> New >> Lightning Component

lightningDependentPicklistCmp.cmp [Lightning Component File]

Step 3:- Create Lightning Component : lightningDependentPicklistCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

lightningDependentPicklistCmpController.js [JavaScript Controller]

Step 4:- Create Lightning Application : dependentPicklistController.apxc

From Developer Console >> File >> New >> Apex Class

dependentPicklistController.apxc [Apex Class Controller]

Further post that would you like to learn

Originally published at https://www.w3web.net on August 3, 2020.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

Write a response

Recommended from Medium

Lists

See more recommendations