Get Picklist Values Dynamically In Lightning Component
In below example I’m retrieving “Account” object “Industry” picklist values and populating on lightning component using lightning:select and creating account record.
Apex Controller:
public class SampleAuraController {
@AuraEnabled //Save Account Data
Public static void createAccount(Account objacc){
try{
//Insert Account Record
insert objacc;
}catch(Exception e){
//throw exception message
throw new AuraHandledException(e.getMessage());
}
finally {
}
}
@AuraEnabled //get Account Industry Picklist Values
public static Map<String, String> getIndustry(){
Map<String, String> options = new Map<String, String>();
//get Account Industry Field Describe
Schema.DescribeFieldResult fieldResult = Account.Industry.getDescribe();
//get Account Industry Picklist Values
List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
for (Schema.PicklistEntry p: pList) {
//Put Picklist Value & Label in Map
options.put(p.getValue(), p.getLabel());
}
return options;
}
}
Lightning Component:
<!--Sample.cmp-->
<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Declare Attributes-->
<aura:attribute name="industryMap" type="Map"/>
<aura:attribute name="acc" type="Account" default="{'sobjectType':'Account',
'Name': '',
'AccountNumber': '',
'Email': '',
'Phone': '',
'Industry': ''}"/>
<!--Declare Handler-->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!--Component Start-->
<div class="slds-m-around--xx-large">
<div class="container-fluid">
<div class="form-group">
<lightning:input name="accName" type="text" required="true" maxlength="50" label="Account Name" value="{!v.acc.Name}" />
</div>
<div class="form-group">
<lightning:input name="accNumber" type="text" required="true" maxlength="10" label="Account Number" value="{!v.acc.AccountNumber}" />
</div>
<div class="form-group">
<lightning:input name="accEmail" type="email" required="true" maxlength="100" label="Email" value="{!v.acc.Email}" />
</div>
<div class="form-group">
<lightning:input name="accPhone" type="phone" required="true" maxlength="10" label="Phone" value="{!v.acc.Phone}" />
</div>
<div class="form-group">
<lightning:select aura:id="industryPicklist" value="{!v.acc.Industry}" onchange="{!c.handleCompanyOnChange}" name="industryPicklist" label="Industry" required="true">
<option value="">--None--</option>
<aura:iteration items="{!v.industryMap}" var="ind" indexVar="key">
<option text="{!ind.value}" value="{!ind.key}" selected="{!ind.key==v.acc.Industry}" />
</aura:iteration>
</lightning:select>
</div>
</div>
<br/>
<lightning:button variant="brand" label="Submit" onclick="{!c.handleAccountSave}" />
</div>
<!--Component End-->
</aura:component>
Lightning JS Controller:
({
//Load Account Industry Picklist
doInit: function(component, event, helper) {
helper.getIndustryPicklist(component, event);
},
//handle Account Save
handleAccountSave : function(component, event, helper) {
helper.saveAccount(component, event);
},
//handle Industry Picklist Selection
handleCompanyOnChange : function(component, event, helper) {
var indutry = component.get("v.acc.Industry");
alert(indutry);
}
})
Lightning JS Helper:
({
//get Industry Picklist Value
getIndustryPicklist: function(component, event) {
var action = component.get("c.getIndustry");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var result = response.getReturnValue();
var industryMap = [];
for(var key in result){
industryMap.push({key: key, value: result[key]});
}
component.set("v.industryMap", industryMap);
}
});
$A.enqueueAction(action);
},
//handle Account Save
saveAccount : function(component, event) {
var acc = component.get("v.acc");
var action = component.get("c.createAccount");
action.setParams({
objacc : acc
});
action.setCallback(this,function(response){
var state = response.getState();
if(state === "SUCCESS"){
alert('Record is Created Successfully');
} else if(state === "ERROR"){
var errors = action.getError();
if (errors) {
if (errors[0] && errors[0].message) {
alert(errors[0].message);
}
}
}else if (status === "INCOMPLETE") {
alert('No response from server or client is offline.');
}
});
$A.enqueueAction(action);
}
})
Output:
