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…
Share this...
Share on Facebook
Facebook
Email this to someone
email

Leave a Reply

Your email address will not be published.