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