How to fetch picklist values from apex controller in lightning component

Post Views: 96

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

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.

Other related post that would you like to learn…

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;

}

Related further post that you want to learn……

Step 6:- Final Output