How to build custom lookup in lightning

Want to build Custom Lookup in the Lightning? Don’t worry, it’s quick and easy!!

For this module, let’s divide it into three components:

1. customLookup_Parent.cmp
2. cutomLookupResult_Child1.cmp
3. cutomLookupResult_Child2.cmp

The parent component holds the search bar, modal popup or drop down list for showing results. (Refer Screenshot 1).

Screenshot 1. Parent component showing search bar

Child components will hold the search results based on the text entered in the search box of the parent.

cutomLookupResult_Child1.cmp(Screenshot 2) will handle results dynamically in a dropdown below the search bar while cutomLookupResult_Child2.cmp(Screenshot 3) will show the records in a table under the search bar in modal popup.

Screenshot 2. Result in cutomLookupResult_Child1.cmp

Screenshot 3. Result in cutomLookupResult_Child2.cmp on clicking search icon

Let’s follow the steps how to build it.

Parent Component(customLookup_Parent.cmp) :

Parent component contains a search bar, a dropdown and a modal popup. As soon as the user starts typing in search bar it will call the server side method and on response from server, a dropdown will appear under the search bar. This dropdown will have a list of child components resulted by cutomLookupResult_Child1.cmp.

There is another way to search the text as well: Click the search icon in the rightmost side of the search bar. On click of that  the modal popup from the parent component will be visible. This popup will contain a search bar followed by a table. The table includes the results gathered on cutomLookupResult_Child2.cmp. If the user clicks the search icon without entering any text the records in the table will be by default set to “Recent 5 records”.

Note : Here, boolean variable is used to decide whether to open dropdown or Modal to show the result.

customLookup_Parent.cmp

// 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’);

// Calling Helper function
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 Selection
clear :function(component,event,heplper){

var pillTarget = component.find(“lookup-pill”);
$A.util.addClass(pillTarget, ‘slds-hide’);
$A.util.removeClass(pillTarget, ‘slds-show’);

var lookUpTarget = component.find(“lookupField”);
$A.util.addClass(lookUpTarget, ‘slds-show’);
$A.util.removeClass(lookUpTarget, ‘slds-hide’);

component.set(“v.SearchKeyWord”,null);
component.set(“v.listOfSearchRecords”, null );

var lookUpTarget =component.find(“lookupField”);
$A.util.addClass(lookUpTarget, ‘slds-show’);
$A.util.removeClass(lookUpTarget, ‘slds-hide’);

component.set(“v.Dropdownlist” , true);

},

// This function call when the end User Select any record from the result list.
handleComponentEvent : function(component, event, helper) {

// get the selected Contact record from the COMPONETN event
var selectedContactGetFromEvent = event.getParam(“contactByEvent”);

component.set(“v.selectedRecord” , selectedContactGetFromEvent);
console.log(component.get(“v.selectedRecord”));

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’);

},

// automatically call when the component is done waiting for a response to a server request.
hideSpinner : function (component, event, helper) {
var spinner = component.find(‘spinner’);
var evt = spinner.get(“e.toggle”);
evt.setParams({ isVisible : false });
evt.fire();
},

// automatically call when the component is waiting for a response to a server request.
showSpinner : function (component, event, helper) {
var spinner = component.find(‘spinner’);
var evt = spinner.get(“e.toggle”);
evt.setParams({ isVisible : true });
evt.fire();
},

// On Press of icon Modal-Popup will open
SearchContact : function (component, event, helper) {

component.set(“v.Dropdownlist” , false);

$A.util.removeClass(component.find(“ContactLookup”), “visibilityNO”);
$A.util.removeClass(component.find(“popUpBackgroundId1”), “visibilityNO”);

component.set(“v.cssStyle”, “.forceStyle .viewport .oneHeader {z-index:0; }.slds-global-header_container {position: static;} .forceStyle.desktop .viewport{overflow:hidden}”);
component.set(“v.Showspinner” , true);

var action = component.get(“c.getContacts1”);
action.setCallback(this, function(data) {
component.set(“v.Showspinner” , false);
component.set(“v.SearchedResult”, data.getReturnValue());
console.log(‘contactfirstname’ + JSON.stringify(component.get(“v.SearchedResult”)));
});

$A.enqueueAction(action);
},

