You will have to build a custom lookup field to achieve this. First, create a reusable lookup lightning component. Then, use this component in another component to display related contacts.
Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
public class LookupReusableController {
@AuraEnabled
public static List < sObject > fetchLookUpValues(String searchKeyWord, String ObjectName) {
system.debug('ObjectName-->' + ObjectName);
String searchKey = searchKeyWord + '%';
List < sObject > returnList = new List < sObject > ();
// Create a Dynamic SOQL Query For Fetch Record List with LIMIT 5
String sQuery = 'select id, Name from ' +ObjectName + ' where Name LIKE: searchKey order by createdDate DESC limit 5';
List < sObject > lstOfRecords = Database.query(sQuery);
for (sObject obj: lstOfRecords) {
returnList.add(obj);
}
return returnList;
}
}
Event: LookupReusable_Event.evt
<aura:event type="COMPONENT" description="by this event we are pass the selected sObject(lookup list record) in the parent component">
<aura:attribute name="recordByEvent" type="sObject"/>
</aura:event>
({
selectRecord : function(component, event, helper){
// get the selected record from list
var getSelectRecord = component.get("v.oRecord");
// call the event
var compEvent = component.getEvent("oSelectedRecordEvent");
// set the Selected sObject Record to the event attribute.
compEvent.setParams({"recordByEvent" : getSelectRecord });
// fire the event
compEvent.fire();
},
})
Parent Component: LookupReusable_Parent.cmp
<aura:component controller="LookupReusableController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<!--declare attributes-->
<aura:attribute name="selectedRecord" type="sObject" default="{}" description="Use,for store SELECTED sObject Record"/>
<aura:attribute name="listOfSearchRecords" type="List" description="Use,for store the list of search records which returns from apex class"/>
<aura:attribute name="SearchKeyWord" type="string"/>
<aura:attribute name="objectAPIName" type="string" default=""/>
<aura:attribute name="IconName" type="string" default=""/>
<aura:attribute name="label" type="string" default=""/>
<aura:attribute name="Message" type="String" default=""/>
<!--declare events hendlers-->
<aura:handler name="oSelectedRecordEvent" event="c:LookupReusable_Event" action="{!c.handleComponentEvent}"/>
<!-- https://www.lightningdesignsystem.com/components/lookups/ -->
<div onmouseleave="{!c.onblur}" aura:id="searchRes" class="slds-form-element slds-lookup slds-is-close" data-select="single">
<label class="slds-form-element__label" for="lookup-348">{!v.label}</label>
<!--This part is for display search bar for lookup-->
<div class="slds-form-element__control">
<div class="slds-input-has-icon slds-input-has-icon--right">
<!-- This markup is for when an record is selected -->
<div aura:id="lookup-pill" class="slds-pill-container slds-hide">
<lightning:pill class="pillSize" label="{!v.selectedRecord.Name}" name="{!v.selectedRecord.Name}" onremove="{! c.clear }">
<aura:set attribute="media">
<lightning:icon iconName="{!v.IconName}" size="x-small" alternativeText="{!v.IconName}"/>
</aura:set>
</lightning:pill>
</div>
<div aura:id="lookupField" class="slds-show">
<lightning:icon class="slds-input__icon slds-show" iconName="utility:search" size="x-small" alternativeText="search"/>
<span class="slds-icon_container slds-combobox__input-entity-icon" title="record">
<lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="{!v.IconName}" size="x-small" alternativeText="icon"/>
<span class="slds-assistive-text"></span>
</span>
<ui:inputText click="{!c.onfocus}" updateOn="keyup" keyup="{!c.keyPressController}" class="slds-lookup__search-input slds-input leftPaddingClass" value="{!v.SearchKeyWord}" placeholder="search.."/>
</div>
</div>
</div>
<!--This part is for Display typehead lookup result List-->
<ul style="min-height:40px;margin-top:0px !important" class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-lookup__menu slds" role="listbox">
<lightning:spinner class="slds-hide" variant="brand" size="small" aura:id="mySpinner"/>
<center> {!v.Message}</center>
<aura:iteration items="{!v.listOfSearchRecords}" var="singleRec">
<c:LookupReusable_Child oRecord="{!singleRec}" IconName="{!v.IconName}"/>
</aura:iteration>
</ul>
</div>
</aura:component>
({
onfocus : function(component,event,helper){
$A.util.addClass(component.find("mySpinner"), "slds-show");
var forOpen = component.find("searchRes");
$A.util.addClass(forOpen, 'slds-is-open');
$A.util.removeClass(forOpen, 'slds-is-close');
// Get Default 5 Records order by createdDate DESC
var getInputkeyWord = '';
helper.searchHelper(component,event,getInputkeyWord);
},
onblur : function(component,event,helper){
component.set("v.listOfSearchRecords", null );
var forclose = component.find("searchRes");
$A.util.addClass(forclose, 'slds-is-close');
$A.util.removeClass(forclose, 'slds-is-open');
},
keyPressController : function(component, event, helper) {
// get the search Input keyword
var getInputkeyWord = component.get("v.SearchKeyWord");
// check if getInputKeyWord size id more then 0 then open the lookup result List and
// call the helper
// else close the lookup result List part.
if( getInputkeyWord.length > 0 ){
var forOpen = component.find("searchRes");
$A.util.addClass(forOpen, 'slds-is-open');
$A.util.removeClass(forOpen, 'slds-is-close');
helper.searchHelper(component,event,getInputkeyWord);
}
else{
component.set("v.listOfSearchRecords", null );
var forclose = component.find("searchRes");
$A.util.addClass(forclose, 'slds-is-close');
$A.util.removeClass(forclose, 'slds-is-open');
}
},
// function for clear the Record Selaction
clear :function(component,event,heplper){
var pillTarget = component.find("lookup-pill");
var lookUpTarget = component.find("lookupField");
$A.util.addClass(pillTarget, 'slds-hide');
$A.util.removeClass(pillTarget, 'slds-show');
$A.util.addClass(lookUpTarget, 'slds-show');
$A.util.removeClass(lookUpTarget, 'slds-hide');
component.set("v.SearchKeyWord",null);
component.set("v.listOfSearchRecords", null );
component.set("v.selectedRecord", {} );
},
// This function call when the end User Select any record from the result list.
handleComponentEvent : function(component, event, helper) {
// get the selected Account record from the COMPONETN event
var selectedAccountGetFromEvent = event.getParam("recordByEvent");
component.set("v.selectedRecord" , selectedAccountGetFromEvent);
var forclose = component.find("lookup-pill");
$A.util.addClass(forclose, 'slds-show');
$A.util.removeClass(forclose, 'slds-hide');
var forclose = component.find("searchRes");
$A.util.addClass(forclose, 'slds-is-close');
$A.util.removeClass(forclose, 'slds-is-open');
var lookUpTarget = component.find("lookupField");
$A.util.addClass(lookUpTarget, 'slds-hide');
$A.util.removeClass(lookUpTarget, 'slds-show');
},
})
Parent Helper: LookupReusable_ParentHelper.js
({
searchHelper : function(component,event,getInputkeyWord) {
// call the apex class method
var action = component.get("c.fetchLookUpValues");
// set param to method
action.setParams({
'searchKeyWord': getInputkeyWord,
'ObjectName' : component.get("v.objectAPIName")
});
// set a callBack
action.setCallback(this, function(response) {
$A.util.removeClass(component.find("mySpinner"), "slds-show");
var state = response.getState();
if (state === "SUCCESS") {
var storeResponse = response.getReturnValue();
// if storeResponse size is equal 0 ,display No Result Found... message on screen. }
if (storeResponse.length == 0) {
component.set("v.Message", 'No Result Found...');
} else {
component.set("v.Message", '');
}
// set searchResult list with return value from server.
component.set("v.listOfSearchRecords", storeResponse);
}
});
// enqueue the Action
$A.enqueueAction(action);
},
})
<aura:application extends="force:slds">
<!-- Create attribute to store lookup value as a sObject-->
<aura:attribute name="selectedLookUpRecord" type="sObject" default="{}"/>
<c:LookupReusable_Parent objectAPIName="account" IconName="standard:account" selectedRecord="{!v.selectedLookUpRecord}" label="Account Name"/>
<!-- here c: is org. namespace prefix-->
</aura:application>
Now, you have to create another lightning component to display related contacts using reusable custom lookup component.
2. Related Contacts:(Source: Developed by me :P)
Apex: LookupRelatedContactC .apxc
public class LookupRelatedContactC {
@AuraEnabled
public static List<Contact> getCon(List<String> accId) {
return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:accId];
}
}
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
You will have to build a custom lookup field to achieve this. First, create a reusable lookup lightning component. Then, use this component in another component to display related contacts.
Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
public class LookupReusableController {
@AuraEnabled
public static List < sObject > fetchLookUpValues(String searchKeyWord, String ObjectName) {
system.debug('ObjectName-->' + ObjectName);
String searchKey = searchKeyWord + '%';
List < sObject > returnList = new List < sObject > ();
// Create a Dynamic SOQL Query For Fetch Record List with LIMIT 5
String sQuery = 'select id, Name from ' +ObjectName + ' where Name LIKE: searchKey order by createdDate DESC limit 5';
List < sObject > lstOfRecords = Database.query(sQuery);
for (sObject obj: lstOfRecords) {
returnList.add(obj);
}
return returnList;
}
}
Event: LookupReusable_Event.evt
<aura:event type="COMPONENT" description="by this event we are pass the selected sObject(lookup list record) in the parent component">
<aura:attribute name="recordByEvent" type="sObject"/>
</aura:event>
({
selectRecord : function(component, event, helper){
// get the selected record from list
var getSelectRecord = component.get("v.oRecord");
// call the event
var compEvent = component.getEvent("oSelectedRecordEvent");
// set the Selected sObject Record to the event attribute.
compEvent.setParams({"recordByEvent" : getSelectRecord });
// fire the event
compEvent.fire();
},
})
Parent Component: LookupReusable_Parent.cmp
<aura:component controller="LookupReusableController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<!--declare attributes-->
<aura:attribute name="selectedRecord" type="sObject" default="{}" description="Use,for store SELECTED sObject Record"/>
<aura:attribute name="listOfSearchRecords" type="List" description="Use,for store the list of search records which returns from apex class"/>
<aura:attribute name="SearchKeyWord" type="string"/>
<aura:attribute name="objectAPIName" type="string" default=""/>
<aura:attribute name="IconName" type="string" default=""/>
<aura:attribute name="label" type="string" default=""/>
<aura:attribute name="Message" type="String" default=""/>
<!--declare events hendlers-->
<aura:handler name="oSelectedRecordEvent" event="c:LookupReusable_Event" action="{!c.handleComponentEvent}"/>
<!-- https://www.lightningdesignsystem.com/components/lookups/ -->
<div onmouseleave="{!c.onblur}" aura:id="searchRes" class="slds-form-element slds-lookup slds-is-close" data-select="single">
<label class="slds-form-element__label" for="lookup-348">{!v.label}</label>
<!--This part is for display search bar for lookup-->
<div class="slds-form-element__control">
<div class="slds-input-has-icon slds-input-has-icon--right">
<!-- This markup is for when an record is selected -->
<div aura:id="lookup-pill" class="slds-pill-container slds-hide">
<lightning:pill class="pillSize" label="{!v.selectedRecord.Name}" name="{!v.selectedRecord.Name}" onremove="{! c.clear }">
<aura:set attribute="media">
<lightning:icon iconName="{!v.IconName}" size="x-small" alternativeText="{!v.IconName}"/>
</aura:set>
</lightning:pill>
</div>
<div aura:id="lookupField" class="slds-show">
<lightning:icon class="slds-input__icon slds-show" iconName="utility:search" size="x-small" alternativeText="search"/>
<span class="slds-icon_container slds-combobox__input-entity-icon" title="record">
<lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="{!v.IconName}" size="x-small" alternativeText="icon"/>
<span class="slds-assistive-text"></span>
</span>
<ui:inputText click="{!c.onfocus}" updateOn="keyup" keyup="{!c.keyPressController}" class="slds-lookup__search-input slds-input leftPaddingClass" value="{!v.SearchKeyWord}" placeholder="search.."/>
</div>
</div>
</div>
<!--This part is for Display typehead lookup result List-->
<ul style="min-height:40px;margin-top:0px !important" class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-lookup__menu slds" role="listbox">
<lightning:spinner class="slds-hide" variant="brand" size="small" aura:id="mySpinner"/>
<center> {!v.Message}</center>
<aura:iteration items="{!v.listOfSearchRecords}" var="singleRec">
<c:LookupReusable_Child oRecord="{!singleRec}" IconName="{!v.IconName}"/>
</aura:iteration>
</ul>
</div>
</aura:component>
({
onfocus : function(component,event,helper){
$A.util.addClass(component.find("mySpinner"), "slds-show");
var forOpen = component.find("searchRes");
$A.util.addClass(forOpen, 'slds-is-open');
$A.util.removeClass(forOpen, 'slds-is-close');
// Get Default 5 Records order by createdDate DESC
var getInputkeyWord = '';
helper.searchHelper(component,event,getInputkeyWord);
},
onblur : function(component,event,helper){
component.set("v.listOfSearchRecords", null );
var forclose = component.find("searchRes");
$A.util.addClass(forclose, 'slds-is-close');
$A.util.removeClass(forclose, 'slds-is-open');
},
keyPressController : function(component, event, helper) {
// get the search Input keyword
var getInputkeyWord = component.get("v.SearchKeyWord");
// check if getInputKeyWord size id more then 0 then open the lookup result List and
// call the helper
// else close the lookup result List part.
if( getInputkeyWord.length > 0 ){
var forOpen = component.find("searchRes");
$A.util.addClass(forOpen, 'slds-is-open');
$A.util.removeClass(forOpen, 'slds-is-close');
helper.searchHelper(component,event,getInputkeyWord);
}
else{
component.set("v.listOfSearchRecords", null );
var forclose = component.find("searchRes");
$A.util.addClass(forclose, 'slds-is-close');
$A.util.removeClass(forclose, 'slds-is-open');
}
},
// function for clear the Record Selaction
clear :function(component,event,heplper){
var pillTarget = component.find("lookup-pill");
var lookUpTarget = component.find("lookupField");
$A.util.addClass(pillTarget, 'slds-hide');
$A.util.removeClass(pillTarget, 'slds-show');
$A.util.addClass(lookUpTarget, 'slds-show');
$A.util.removeClass(lookUpTarget, 'slds-hide');
component.set("v.SearchKeyWord",null);
component.set("v.listOfSearchRecords", null );
component.set("v.selectedRecord", {} );
},
// This function call when the end User Select any record from the result list.
handleComponentEvent : function(component, event, helper) {
// get the selected Account record from the COMPONETN event
var selectedAccountGetFromEvent = event.getParam("recordByEvent");
component.set("v.selectedRecord" , selectedAccountGetFromEvent);
var forclose = component.find("lookup-pill");
$A.util.addClass(forclose, 'slds-show');
$A.util.removeClass(forclose, 'slds-hide');
var forclose = component.find("searchRes");
$A.util.addClass(forclose, 'slds-is-close');
$A.util.removeClass(forclose, 'slds-is-open');
var lookUpTarget = component.find("lookupField");
$A.util.addClass(lookUpTarget, 'slds-hide');
$A.util.removeClass(lookUpTarget, 'slds-show');
},
})
Parent Helper: LookupReusable_ParentHelper.js
({
searchHelper : function(component,event,getInputkeyWord) {
// call the apex class method
var action = component.get("c.fetchLookUpValues");
// set param to method
action.setParams({
'searchKeyWord': getInputkeyWord,
'ObjectName' : component.get("v.objectAPIName")
});
// set a callBack
action.setCallback(this, function(response) {
$A.util.removeClass(component.find("mySpinner"), "slds-show");
var state = response.getState();
if (state === "SUCCESS") {
var storeResponse = response.getReturnValue();
// if storeResponse size is equal 0 ,display No Result Found... message on screen. }
if (storeResponse.length == 0) {
component.set("v.Message", 'No Result Found...');
} else {
component.set("v.Message", '');
}
// set searchResult list with return value from server.
component.set("v.listOfSearchRecords", storeResponse);
}
});
// enqueue the Action
$A.enqueueAction(action);
},
})
<aura:application extends="force:slds">
<!-- Create attribute to store lookup value as a sObject-->
<aura:attribute name="selectedLookUpRecord" type="sObject" default="{}"/>
<c:LookupReusable_Parent objectAPIName="account" IconName="standard:account" selectedRecord="{!v.selectedLookUpRecord}" label="Account Name"/>
<!-- here c: is org. namespace prefix-->
</aura:application>
Now, you have to create another lightning component to display related contacts using reusable custom lookup component.
2. Related Contacts:(Source: Developed by me :P)
Apex: LookupRelatedContactC .apxc
public class LookupRelatedContactC {
@AuraEnabled
public static List<Contact> getCon(List<String> accId) {
return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:accId];
}
}
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Hi Khan Anas - I am in the process of building lighting app which shows account and its child say contact and each contacts campaigns. Any suggestion will be helpful.
Hi Anas Khan, How can I use the same Reusable Custom Lookup in my LWC component, as I dont want to create any custom lookup in LWC so how would I use the same in LWC as you have used in the aura(which is developed by you)
Greetings to you!
You will have to build a custom lookup field to achieve this. First, create a reusable lookup lightning component. Then, use this component in another component to display related contacts.
Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
1. Reusable Custom Lookup: (Source: http://sfdcmonkey.com/2017/07/17/re-usable-custom-lookup/)
Apex: LookupReusableController.apxc
Event: LookupReusable_Event.evt
Child Component: LookupReusable_Child.cmp
Child Controller: LookupReusable_ChildController.js
Parent Component: LookupReusable_Parent.cmp
Parent Controller: LookupReusable_ParentController.js
Parent Helper: LookupReusable_ParentHelper.js
Parent CSS: LookupReusable_Parent.css
Application: LookupReusable.app
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Now, you have to create another lightning component to display related contacts using reusable custom lookup component.
2. Related Contacts: (Source: Developed by me :P)
Apex: LookupRelatedContactC .apxc
Component: LookupRelatedContact.cmp
Controller: LookupRelatedContactController.js
Application: App_LookupRelatedContact.app
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
All Answers
Greetings to you!
You will have to build a custom lookup field to achieve this. First, create a reusable lookup lightning component. Then, use this component in another component to display related contacts.
Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
1. Reusable Custom Lookup: (Source: http://sfdcmonkey.com/2017/07/17/re-usable-custom-lookup/)
Apex: LookupReusableController.apxc
Event: LookupReusable_Event.evt
Child Component: LookupReusable_Child.cmp
Child Controller: LookupReusable_ChildController.js
Parent Component: LookupReusable_Parent.cmp
Parent Controller: LookupReusable_ParentController.js
Parent Helper: LookupReusable_ParentHelper.js
Parent CSS: LookupReusable_Parent.css
Application: LookupReusable.app
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Now, you have to create another lightning component to display related contacts using reusable custom lookup component.
2. Related Contacts: (Source: Developed by me :P)
Apex: LookupRelatedContactC .apxc
Component: LookupRelatedContact.cmp
Controller: LookupRelatedContactController.js
Application: App_LookupRelatedContact.app
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
It was a great help. :-)
How can I use the same Reusable Custom Lookup in my LWC component, as I dont want to create any custom lookup in LWC so how would I use the same in LWC as you have used in the aura(which is developed by you)