Fetching picklist values dynamically through apex class method and display selected picklist value in Salesforce lightning web component

Post Views: 3,223

Hey guys, today in this post we are going to learn about how to Fetch picklist values dynamically through apex class method and display selected picklist value in Salesforce lightning web component – LWC.

Files we used in this post example

lwcPicklistController.cls	Apex Class Controller	It is used for fetch the picklist value dynamically from server.
fetchPicklistValueLwc.html	Lightning Web Component HTML	Template HTML file for used to write HTML element for user interface.
fetchPicklistValueLwc.js	LWC JavaScript File	It is holding @Wire method function that is fetching the picklist value from database.
fetchPicklistValueLwc.js-meta.xml	XML Meta File	It is used for where this lightning web component you want to exposed.

Don’t forget to check out:- Get Picklist Values Dynamically and display Picklist values & Radio Buttons value in Lightning Component Salesforce Click Here For More Information

Live Demo

Other related post that would you like to learn in LWC

Create Apex Class Controller

Step 1:- Create Apex Controller : lwcPicklistController.cls

SFDX:Create Apex Class >> New >> lwcPicklistController.cls

lwcPicklistController.cls [Apex Class]

  public with sharing class lwcPicklistController {
    
     //fetch picklist values from custom object in lwc
     @AuraEnabled(cacheable=true)
     public static List < customValueWrapper > pickListValueDynamically(sObject customObjInfo, string selectPicklistApi) {
        Schema.DescribeSObjectResult objDescribe = customObjInfo.getSObjectType().getDescribe();     
        map < String, Schema.SObjectField > customFieldMap = objDescribe.fields.getMap();      
        list < Schema.PicklistEntry > custPickValues = customFieldMap.get(selectPicklistApi).getDescribe().getPickListValues();
        list < customValueWrapper > customObjWrapper = new list < customValueWrapper > ();
        for (Schema.PicklistEntry myCustPick: custPickValues) {
          customValueWrapper selectOptionValueWrapper = new customValueWrapper();
             selectOptionValueWrapper.custFldlabel = myCustPick.getLabel();
             selectOptionValueWrapper.custFldvalue = myCustPick.getValue();
            customObjWrapper.add(selectOptionValueWrapper);
        }
        
        return customObjWrapper;
  
      }
      // wrapper class 
        public with sharing class customValueWrapper {
          @auraEnabled public string custFldlabel {get;set;}
          @auraEnabled public string custFldvalue {get;set;}
        }
}

