Crazy4Sfdc: Lookup component in Salesforce Lightning

Lookup component in Salesforce Lightning

Following source code is for Contact Lookup component.

<aura:component controller="ContactLookupController" >

<aura:attribute name="listOfSearchRecords" type="object[]" description="Use,for store the list of search records which returns from apex class"/>
<aura:attribute name="SearchKeyWord" type="string"/>
<aura:attribute name="Message" type="String" default="Search Result.."/>
<aura:attribute name="selectedRecordName" type="string"/>
<aura:attribute name="selectedRecordId" type="string"/>

<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>


<div class="">
<div aura:id="searchRes" class="slds-form-element slds-lookup slds-is-close" data-select="single">


<div class="slds-form-element__control">
<div class="slds-input-has-icon slds-input-has-icon--right">
<lightning:icon aura:id="SearchID" class="slds-input__icon slds-show" iconName="utility:search" size="x-small" alternativeText="icon" />

<div aura:id="lookup-pill" class="slds-pill-container slds-hide">
<span class="slds-pill">
<span class="slds-pill__label">
{!v.selectedRecordName}
</span>
<button class="slds-button slds-button--icon slds-pill__remove" onclick="{!c.clear}">
<lightning:icon aura:id="RemoveID" class="slds-input__icon CloseIcn" iconName="utility:close" size="x-small" alternativeText="icon" />
<span class="slds-assistive-text">Remove</span>
</button>
</span>
</div>
<div aura:id="lookupField" class="slds-show">
<ui:inputText updateOn="keyup" keyup="{!c.keyPressController}" class="slds-lookup__search-input slds-input " value="{!v.SearchKeyWord}" placeholder="search.."/>
</div>
</div>
</div>

<div class="slds-lookup__menu slds" id="lookup-348">
<div class="slds-lookup__item--label slds-text-body--small">{!v.Message}</div>
<center> <ui:spinner aura:id="spinner"/> </center>
<ul class="slds-lookup__list" role="listbox">
<aura:iteration items="{!v.listOfSearchRecords}" var="singleRec">
<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">

<div class="slds-lookup__result-text" title="{!singleRec.Name}" >
<a data-record="{!singleRec.Id+'#'+singleRec.Name}" onclick="{!c.selectAccount}">
{!singleRec.Name}
</a>
</div>
</div>
</div>
</span>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
</aura:component>

Following source code is for ContactLookupController.js component.

({

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

$A.util.removeClass(component.find("SearchID"),'slds-hide')

$A.util.addClass(component.find("SearchID"),'slds-show')

$A.util.addClass(component.find("RemoveID"),'slds-hide')

$A.util.removeClass(component.find("RemoveID"),'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();

selectAccount : function(component, event, helper){

var selectedItem = event.currentTarget;

var data = selectedItem.dataset.record;

var arr = data.split('#');

console.log('Id='+arr[0]);

console.log('Name='+arr[1]);

component.set("v.selectedRecordId" , arr[0]);

component.set("v.selectedRecordName" , arr[1]);

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

$A.util.addClass(component.find("SearchID"),'slds-hide')

$A.util.removeClass(component.find("SearchID"),'slds-show')

$A.util.addClass(component.find("RemoveID"),'slds-show')

$A.util.removeClass(component.find("RemoveID"),'slds-hide')

})

Following source code is for ContactLookupHelper.js component.

({

searchHelper : function(component,event,getInputkeyWord) {

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

action.setParams({

'searchKeyWord': getInputkeyWord

});

action.setCallback(this, function(response) {

var state = response.getState();

if (state === "SUCCESS") {

console.log('SUCCESS ====');

var storeResponse = response.getReturnValue();

console.log('storeResponse ===='+storeResponse);

if (storeResponse.length == 0) {

component.set("v.Message", 'No Result Found...');

} else {

component.set("v.Message", 'Result...');

}

component.set("v.listOfSearchRecords", storeResponse);

}

});

$A.enqueueAction(action);

})

Following source code is for ContactLookup.css component.

.THIS .slds-pill{width: 100%;

padding: 8px 10px;

}

.THIS .CloseIcn{

position: absolute;

top: 7px;

right: 0px;

}

Following source code is for ContactLookupController apex class.

public class ContactLookupController {

@AuraEnabled

public static List <Contact> fetchContact(String searchKeyWord) {

system.debug('## searchKeyWord ==>'+searchKeyWord);

String searchKey = searchKeyWord + '%';

List <Contact> returnList = new List <Contact> ();

List <Contact> lstOfContact = [select id, Name from Contact where Name LIKE: searchKey ];

system.debug('## lstOfContact ==>'+lstOfContact.size());

for (Contact acc: lstOfContact) {

returnList.add(acc);

}

return returnList;

}

Crazy4Sfdc

Thursday 3 August 2023

Lookup component in Salesforce Lightning

Pages