Display list of Account Records as picklist values (in dropdown) and differentiate them based on Account Record Types using Lightning – Aura

 

Display list of Account Records as picklist values (in dropdown) and differentiate them based on Account Record Types using Lightning – Aura

 

Let’s display the list of Account Records as picklist values (also differentiate them based on record type). When one record type is selected, related accounts will get displayed and when other record type is selected, records related to that record type will get displayed.

 

Class:

public class displayAccountRecordsInDropdown {

  public static Map<Id, String> rtMap {get;set;}

    @AuraEnabled

    public static List<String> getRecordTypesMethod(){

        List<Schema.RecordTypeInfo> recordtypes = Account.SObjectType.getDescribe().getRecordTypeInfos();   

        rtMap = new Map<Id, String>();

        for(RecordTypeInfo rt : recordtypes){

            if(rt.getName() != 'Master')

                rtMap.put(rt.getRecordTypeId(), rt.getName());

        }       

        return rtMap.values();

    }

    @AuraEnabled

    public static List<Account> fetchRecords(string aId){

        return [select id,Name from Account where RecordType.Name =: aId]; 

    }

}

 

Lightning Component:

<aura:component controller="displayAccountRecordsInDropdown" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <aura:handler name="init" value="{!this}" action="{!c.getRecordTypes}"/>

    <aura:attribute name="listRT1" type="String[]" />

    <aura:attribute name="listRT2" type="String[]" />

    <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">

                <br/>

                <h2 class="slds-text-heading--medium">Select the Record Type to view the related Accounts</h2>

                <br/><br/>

            </div>

            <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap " style="height:400px;" >

                <div class="slds-size--1-of-2 slds-large-size--1-of-2 ">

                    <Lightning:select aura:id="selectid" label="Please select the Account Record Type" onchange="{!c.selectedvalue}">

                        <aura:iteration items="{!v.listRT1}" var="account">                           

                            <ui:inputSelectOption text="{!account}"  label="{!account}" />

                        </aura:iteration>

                    </Lightning:select><br/>

                </div>

                <Lightning:select aura:id="selectid1" label="Record(s) belonging to the selected Record Type">

                    <aura:iteration items="{!v.listRT2}" var="acct">                           

                        <ui:inputSelectOption text="{!acct}" label="{!acct.Name}"  />

                    </aura:iteration>

                </Lightning:select>               

            </div>

        </div>

    </div>   

</aura:component>

 

Lightning Controller:

({

    getRecordTypes: function(component, event, helper) {

        var action = component.get("c.getRecordTypesMethod");

        action.setCallback(this, function(response) {

            component.set("v.listRT1", response.getReturnValue());

        });

        $A.enqueueAction(action);

    },

    selectedvalue: function(component, event, helper) {

        var action = component.get("c.fetchRecords");

        action.setParams({"aId":event.getSource().get("v.value")});

        action.setCallback(this, function(response) {

            component.set("v.listRT2", response.getReturnValue());

        });

        $A.enqueueAction(action);

    }

   

})

 

Output:

Now add this component to (suppose) Home Page –

It looks like -