public with sharing class lwcPicklistController {

//fetch picklist values from custom object in lwc

@AuraEnabled(cacheable=true)

public static List < customValueWrapper > pickListValueDynamically(sObject customObjInfo, string selectPicklistApi) {

Schema.DescribeSObjectResult objDescribe = customObjInfo.getSObjectType().getDescribe();

map < String, Schema.SObjectField > customFieldMap = objDescribe.fields.getMap();

list < Schema.PicklistEntry > custPickValues = customFieldMap.get(selectPicklistApi).getDescribe().getPickListValues();

list < customValueWrapper > customObjWrapper = new list < customValueWrapper > ();

for (Schema.PicklistEntry myCustPick: custPickValues) {

customValueWrapper selectOptionValueWrapper = new customValueWrapper();

selectOptionValueWrapper.custFldlabel = myCustPick.getLabel();

selectOptionValueWrapper.custFldvalue = myCustPick.getValue();

customObjWrapper.add(selectOptionValueWrapper);

}

return customObjWrapper;

}

// wrapper class

public with sharing class customValueWrapper {

@auraEnabled public string custFldlabel {get;set;}

@auraEnabled public string custFldvalue {get;set;}

}

Create Lightning Web Component

Step 2:- Create Lightning Web Component : fetchPicklistValueLwc.html

SFDX:Lightning Web Component >> New >> fetchPicklistValueLwc.html

fetchPicklistValueLwc.html [Lightning Web Component HTML]

  <template>
    <lightning-card title="Dynamically fetch picklist values from custom object in LWC" icon-name="custom:custom25">
       <div class="slds-p-horizontal--medium">
        <label class="slds-form-element__label">Target Actuals</label>
        <div class="slds-form-element__control">
          <div class="slds-select_container">
            <select class="slds-select" onchange={selectOptionChanveValue}>
                  <option value="">---None---</option>                
                    <template for:each={selectTargetValues.data} for:item="selectOptItem">
                       <option key={selectOptItem.custFldvalue} value={selectOptItem.custFldvalue}>
                         {selectOptItem.custFldlabel}
                       </option>
                  </template>
            </select>
          </div>
        </div>
        <br/>
         <b>Selected Picklist Value Is:-</b> <span style="color:brown; font-weight:bold;"> {picklistVal}</span>
       </div> 
      

<br/><br/>
    <p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>
    </lightning-card>
</template>

<lightning-card title="Dynamically fetch picklist values from custom object in LWC" icon-name="custom:custom25">

<label class="slds-form-element__label">Target Actuals</label>

{selectOptItem.custFldlabel}

</option>

</template>

</select>

</div>

<br/>

<b>Selected Picklist Value Is:-</b> <span style="color:brown; font-weight:bold;"> {picklistVal}</span>

</div>

<p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free tutorial, To know more Click <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>

</lightning-card>

</template>

Create LWC JavaScript File

Step 3:- Create Lightning Web Component : fetchPicklistValueLwc.js

SFDX:Lightning Web Component >> New >> fetchPicklistValueLwc.js

fetchPicklistValueLwc.js [LWC JavaScript File]

  import { LightningElement,track,wire } from 'lwc';
import pickListValueDynamically from '@salesforce/apex/lwcPicklistController.pickListValueDynamically';

export default class FetchPicklistValueLwc extends LightningElement {
 @track picklistVal;

@wire(pickListValueDynamically, {customObjInfo: {'sobjectType' : 'scoreCard__c'},
selectPicklistApi: 'targetVSActuals__c'}) selectTargetValues;
    
  selectOptionChanveValue(event){       
       this.picklistVal = event.target.value;
   }  
   
}

import { LightningElement,track,wire } from 'lwc';

import pickListValueDynamically from '@salesforce/apex/lwcPicklistController.pickListValueDynamically';

export default class FetchPicklistValueLwc extends LightningElement {

@track picklistVal;

@wire(pickListValueDynamically, {customObjInfo: {'sobjectType' : 'scoreCard__c'},

selectPicklistApi: 'targetVSActuals__c'}) selectTargetValues;

selectOptionChanveValue(event){

this.picklistVal = event.target.value;

}

Create LWC Meta Data XML

Step 4:- Create Lightning Web Component : fetchPicklistValueLwc.js-meta.xml

SFDX:Lightning Web Component >> New >> fetchPicklistValueLwc.js-meta.xml

fetchPicklistValueLwc.js-meta.xml [LWC Meta Data XML]

  <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
      </targets>
</LightningComponentBundle>

<?xml version="1.0" encoding="UTF-8"?>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>

TechW3web:- To know more, Use this Link

Further post that would you like to learn in LWC

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

3 thoughts on “Fetching picklist values dynamically through apex class method and display selected picklist value in Salesforce lightning web component – LWC”

Praveen Patil

January 30, 2021 at 6:03 pm

I hope this tutorial is for advance SFDC developers. Thanks for sharing such kind information. I will pass it on with the friends.

For recent tech blogs click here
satta matka

February 19, 2021 at 3:42 am

I really enjoyed reading your memoirs. I am an avid Star Wars fan, as well as an artist, and every once in a while I look for good articles to read on some of the things that interest me. All I had to do was type in Darth Vader and there you where. Keep up the good work, and maybe even check out some of my Star Wars art that I have published on my art profile sometime. satta Matka
Mehran Khan

March 27, 2021 at 5:04 am

This is nice article for us

Fetching picklist values dynamically through apex class method and display selected picklist value in Salesforce lightning web component – LWC