Dynamically Render Picklist Values Without UI API For Aura Components

Dynamically render picklist values


In this post, you’ll learn how to leverage a base Lighting Component to dynamically display the picklist values from fields of different record types without using the Salesforce UI API. You will learn this by using the code and steps below in your developer sandbox. The implementation is with Aura and not LWC.

This is an important distinction because it is relatively straight-forward to leverage Lightning Web Components (LWC) and the Salesforce UI API to render picklist values as per the docs however, it is trickier to achieve this with Aura (either via the Salesforce UI API or an AuraEnabled method that leverages Schema.DescribeFieldResult and List<Schema.PicklistEntry>.

Lightning Component:

<!-- @Author: Ravi Prasad -->
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,force:lightningquickActionWithoutHeader">
    <aura:attribute name="RecordTypeId" type="String" access="public"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:recordEditForm aura:id="recordEditForm" recordId="{!v.RecordId}" recordTypeId="{!v.RecordTypeId}" objectApiName="Account" class="slds-p-top_small"> 
        <span class="slds-hide slds-required" aura:id="required">*</span>
        <lightning:inputField aura:id="picklist" fieldName="Industry"  />
        <lightning:inputField fieldName="RecordId" value="{!v.RecordId}" class="slds-hide" />
        <lightning:inputField fieldName="RecordTypeId" value="{!v.RecordTypeId}" class="slds-hide" />       
    </lightning:recordEditForm>
</aura:component>


Javascript Controller:

/* @Author: Ravi Prasad */
({
    doInit : function(componenteventhelper) {       
        console.log('the doInit was called');
        
        var fullURL = window.location.href;
        var recordTypeId = fullURL.substring(fullURL.indexOf("recordTypeId"+ 13,fullURL.indexOf("recordTypeId"+ 31);
        
        console.log('the recordTypeId is: ' + recordTypeId);  
        
        if (recordTypeId != null) {
            component.set("v.RecordTypeId"recordTypeId);
           // console.log('the v.RecordTypeId is: ' + component.get("v.RecordTypeId")); 
        } 
    }
})
Post a Comment (0)
Previous Post Next Post