Requirement: Show standard object picklist values on lightining component
We face alot of problems in lightining when there is a requirement when we need to Show standard object picklist on lightining component . do not worry I have a solution for you .
You need to do three things to show picklist value on lightining component.
- Get the picklist value as a list in your component controller
- call your controller method from js controller on page load or use doinit method and set the picklist values to the input select items in component.
- then you have to use input select tag on your component and iterate over the list you set from jscontroller
Lightining component:
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="yourcomponentcontrollerclass"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <div class="slds-p-around--none slds-panel__section"> <div class="slds-p-horizontal--small slds-size--1-of-2"> <div class="slds-form-element"> <label class="slds-form-element__label">Industry</label> <div class="slds-form-element__control" style="min-height: 18px;"> // We use input select tag to display picklist values, here we are showing accounts industry picklist values <ui:inputSelect class="slds-input hide" aura:id="editMode11" value="{!v.acc.Industry}"> // now we iterate over the list of picklist here we set items value from js controller <aura:iteration items="" var="level" aura:id="picklist"> <ui:inputSelectOption text="{!level}" label="{!level}"/> </aura:iteration> </ui:inputSelect> </div> </div> </div> </div> </aura:component>
@@@@@@@@@@@@@ JS controller @@@@@@@@@@@@@@@@@
({ doInit : function(component, event, helper) { // getting picklist value as a list var pickVal = component.get("c.getPickListValuesIntoList"); pickVal.setCallback(this, function(response) { var state = response.getState(); if (component.isValid() && state === "SUCCESS") { console.log('picklist Values : ',response.getReturnValue()); // We are setting picklist values to the input select items in component component.find("picklist").set("v.items", response.getReturnValue()); } else { console.log("Failed with state: " + state); } }); $A.enqueueAction(pickVal); } })
@@@@@@@@@@@@@@@@@@ Component Controller @@@@@@@@@@@@@@
public class yourcomponentcontrollerclass{ // getting picklist values into list @AuraEnabled public static List<String> getPickListValuesIntoList(){ List<String> pickListValuesList= new List<String>(); Schema.DescribeFieldResult fieldResult = Account.Industry.getDescribe(); List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues(); for( Schema.PicklistEntry pickListVal : ple){ pickListValuesList.add(pickListVal.getLabel()); } return pickListValuesList; } }
Hits: 1235
Very helpful while writing Lightning components.Thanks for the post.
Thanks for your appreciation