// For hiding the Modal-Popup.
HideContactPopup : function (component, event, helper) {

component.set(“v.cssStyle”, “”);
$A.util.addClass(component.find(“ContactLookup”), “visibilityNO”);
$A.util.addClass(component.find(“popUpBackgroundId1”), “visibilityNO”);

// Setting boolean as true for dropdown list
component.set(“v.Dropdownlist” , true);

},

// Place the selected contact to output box
GetSelectedCont : function (component, event, helper) {

component.set(“v.cssStyle”, “”);

//Handle event from child component of who will send the particular selected contact
var cont = event.getParam(“contactByEvent”);

component.set(“v.selectedRecord”, cont);
var cc = component.get(“v.selectedRecord”)

// Hiding the dropdown list component when selecting the record from lookup window
var forclose = component.find(“lookup-pill”);
$A.util.addClass(forclose, ‘slds-show’);
$A.util.removeClass(forclose, ‘slds-hide’);

// Setting attribute used in search bar as null
component.set(“v.SearchKeyWord” , ”);

// Hiding the search bar on selection of one value
var lookUpTarget =component.find(“lookupField”) ;
$A.util.addClass(component.find(“lookupField”), ‘slds-hide’);

$A.util.addClass(component.find(“ContactLookup”), “visibilityNO”);
$A.util.addClass(component.find(“popUpBackgroundId1”), “visibilityNO”);

$A.util.removeClass(component.find(“searchRes”), “slds-is-open”);
$A.util.addClass(component.find(“searchRes”), “slds-is-close”);

var lookUpTarget =component.find(“lookupField”) ;
$A.util.addClass(lookUpTarget, ‘slds-hide’);
$A.util.removeClass(lookUpTarget, ‘slds-show’);

}

})

[/sourcecode]

customLookup_ParentHelper.js

[sourcecode language=”java”]</pre>
({
searchHelper : function(component,event,getInputkeyWord) {
// call the apex class method
component.set(“v.Showspinner”, true);
var action = component.get(“c.fetchContact”);
// set param to method
action.setParams({
‘searchKeyWord’: getInputkeyWord
});
// set a callBack
action.setCallback(this, function(response) {
component.set(“v.Showspinner”, false);
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 the boolean for hiding and showing the dropdown list and popup window
var Ddlist = component.get(“v.Dropdownlist”);

// set searchResult list with return value from server
if(Ddlist == false){

// set searched result to show in the table
component.set(“v.SearchedResult”, storeResponse);
}

else{

component.set(“v.listOfSearchRecords”, storeResponse);

}

}

});
// enqueue the Action
$A.enqueueAction(action);

}
})
<pre>[/sourcecode]

customLookup_Parent.css

[sourcecode language=”java”]

.THIS.visibilityNO {
display:none;

}
.THIS.visibilityNONE {
display:none;

}

.THIS .slds-modal{
background-color: rgba(0, 0, 0, 0.4);
}

.THIS .slds-modal__header{
padding-top: 30px;
padding-bottom: 0px;
border-bottom: none;
}
[/sourcecode]

Child Component (cutomLookupResult_Child1.cmp):

When the user starts typing in the search bar,it will call the server side method and on response of server cutomLookupResult_Child1.cmp component will be visible to show the related search results in a dropdown below the search bar (Screenshot 2) . Once the user selects the record, the drop down list will be hidden and selected record will be placed into pill container (Screenshot 4).

cutomLookupResult_Child1.cmp

[sourcecode language=”java”]
<aura:component >
<aura:attribute name=”oContact” type=”Contact” />
<!–Register the component level event–>
<aura:registerEvent name=”oSelectedContactEvent” type=”c:selectedContactEvent”/>

<!–Create a searched result dropdown list–>

<li role=”presentation”>
<span class=”slds-lookup__item-action slds-media slds-media–center” id=”lookup-option-350″ role=”option”>

<div class=”slds-media__body”>

<div class=”slds-input-has-icon slds-input-has-icon–right”>
<c:svg ariaHidden=”true” class=”slds-input__icon” xlinkHref=”/resource/SLDS222/assets/icons/standard-sprite/svg/symbols.svg#contact”/>

