How to make two dropdowns work simultenously and show the output using aura component

Hello, I have two dropdowns one is of contacts lastname and another is for contacts title and I want to show the data according to both dropdowns selected value.
suppose in lastname deshmukh is selected and for title abc is selected then it should the contacts whose lastname is deshmukh and title is abc.
I have attached my code here I can see data according to lastname value but for title it is not working. can anyone help how can I do that.
stuck here from two days.
code:-
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="titOption" type="List" />
<aura:attribute name="selectedContact" type="String" />
<aura:attribute name="selectedtitle" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.myAction}" />
<lightning:card iconName="standard:work_capacity_usage" title="Related Contacts">

<lightning:layout>
<lightning:layoutItem size="6" class="left-align">
<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}" selected="{!opt.selected}"/>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>

<lightning:layoutItem size="6" class="right-align">
<lightning:select name="tit" label="Select a title:" aura:id="tit" value="{!v.selectedtitle}" onchange="{!c.changetitle}">
<aura:iteration items="{!v.titOption}" var="opt">
<option text="{!opt}" value="{!opt}" selected="{!opt.selected}"/>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
</lightning:layout>
<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: 'Title', fieldName: 'Title', type: 'text' },
{label: 'First Name', fieldName: 'FirstName', type: 'text' },
{label: 'Last Name', fieldName: 'LastName', type: 'text' },
{label: 'Email', fieldName: 'Email', type: 'Email' },
{label: 'Phone', fieldName: 'Phone', type: 'Phone' }

]);

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);
component.set("v.titOption", data.getReturnValue().titleSet);
});


$A.enqueueAction(ConList);
},
changeAction : function(component, event, helper) {
var sel = component.get("v.selectedContact");
var ConListt = component.get("c.getSelectedList");
if(sel == "All")
{
$A.enqueueAction(component.get('c.myAction'));
}
else{
ConListt.setParams
({
recordId: component.get("v.recordId"),
selectedCon : component.get("v.selectedContact")
});
ConListt.setCallback(this, function(data)
{
component.set("v.ContactList", data.getReturnValue());
});

$A.enqueueAction(ConListt);
}

},
changetitle : function(component, event, helper) {
alert(component.get("v.selectedtitle"));
var sel = component.get("v.selectedtitle");
var ConLists = component.get("c.getSelectedListoftitle");
console.log(ConLists);
ConLists.setParams
({
recordId: component.get("v.recordId"),
selectedtit : component.get("v.selectedtitle")
});
console.log(selectedtit);
ConLists.setCallback(this, function(data)
{
component.set("v.ContactList", data.getReturnValue());
});

$A.enqueueAction(ConLists);
}


})

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

}
@AuraEnabled
public static List<Contact> getSelectedList(String recordId, String selectedCon)
{

List<Contact> showCon = [SELECT AccountId,LastName ,FirstName,Email,Phone,title FROM Contact WHERE AccountId =: recordId AND LastName =:selectedCon];
System.debug('recordId'+recordId);
System.debug('selectedCon'+selectedCon);
return showCon;
}
public static List<Contact> getSelectedListoftitle(String recordId, String selectedtit)
{

List<Contact> showtit = [SELECT AccountId,LastName ,FirstName,Email,Phone,title FROM Contact WHERE AccountId =: recordId AND title =:selectedtit];
System.debug('recordId'+recordId);
System.debug('selectedtit'+selectedtit);
return showtit;
}
public class wrapContact{
@AuraEnabled
public list<contact> contactListt{get;set;}
@AuraEnabled
public set<String> lastnameSet{get;set;}
@AuraEnabled
public set<String> titleSet{get;set;}

}
}
I have attached UI too
Thanks, User-added image

January 5, 2023
·
Answer
·
Like
0
·
Follow
0

Subrat (Salesforce Developers)
Hello ,

To filter the contacts based on both the selected last name and title in the dropdowns, you need to make the following changes to your code:

Update the Apex controller method getSelectedListoftitle to include the filtering based on both last name and title:
public static List<Contact> getSelectedListoftitle(String recordId, String selectedLastName, String selectedTitle) { List<Contact> showtit = [SELECT AccountId, LastName, FirstName, Email, Phone, Title FROM Contact WHERE AccountId = :recordId AND LastName = :selectedLastName AND Title = :selectedTitle]; // Rest of your code... }
Update the Lightning component controller method changetitle to pass both the selected last name and title to the server-side controller:
changetitle: function(component, event, helper) { var selectedLastName = component.get("v.selectedContact"); var selectedTitle = component.get("v.selectedtitle"); var action = component.get("c.getSelectedListoftitle"); action.setParams({ recordId: component.get("v.recordId"), selectedLastName: selectedLastName, selectedTitle: selectedTitle }); action.setCallback(this, function(actionResult) { component.set('v.ContactList', actionResult.getReturnValue()); }); $A.enqueueAction(action); }
With these changes, when you select both a last name and a title from their respective dropdowns, the changetitle method will be triggered. It will pass both the selected last name and title to the server-side controller, which will return the filtered contact list based on both values. 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.

June 12, 2023
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

How to make two dropdowns work simultenously and show the output using aura component

You need to sign in to do that.