function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MokshadaMokshada 

how to select one lastname from dropdown and show related contacts whose lastname is that value in lightning component

I have one lightning component which shows related contacts of that account and one dropdown which contains lastnames of all related contacts.
now I want to show suppose if I select Jain lastname from that dropdown I want to show only related contacts whose lastname is jain. How to achieve this?

code:-
apex:
public class relatedcontactlist {
    @AuraEnabled
    public static wrapContact getRelatedList(String recordId)
    {
        List<Contact> Conlist = [Select AccountId,Id,firstname,lastname from Contact where AccountId=: recordId ];
        Set<String> lastnames = new Set<String>();
        wrapContact wrapinst = new wrapContact();
        wrapinst.contactListt = Conlist;
        lastnames.add('All');
        for(Contact con :Conlist)
        {
            lastnames.add(con.lastname);
        }
        wrapinst.lastnameSet = lastnames;
        System.debug(wrapinst.contactListt);
       System.debug(wrapinst.lastnameSet);
        return wrapinst;
        
    }
    public class wrapContact{
         @AuraEnabled 
        public list<contact> contactListt{get;set;}
         @AuraEnabled 
        public set<String> lastnameSet{get;set;}
      
    }
}

component:
<aura:component controller="relatedcontactlist" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="ContactList" type="Contact[]"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="options" type="List" />
    <aura:attribute name="conOption" type="List" />
    <aura:attribute name="selectedContact" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.myAction}" />
    <lightning:card iconName="standard:work_capacity_usage" title="Related Contacts">
        
   <lightning:select name="con" label="Select a Contact:" aura:id="con" value="{!v.selectedContact}" onchange="{!c.changeAction}">
            <aura:iteration items="{!v.conOption}" var="opt">
                <option text="{!opt}" value="{!opt}"/>
            </aura:iteration>
        </lightning:select>
        
        <aura:if isTrue="{!not(empty(v.ContactList))}">
            <lightning:datatable data="{!v.ContactList }" 
                                 columns="{!v.columns }" 
                                 keyField="Id"
                                 hideCheckboxColumn="true"/>
            <aura:set attribute="else">
                <div Style="text-align : center"> " There are no related contacts " </div>
            </aura:set>
        </aura:if>
    </lightning:card>
</aura:component>

controller:-
({
myAction : function(component, event, helper) 
     {

component.set('v.columns', [
            {label: 'First Name', fieldName: 'FirstName', type: 'text' },
            {label: 'Last Name', fieldName: 'LastName', type: 'text' }
         ]);

         var ConList = component.get("c.getRelatedList");
         ConList.setParams
         ({
             recordId: component.get("v.recordId")
         });

         ConList.setCallback(this, function(data) 
                           {
                               var a = data.getReturnValue();
                               component.set("v.ContactList", data.getReturnValue().contactListt);
                               component.set("v.conOption", data.getReturnValue().lastnameSet);
                               //console.log(a);
                               //alert(a.contactListt);
                               //alert(a.lastnameSet);
                               //alert(a);
                               
                           });
     
        
         $A.enqueueAction(ConList);
},
  changeAction : function(component, event, helper) {
        var ConAccID = component.get("v.selectedContact");
        var action = component.get("c.getRelatedList");
        action.setParams({
            recordId: component.get("v.recordId")
        });
        action.setCallback(this, function(actionResult) {
            component.set('v.conOption.lastnameSet', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})


Thanks,
SubratSubrat (Salesforce Developers) 
Hello ,

To achieve the functionality where selecting a specific last name from the dropdown will filter the related contacts by that last name, you can make the following changes to your code:

Modify the Apex controller method getRelatedList to accept an additional parameter selectedLastName: 
public static wrapContact getRelatedList(String recordId, String selectedLastName) {
    List<Contact> Conlist;
    if (selectedLastName != 'All') {
        Conlist = [SELECT AccountId, Id, FirstName, LastName FROM Contact WHERE AccountId = :recordId AND LastName = :selectedLastName];
    } else {
        Conlist = [SELECT AccountId, Id, FirstName, LastName FROM Contact WHERE AccountId = :recordId];
    }
    // Rest of your code...
}
Update the Lightning component controller method changeAction to pass the selected last name to the server-side controller and handle the returned filtered contact list: 
changeAction: function(component, event, helper) {
    var selectedLastName = component.get("v.selectedContact");
    var action = component.get("c.getRelatedList");
    action.setParams({
        recordId: component.get("v.recordId"),
        selectedLastName: selectedLastName
    });
    action.setCallback(this, function(actionResult) {
        component.set('v.ContactList', actionResult.getReturnValue().contactListt);
    });
    $A.enqueueAction(action);
}
With these changes, when you select a last name from the dropdown, the changeAction method will be triggered. It will pass the selected last name to the server-side controller, which will return the filtered contact list based on the selected last name. The returned contact list will then be updated in the component's attribute v.ContactList, which will reflect in the UI.

Hope this helps !
Thank you.