Hello Everyone, In this tutorial, I am going to provide an example of Lightning Component that illustrates you, how to bind a picklist field value dynamically in Lightning Component. In this example, I am using Schema namespace to get sObject field value dynamically, so please go through the tutorial.
After completing this tutorial, you’ll able to:
- Bind Picklist field value dynamically.
So, Let's get started,
Dynamically Bind Picklist Value in Lightning Component
Step 1: Login to your Salesforce Org. and open developer console.
Step 2: Go to File>New>Apex Class and Create an Apex controller called PickListHandler. Replace following code in apex controller.
PickListHandler.apxc
PickListHandler.apxc
public class PickListHandler {
@AuraEnabled
public static List<String> getIndustry(){
List<String> lstndustry=new List<String>();
Schema.DescribeFieldResult fieldResult = Account.Industry.getDescribe();
List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
for(Schema.PicklistEntry s:ple){
lstndustry.add(s.getLabel());
}
return lstndustry;
}
}
Step 3: Go to File>New>Lightning Component and create a Lightning Component called PickList. Replace the following markup in the Lightning Component.PickList.cmp
<aura:component controller="PickListHandler">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="lstIndustry" type="String[]" />
<ui:inputSelect aura:id="ddIndustry" change="{!c.getSelectedValue}">
<ui:inputSelectOption label="-Select-" value="true"/>
<aura:iteration items="{!v.lstIndustry}" var="value">
<ui:inputSelectOption label="{!value}" text="{!value}" />
</aura:iteration>
</ui:inputSelect>
</aura:component>
PickListController.js
({
doInit : function(component, event, helper) {
var action = component.get("c.getIndustry");
action.setCallback(this, function(e) {
if(e.getState()=='SUCCESS'){
var result=e.getReturnValue();
component.set("v.lstIndustry",result);
}
});
$A.enqueueAction(action);
},
getSelectedValue:function(component, event, helper){
var picklist=component.find('ddIndustry');
var picklistvalue=picklist.get('v.value');
alert(picklistvalue);
},
})
Step 4: Go to File>New>Lightning Application and create a Lightning Application called Preview. Replace the following markup in the Lightning Application and click on the preview button.
<aura:application extends="force:slds">
<c:PickList/>
</aura:application>
Output:
See also:
- Email Field Validation in Lightning Component
- Delete Lightning Component in Salesforce
- Multiselect Picklist in Lightning Component
Hope you like this tutorial, for any query or suggestions
please feel free to comment.
Thank you.

0 Comments
Post a Comment