Display List Of Records as Picklist Values Based on RecordTypes using Lightning Component

By | November 11, 2019

Hi, In this scenario we have shown how to Display a List Of Records as Picklist Values Based on the RecordTypes. By selecting record type, related data will be displayed as picklist values.

Apex Controller

public class DisplayRecordTypeRecords {
    public static Map<Id, String> recordtypemap {get;set;}
    
    @AuraEnabled
    public static List<String> fetchRecordType(){
        List<Schema.RecordTypeInfo> recordtypes = Account.SObjectType.getDescribe().getRecordTypeInfos();    
        recordtypemap = new Map<Id, String>();
        for(RecordTypeInfo rt : recordtypes){
            if(rt.getName() != 'Master')
                recordtypemap.put(rt.getRecordTypeId(), rt.getName());
        }        
        return recordtypemap.values();
    }
    
    @AuraEnabled 
    public static List<Account> fetchRecords(string AcctId){
        return [select id,Name from Account where RecordType.Name =: AcctId];  
    }
}

Lightning Component : DisplayRecordTypeRecords

<aura:component controller="DisplayRecordTypeRecords" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="openmodel" type="boolean"/>
    <aura:handler name="init" value="{!this}" action="{!c.fetchListOfRecordTypes}"/>
    <aura:attribute name="lstOfRecordType" type="String[]" />
    <aura:attribute name="lstOfRecordType1" type="String[]" />
    <aura:attribute name="selectedRecordvalue" type="String[]" />
    <aura:attribute name="selectedLookUpRecord" type="sObject" default="{}"/>
    
    <lightning:button label="share Record" variant="neutral" onclick="{!c.PerformAction}" />
    
    
    <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal_small slds-backdrop ">
        <div class="slds-modal__container ">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">Sharing Records Using Salesforce Lightning</h2>
                <button class="slds-button slds-modal__close slds-button--icon" title="Close" onclick="{!c.closeModal}">
                    <lightning:icon iconName="utility:close" size="medium" />
                    <span class="slds-assistive-text">Close</span>
                </button>
            </div>
            <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap " style="height:400px;" >
                <!--    <force:recordView aura:id="view" recordId="{!v.viewAccId}"/>-->
                <div class="slds-size--1-of-2 slds-large-size--1-of-2 ">
                    <Lightning:select aura:id="selectid" label="Select Record Type" onchange="{!c.selectedvalue}">
                        <aura:iteration items="{!v.lstOfRecordType}" var="account">                            
                            <ui:inputSelectOption text="{!account}"  label="{!account}" />
                        </aura:iteration>
                    </Lightning:select><br/>
                </div>
                <Lightning:select aura:id="selectid1" label="Select Record " onchange="{!c.ShowContacts}">
                    <aura:iteration items="{!v.lstOfRecordType1}" var="acc">                            
                        <ui:inputSelectOption text="{!acc}" label="{!acc.Name}"  />
                    </aura:iteration>
                </Lightning:select>                
            </div>
        </div>
    </div>    
</aura:component>

js Controller

({
    PerformAction : function(component, event, helper) {
        component.set("v.openmodel",true);
    },
    closeModal:function(component,event,helper){    
        var cmpTarget = component.find('editDialog');
        var cmpBack = component.find('overlay');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
        component.set('v.openmodel',false);
        
    },
    fetchListOfRecordTypes: function(component, event, helper) {
        var action = component.get("c.fetchRecordType");
        action.setCallback(this, function(response) {
            component.set("v.lstOfRecordType", response.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    selectedvalue: function(component, event, helper) {
        var a = event.getSource().get("v.value");   
        alert(a);  
        var action = component.get("c.fetchRecords");
        action.setParams({"AcctId":a});
        action.setCallback(this, function(response) {
            component.set("v.lstOfRecordType1", response.getReturnValue());
        });
        $A.enqueueAction(action);
    }
    
})

Output

When Record type selected, the related available data for the selected Record type will be shown as picklist values…

Leave a Reply

Your email address will not be published. Required fields are marked *