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.