<div class=”slds-lookup__result-text”><a onclick=”{!c.selectContact}”>{!v.oContact.Name}</a></div>

</div>

</div>

</span>
</li>

</aura:component>
[/sourcecode]

cutomLookupResult_ChildController.js

[sourcecode language=”java”]
({
selectContact : function(component, event, helper){
// get the selected Contact from list
var getSelectContact = component.get(“v.oContact”);

// call the event
var compEvent = component.getEvent(“oSelectedContactEvent”);
console.log(“getSelecteContact”+ JSON.stringify(getSelectContact));

// set the Selected contact to the event attribute.
compEvent.setParams({“contactByEvent” : getSelectContact });

// fire the event
compEvent.fire();
},
})
[/sourcecode]

Child component (cutomLookupResult_Child2.cmp) :

When the user click on the search icon in the search bar (shown in screenshot 1), modal popup will be visible from the parent component independent whether the search bar has any text entered or not. This functionality will be provided by Parent component. The Modal popup will have cutomLookupResult_Child2.cmp  in it. Child component shows the recent 5 records accessed if the search text is not entered. If the text is entered in the search bar before clicking the search icon, this component will show the same data in a table form compared to child component.cmp in a drop down. Once the user will select the record, the modal popup be hidden and selected record will be placed into pill container similar to cutomLookupResult_Child1.cmp .(Screenshot 4).

cutomLookupResult_Child2.cmp

<!–Registration of event to pass the selected result back to Parent component–>
<aura:registerEvent name=”myEvent” type=”c:selectedContactEvent” />

<!– Table showing searched result–>
<tr class=”slds-truncate”>
<td class=”slds-truncate” title=”{!v.con.LastName }”>
<a onclick=”{!c.selectContact}”>{!v.con.Name } {!v.con.LastName }</a></td>
<td class=”slds-truncate” title=”{!v.con.Account.Name}”>{!v.con.Account.Name}</td>
<td class=”slds-truncate” title=”{!v.con.Email}”>{!v.con.Email}</td>
<td class=”slds-truncate” title=”{!v.con.Phone}”>{!v.con.Phone}</td>
</tr>
</aura:component>
<pre>[/sourcecode]

cutomLookupResult_Child2Controller.js

[sourcecode language=”java”]
({
selectContact: function(component, event, helper) {

// call the event
var cmpEvent = component.getEvent(“myEvent”);

console.log(“getSelecteContact”+ JSON.stringify(component.get(“v.con”)));

// Pass the selected result(i.e Contact) value
cmpEvent.setParams({
“contactByEvent”: component.get(“v.con”)
});

// Fire an Event
cmpEvent.fire();
}
})
[/sourcecode]

Event(c: selectedContactEvent) :

This apex controller is used to retreive the records from server side.

lookUpController.cls

[sourcecode language=”java”]
public class lookUpController {

// calling on search of contacts
@AuraEnabled
public static List &lt; Contact &gt; fetchContact(String searchKeyWord) {
String searchKey = searchKeyWord + ‘%’;
List &lt;Contact &gt; returnList = new List &lt; Contact &gt; ();
List &lt; Contact &gt; lstOfContact = [SELECT Id, Name, MailingStreet, MailingCountryCode, MailingCity, MailingStateCode,
MailingPostalCode, AccountId, Account.Name, Phone, Email FROM Contact where Name LIKE: searchKey];

for (Contact con: lstOfContact) {
returnList.add(con);
}
return returnList;
}

// initial list of recent items
@AuraEnabled
public static List &lt; Contact &gt; getContacts1() {

List &lt; Contact &gt; lstOfContact1 = [SELECT Id, Name, MailingStreet, MailingCountryCode, MailingCity, MailingStateCode,
MailingPostalCode, AccountId, Account.Name, Phone, Email FROM Contact WHERE LastModifiedDate != NULL ORDER BY LastModifiedDate DESC LIMIT 5];

system.debug(‘contacts’+lstOfContact1 );
return lstOfContact1;
}

}
[/sourcecode]

This custom lookup is mainly useful for custom pages as we need to specify the object and query that specific object.

In the upcoming blog we will deal with custom lookup which would be dynamic for any object, where user can just drag and drop the component on a record detail page.