Sunday, 8 April 2018

Custom Lookup Creation and Example in Lightning

Hi ,

Lets how to prepare custom lookup component


Here in this example i am using "svg" component for icons but you can use lightning:icon tag instead


1)Create LC_svg component:

<aura:component >
    <aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
    <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#account" />
    <aura:attribute name="aria-hidden" type="String" default="true" description="aria-hidden true or false. defaults to true" />
</aura:component>

Renderer:
({
render: function(component, helper) {
//grab attributes from the component markup
var classname = component.get("v.class");
var xlinkhref = component.get("v.xlinkHref");
var ariaHidden = component.get("v.aria-hidden");

//return an svg element w/ the attributes
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('class', classname);
svg.setAttribute('aria-hidden', ariaHidden);
svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>';
return svg;
}
})


2)Create SelectedObject event and  Custom Lookup Result component for getting the list of accounts based  search keyword


SelectedObject.evt:

<aura:event type="COMPONENT" description="by this event we are passing the selected Record in the Obeerving Component">
    <aura:attribute name="RecordByEvent" type="sObject"/>
</aura:event>

CustomLookupResult.cmp

<aura:component >
    <aura:attribute name="Obj" type="sObject" />
  <!--Register the component level event-->
    <aura:registerEvent name="oSelectedObjectEvent" type="c:SelectedObject"/>
    
    <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:LC_svg class="slds-input__icon" xlinkHref="{!$Resource.SLDS092 + '/assets/icons/standard-sprite/svg/symbols.svg#account'}" />                   
          
<div class="slds-lookup__result-text"><a onclick="{!c.selectRecord}">{!v.Obj.Name}</a></div>
          </div>
        </div>    
        </span>
    </li>
</aura:component>

CustomLookupResultController.js:
----------------------------------------------------
({
selectRecord : function(component, event, helper){      
    // get the selected Account from list  
      var getSelectRecord = component.get("v.Obj");
    // call the event   
      var compEvent = component.getEvent("oSelectedObjectEvent");
    // set the Selected Object to the event attribute.  
     compEvent.setParams({"RecordByEvent" : getSelectRecord });  
    // fire the event  
     compEvent.fire();
    },
})


3)Create PickListEvt.evt and CustomLookup.cmp component:

PickListEvt.evt:
---------------------
<aura:event type="Component" description="Event fire when some one selects a value in picklist" >
    <aura:attribute name="SelectedValue" type="string" description="The result of the Selection"/>
</aura:event>

CustomLookup.cmp
---------------------------
/*
 This is the Controller Class for the Custom Lookup component.
 */
public class LookUpController {
  @AuraEnabled
 public static List <sObject> fetchRecords(String searchKeyWord, String ObjName, string count) {
  String searchKey = searchKeyWord + '%';
  List < Sobject > lstOfObj =  Database.query('SELECT id, Name '+' FROM '+ObjName+' WHERE Name LIKE \''+searchKey+'\' limit ' + count);
 
  return lstOfObj ;
 }
}


<aura:component controller="LookUpController" >    
   <aura:registerEvent name="RecordSelected" type="c:PickListEvt" description="This will Fire when the records has reached in it"/>
   <aura:attribute name="selectedRecord" type="sObject" default="{}" description="Use,for store SELECTED sObject Record"/>
   <aura:attribute name="listOfSearchRecords" type="sObject[]" description="Use,for store the list of search records which returns from apex class"/>
   <aura:attribute name="SearchKeyWord" type="string"/>
   <aura:attribute name="FieldLabel" type="String"/>
   <aura:attribute name="ObjName" type="string" default="Account"/>
   <aura:attribute name="RecordCount" type="string" default="10"/>
   <aura:attribute name="Message" type="String" default="Search Result.."/>
    
   <!--declare events handlers-->  
   <aura:handler name="oSelectedObjectEvent" event="c:SelectedObject" action="{!c.handleComponentEvent}"/>
   <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
   <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
   <div class="slds-m-around">
      <div aura:id="searchRes" class="slds-form-element slds-lookup slds-is-close" data-select="single">
          <aura:if isTrue="{!!empty(v.FieldLabel)}">
         <label class="slds-form-element__label" for="lookup-348"> {!v.FieldLabel}</label>
          </aura:if>
         <!--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">
               <c:LC_svg class="slds-input__icon slds-show" xlinkHref="{!$Resource.SLDS092 + '/assets/icons/utility-sprite/svg/symbols.svg#search'}" />
               <!-- This markup is for when an record is selected -->
               <div aura:id="lookup-pill" class="slds-pill-container slds-hide">
                  <span class="slds-pill">
                     <span class="slds-pill__label">
                       {!v.selectedRecord.Name} 
                     </span>
                     <span class="slds-button slds-button--icon slds-pill__remove deleteIcon" onclick="{!c.clear}">
                        <c:LC_svg class="slds-button__icon" xlinkHref="{!$Resource.SLDS092 + '/assets/icons/utility-sprite/svg/symbols.svg#close'}" />
                        <span class="slds-assistive-text">Remove</span>
                     </span>
                  </span>
               </div>
              <div aura:id="lookupField" class="slds-show">
               <ui:inputText updateOn="keyup" keyup="{!c.keyPressController}" aura:id="LookupGeneral"
                             class="slds-lookup__search-input slds-input " 
                             value="{!v.SearchKeyWord}" placeholder="search.." />
              </div>   
            </div>
         </div>
         <!--This part is for Display typehead lookup result List-->  
         <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">
                  <c:CustomLookupResult Obj="{!singleRec}" />
               </aura:iteration>
            </ul>
         </div>
      </div>
   </div>
