How to fetch picklist values from apex controller in lightning component

Post Views: 1,439

Hey guys, In this post we are going to learn about how to retrieve Picklist values from Apex controller in Lightning Component.

Dynamic custom dependent picklist in lightning component Click Here For More Information

Files we used in this post example:-

statusApp.app	Lightning Application	It is used for call the component to preview on browser.
statusCmp.cmp	Lightning Component	It is used for create a picklist select option field.
statusCmpController.js	JavaScript Controller File	It is used for communicate to server side apex method and fetch the picklist value from init fuction.
statusCmpHelper.js	JavaScript Helper File	Helper function call in to javascript init function.
pickListController.apxc	Apex Class Controller	It is used for retrieve picklist values from database.
Custom Object:- Course__c Custom Object Picklist Fields:- Status__c Picklist Value:- Active, Inactive	Custom Object and their fields	We retrieve picklist values from custom field and display on the dropdown.

Final Output

Other related post that would you like to learn in lightning component.

Get Picklist Values Dynamically and display Picklist values & Radio Buttons value in Lightning Component Salesforce
Retrieve data of Cross-object(Lookup/Master-Detail) from child to parent for custom objects and navigate to record detail page in lightning component Salesforce
Write a Batch Apex to Update all the Industry and Type Field of Account and re-call batch class from batch Using Database.executeBatch in finish method
Writing a Custom Schedulable Batch Apex Class and Schedule job Weekly at Specific Date and Time in Salesforce
A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS)
How to Avoid Duplicate Name Record Simply Using a Apex Controller Method and Validating a Lightning Input Form with Email Regex Pattern Checked and Submit Form on Click Button in Salesforce Lightning
A Simple Example of Application Event Handling Between two Custom Lightning Components in Salesforce
How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript

Step 1:- Create Lightning Application : statusApp.app

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

statusApp.app [Component Application File]

  <aura:application extends="force:slds">
    <c:statusCmp/>
</aura:application>

<aura:application extends="force:slds">

<c:statusCmp/>

</aura:application>

Step 2:- Create Lightning Component : statusCmp.cmp

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

statusCmp.cmp [Lightning Component]

  <aura:component controller="pickListController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:actionOverride" access="global" >
    <aura:html tag="style">.forceStyle.desktop .viewport{background:#fff;}</aura:html>
    <aura:attribute name="coursesObj" type="Course__c" default="{'sobjectType':'Course__c'}"/>
    <aura:attribute name="statusListItems" type="Course__c[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>     
    
    <div class="slds">
         <div class="slds-grid slds-wrap">
             <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
                 <div class="slds-form-element">
                     <label class="slds-form-element__label">Status</label>
                     <div class="slds-form-element__controller">
                         <ui:inputSelect class="slds-select" aura:id="statusId" value="{!v.coursesObj.Status__c}">
                             <ui:inputSelectOption text="--None--"/>
                             <aura:iteration items="{!v.statusListItems}" var="statusVar">
                                 <ui:inputSelectOption text="{!statusVar}"/>
                             </aura:iteration>
                         </ui:inputSelect>
                     </div>
                 </div>
             </div>
        </div>
    </div>
</aura:component>

<aura:component controller="pickListController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:actionOverride" access="global" >

<aura:html tag="style">.forceStyle.desktop .viewport{background:#fff;}</aura:html>

<aura:attribute name="coursesObj" type="Course__c" default="{'sobjectType':'Course__c'}"/>

<aura:attribute name="statusListItems" type="Course__c[]"/>

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

<label class="slds-form-element__label">Status</label>

<ui:inputSelect class="slds-select" aura:id="statusId" value="{!v.coursesObj.Status__c}">

<ui:inputSelectOption text="--None--"/>

<aura:iteration items="{!v.statusListItems}" var="statusVar">

<ui:inputSelectOption text="{!statusVar}"/>

</aura:iteration>

</ui:inputSelect>

</div>

</aura:component>

Step 3:- Create Lightning Component : statusCmpController.js

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

statusCmpController.js [JavaScript Controller]

   ({
    doInit:function(component, event, helper){
        helper.statusListItemsView(component);        
    },    
})

({

doInit:function(component, event, helper){

helper.statusListItemsView(component);

})

Step 4:- Create Lightning Component : statusCmpHelper.js

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

statusCmpHelper.js [JavaScript Helper]

   ({
   statusListItemsView : function(component, event, helper) {
		var action = component.get('c.pickList');
        action.setParams({"obj":"Course__c", "str":"Status__c"});
        
        action.setCallback(this, function(response){
            var state = response.getState();              
            if(state == "SUCCESS"){
                var result = response.getReturnValue();
                component.set('v.statusListItems',result);
            }
        });
        $A.enqueueAction(action);
	},    
  })

({

statusListItemsView : function(component, event, helper) {

var action = component.get('c.pickList');

action.setParams({"obj":"Course__c", "str":"Status__c"});

action.setCallback(this, function(response){

var state = response.getState();

if(state == "SUCCESS"){

var result = response.getReturnValue();

component.set('v.statusListItems',result);

}

});

$A.enqueueAction(action);

})

Step 5:- Create Lightning Application : pickListController.apxc

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

pickListController.apxc [Apex Class Controller]

   public class pickListController {            
    @AuraEnabled
    public static List<String> pickList(String obj, String str) {
         List<String> regList = new List<String>(); 
            Schema.DescribeFieldResult plistvalues = Schema.getGlobalDescribe().get(obj).getDescribe().fields.getMap().get(str).getDescribe();
            for(PicklistEntry ent:plistvalues.getpicklistvalues())     {
                regList.add(ent.getLabel());
            }
             return regList;
      }
  }

public class pickListController {

@AuraEnabled

public static List<String> pickList(String obj, String str) {

List<String> regList = new List<String>();

Schema.DescribeFieldResult plistvalues = Schema.getGlobalDescribe().get(obj).getDescribe().fields.getMap().get(str).getDescribe();

for(PicklistEntry ent:plistvalues.getpicklistvalues()) {

regList.add(ent.getLabel());

}

return regList;

}

Further post that would you like to learn in lightning component.

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

8 thoughts on “How to fetch picklist values from apex controller in lightning component”

sharegiants

October 20, 2020 at 4:46 am

good post
appriciated
Ghulam Hussain

October 22, 2020 at 7:07 am

ye blog bhut acha hai. mai na visit kia hai bhut informativ mai.
Raphael Ogazie

October 22, 2020 at 12:03 pm

Hi, Great! thanks for sharing awesome info. i really love to to read your blog posts all the time and so will implement your way
queryexpress

October 26, 2020 at 6:28 pm

w3blog is a great platform to learn something different. excellent explanation..nice to see you again and again.so provide such informative article .
RUCHA BAJPAI

November 28, 2020 at 7:33 am

great information for begginer.
kashifhossain

December 7, 2020 at 7:46 pm

In this blog I get a great post sir please also visit my blog I post great content
Joganireinforcement

February 8, 2021 at 9:10 am

Very Nice Post
Do Follow 5 Backlinks
saim

April 28, 2021 at 11:27 am

In this blog I get a great post sir please also visit my blog I post great content…
buy Google voice number
Twitter pva accounts
Buy Instagram pva accounts
Buy Facebook pva accounts