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.
|
Final Output
Other 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]
|
1 2 3 |
<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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
Step 3:- Create Lightning Component : statusCmpController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
statusCmpController.js [JavaScript Controller]
|
1 2 3 4 5 |
({ 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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
({ 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]
|
1 2 3 4 5 6 7 8 9 10 11 |
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
good post
appriciated
ye blog bhut acha hai. mai na visit kia hai bhut informativ mai.
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
w3blog is a great platform to learn something different. excellent explanation..nice to see you again and again.so provide such informative article .