Hello folks, In this tutorial, I am going to show you How to dynamically Bind picklist field value in Lightning Component Salesforce.

AFTER COMPLETING THIS TUTORIAL YOU WILL BE ABLE TO UNDERSTAND:

How to dynamically bind Picklist field value in Lightning component

WHAT YOU’LL DO?

Create a component that will bind the Stage field value from Opportunity object in the Lightning Component.

How to Dynamically Bind Picklist field value in Lightning component:

Login to your Salesforce account and open developer console.

Salesforce

STEP 1: CREATE AN APEX CLASS:

Goto File>New and Create a New Apex class called BindPickListController. Replace the following code in BindPickListController class.

public class BindPickListController {
@AuraEnabled
public static List<String> GetOpportunityStage()
{
List<String> lstData=new List<String>();
Schema.DescribeFieldResult fieldResult = Opportunity.StageName.getDescribe();
List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
for(Schema.PicklistEntry s:ple){
 
lstData.add(s.getLabel());
 
} 
return lstData;
} 
}

Following line of code is responsible for fetching Picklist field value for Stage field in opportunity object.

Schema.DescribeFieldResult fieldResult = Opportunity.StageName.getDescribe();
List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();.

STEP 2: CREATE LIGHTNING COMPONENT:

Goto File>New and create a Lightning Component called BindPickListValueDemo. Write the following markup in Component.

<aura:component controller="BindPickListController" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="lstValue" type="String[]" />
<ui:inputSelect aura:id="ddlStage" >
<ui:inputSelectOption label="Please Select"/>
<aura:iteration items="{!v.lstValue}" var="value">
<ui:inputSelectOption label="{!value}" text="{!value}" />
</aura:iteration>
</ui:inputSelect>
</aura:component>

BindPickListValueDemoController.js

({
doInit : function(component, event, helper) {
var action = component.get('c.GetOpportunityStage');
 
 
action.setCallback(this, function(actionResult) {
var result=actionResult.getReturnValue(); 
component.set("v.lstValue",result);
 
});
$A.enqueueAction(action);
}
})

TEST THE COMPONENT.

Create a New Lightning Application and replace the following code.

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

Output:

Picklist

View More:

Conclusion:

I hope you would love this post. I would like to have your feedback, comments, and suggestions

Thank You.

Leave a Comment