</aura:component>


CustomLookupController.js:

({
  
keyPressController : function(component, event, helper) {
      // get the search Input keyword   
var getInputkeyWord = component.get("v.SearchKeyWord");
        var getObjName = component.get("v.ObjName");
        var getRecordCount = component.get("v.RecordCount");
      // 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, getObjName, getRecordCount);
        }
        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 );
         
    },
    
  // 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 selectedRecordGetFromEvent = event.getParam("RecordByEvent");
       var RecordSelected = component.getEvent("RecordSelected");     
         RecordSelected.setParams({
            SelectedValue: selectedRecordGetFromEvent.Id
        }).fire();
       component.set("v.selectedRecord" , selectedRecordGetFromEvent); 
       
        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();    
    },
    
})

CustomLookupHelper.js
-----------------------------------
({
searchHelper : function(component,event,getInputkeyWord, getObjName, getRecordCount) {
  // call the apex class method 
     var action = component.get("c.fetchRecords");
      // set param to method  
        action.setParams({
            'searchKeyWord': getInputkeyWord,
            'ObjName' : getObjName,
            'count' : getRecordCount
          });
      // set a callBack    
        action.setCallback(this, function(response) {
            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", 'Search Result...');
                }
                
                // set searchResult list with return value from server.
                component.set("v.listOfSearchRecords", storeResponse);
            }
 
        });
      // enqueue the Action  
        $A.enqueueAction(action);
    
},
})


Custom Lookup Example: (Usage):

CustomLookupExample.cmp:
---------------------------------------
<aura:component controller="ContactSavecls">
    <aura:attribute name="contactObj" type="Contact" default="{'sobjectType':'Contact',
                                                              'AccountId':'','FirstName':'',
                                                               'LastName':''}"/>
    <div>
    <div class="slds-form-element__control">
        <ui:inputText class="slds-input" label="Last Name" value="{!v.contactObj.LastName}"/>
        <c:CustomLookup ObjName="Account" FieldLabel="Related Account"
            RecordCount="5" 
            RecordSelected="{!c.handleRecordSelection}" />
       </div>    
        <ui:button press="{!c.contactSave}">Save Contact</ui:button>
    </div>
</aura:component>

CustomLookupExample.js:
-------------------------------------
({
handleRecordSelection : function(component, event, helper) {
        alert('hi'+event.getParam("SelectedValue"));
component.set("v.contactObj.AccountId", event.getParam("SelectedValue"));
},
    contactSave:function(component, event, helper){
        var action = component.get("c.saveContact");
        var contRec = component.get("v.contactObj");
        action.setParams({"contObj":contRec});
        action.setCallback(this,function(data){
            var result = data.getReturnValue();
            alert(result);
        });
        $A.enqueueAction(action);
        
    }
})



ApexController:
--------------------
public class ContactSavecls{
    @Auraenabled
    public static String saveContact(Contact contObj){
        insert contObj;
        return contObj.Id;
    }
}



output:
------------




References:
------------------
https://developer.salesforce.com/blogs/developer-relations/2015/06/salesforce-lightning-inputlookup-missing-component.html


http://sfdcmonkey.com/2017/07/17/re-usable-custom-lookup/

http://sfdcmonkey.com/2017/01/07/custom-lookup-lightning-component/

https://teamforcesite.wordpress.com/2017/09/20/how-to-build-custom-lookup-in-lightning/
https://github.com/enreeco/inputlookup

https://www.jitendrazaa.com/blog/salesforce/lookup-component-in-salesforce-lightning/

https://www.lightningdesignsystem.com/components/lookups/


1 comment:

  1. It is very useful information about salesforce . This is the place for learner and glad to be here in this blog Thank you
    salesforce Training in Hyderabad
    salesforce course in Hyderabad
    Enroll

    ReplyDelete

Getting Reference FieldsI(Lookup or Master detail) through dynamic apex

Hi , We  had a scenario If  we get a parameter "id" in the  url  then we should  be  able to find out    object reference is ...