Jitendra Zaa

Salesforce Lightning Lookup Component

Lookup component in Salesforce Lightning

Salesforce comes up with many out of box UI components and Lightning Base components. However, one important component missing is Lookup component or Type ahead component in Lightning. There are some lookup components available however either they are using some JavaScript library or UI doesn’t match with Salesforce Lightning Design system. So, I wanted to have something similar used by Salesforce Lightning interface itself and come up with this component. Complete source code of this component can be found on my Github repository also.

Before, jumping directly to source code, lets first discuss some important points.

Features of Lightning Lookup component

  • Build using Vanilla JavaScript and SLDS
  • Storable Action used to increase performance
  • Server call made only when space key pressed
  • On escape key press, search result gets cleared
  • Ability to set Icon
  • Parent component can read value of Lookup component without firing any event
  • Use of Unbound expression to make component faster

Reading Lightning Lookup component value from parent

There are multiple ways to read child lightning components value in parent component. We can either use events or component method (aura:method). However, for event, we need to create a new event (Lightning event file) and register it. For aura:method, it doesn’t return any value. I wanted something very simple and found that Pass by reference concept works for Lightning Components also. Its very simple, create aura:attribute in parent lightning component, pass it to child component. Whenever child component changes value, Parent component would be notified. This can be seen in below source code in LookupDemo.cmp file.

Below animation will give you some idea on how same lookup component page is used four times.

Salesforce Lightning Lookup Component Demo
Salesforce Lightning Lookup Component Demo

Below Apex class is used as a Lightning component controller.

Following source code is for Lightning Lookup component.

Below component depicts on how same Lookup component used four times for different objects in same parent. Below component can also be used as reference to see how communication between lightning component can be done using pass by reference mechanism.

Posted

in

by

Jitendra

Tags:

,

Related Posts

Comments

49 responses to “Lookup component in Salesforce Lightning”

  1. Pawel Avatar
    Pawel

    Great! I have been searching google for a few hours and all I found was some outdated things. Thanks for a great work, I slightly modified your version to use reference from a parent component because I query all the fields and need to replace the parent values.

    Reply
  2. Riaz Avatar
    Riaz

    I Tried but its not working , somecode changed in repo ?

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

      Hi Riaz, no code changed. What error you are getting ? You have to enter space bar to get results

      Reply
      1. shivangi Avatar
        shivangi

        Hi Jitendra,
        I do have lookup search functuionality in my application .But my requirement is when i will search some bad keyword which is not there and instead displaying “No result found”,it should display all the existing records so that user can choose from them. How to achieve this please help me out.

        Reply
        1. shrradhaa Avatar
          shrradhaa

          Hi Shivangi,
          I am also having same requirement that display show all results…
          Do you find anything on this?
          Thank you.

          Reply
      2. Gangadhar Avatar
        Gangadhar

        A popup window is opened it’s throwing following error
        An internal server error has occured
        Error Id: 864039545-95256 (1338329059)

        Reply
      3. somasekhar Avatar
        somasekhar

        i am getting only text boxes if i enter some thing it will not populate any thing

        Reply
        1. Hari Avatar
          Hari

          correct empty boxes are coming.

          Reply
    2. Sumit Kumar Avatar
      Sumit Kumar

      You need change in helper this code : if(searchText.trim() != last_SearchText || /\s+$/.test(searchText) ){

      Reply
  3. Venkat Avatar
    Venkat

    HI Jitendra,
    i am big fan for you. i have small doubt. is it possible Creating recurring time-based actions in workflow or process builder. i want fire the my workflow rule every day. is it possible or not?

    Thanks,
    Venkat.

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

      Thanks Venkat for your words. There are multiple ways to do it. One easiest way is to write an Apex Scheduler to change record on which WF rule is written. As Scheduler will update some hidden field, WF rule will fire with Scheduler.

      Reply
      1. Venkat Avatar
        Venkat

        Thanks Jitendra for your quick reply. My requirement is completely different that is remove the scheduler classes and implement the same requirement using workflow rules and process builder.
        They want only workflows and process builder and no coding and scheduler classes

        Reply
      2. Zahir Avatar
        Zahir

        Hi Jitendra

        I like your demo and I was trying to use your code from Github to try the lookup component but i dont see the Apex Controller Code listed in the Github.
        Can you please let me know where it is available

        Reply
  4. Tarun Kauhsik Avatar
    Tarun Kauhsik

    Hi Jitendra
    Thanks for the wonderful explanation and code.
    How can I auto populate some fields(custom fields from the related object) from the lookup object on the input:text field on the component page when lookup is selected by user?
    Please suggest
    Thanks in advance

    Reply
    1. Akshay Desai Avatar
      Akshay Desai

      Hii Tarun Did you find any workaround on this?

      Reply
  5. Karunakar Pulkam Avatar
    Karunakar Pulkam

    Hi Jitendra,

    Please suggest me to achieve the List of Leads rendered based on search by name or email in lightning component.

    Thanks
    Karunakar

    Reply
  6. Mike Avatar
    Mike

    Works flawlessly. Question though: how can we embed this in an aura:iteration (list view) to allow a different assignment for each record? Currently when I select a value, it is assigning the same to ALL rows.

    Reply
    1. Dinesh Kumar Avatar
      Dinesh Kumar

      Mike, Good day! Have you got the solution for your question? I also want to know the solution for this question. It would be good if you have answer and share with me. Thanks in advance..

      Reply
  7. EL YAAGOUBI Avatar
    EL YAAGOUBI

    Thk you for ur work (y), but it not working for me. Can u give some help plz ?

    Reply
  8. priya shahi Avatar
    priya shahi

    Hi Jeetendra,

    The above code worked for me but my requirement is to make the lookup field mandatory on Ui.
    Since I am calling the sub component of lookup in my main component it doesn’t support required attribute.
    Is there any way to make the sub component required on my Ui?

    Thanks,
    Priya

    Reply
  9. TrueBlue Avatar
    TrueBlue

    Hi Jitendra,

    Thanks a lot for this solution. It works beautifully. I do have a question though – There is a lookup field to the account object on my lightning component which is being populated on init. I am getting the Id of the account successfully but with the lookup component, that field is blank. How can I set it to display the correct account name on init?

    Reply
  10. curiouslorax Avatar
    curiouslorax

    I haven’t been able to find license information for the code you share on your blog and gists. Can you clarify that, please? It seems from context like you are freely releasing this code into public domain with no restrictions, but I don’t want to use your work contrary to your intention.

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

      Thanks for asking. You can use code without any restriction.

      Reply
      1. shuaib Avatar
        shuaib

        Thanks Jitendra! Do you mind referencing that in your ReadMe? Great work!

        Reply
  11. Guest User Avatar
    Guest User

    Hello Jitendra,

    I have the same questions like few of them below.

    1. Making this Lookup component “required” on need basis?
    2. Setting the value to the Lookup component on record edit?

    Thank you!
    Guest User

    Reply
  12. david Avatar
    david

    Thanks for posting this! I’m trying to preview the LookupDemo in a simple Lightning app but I’m not getting the SLDS look and feel, do you have any suggestions on how to fix? See screenshot. The lightning app simply does

    https://uploads.disquscdn.com/images/288d95546c080341d51abf7e124bff782ddf317b29bc357bef5c441eb5e066e5.png

    Reply
  13. david Avatar
    david

    Thanks for posting this! I’m trying to preview the LookupDemo in a simple Lightning app but I’m not getting the SLDS look and feel, do you have any suggestions on how to fix? See screenshot. The lightning app simply does

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

      Use extends=”force:slds” in application containing lightning component. It will auto import slds styles.

      Reply
      1. david Avatar
        david

        Thanks!

        Reply
  14. david cheng Avatar
    david cheng

    Hello Jitendra, thanks for posting this. I’m trying to use onChange with your component so that I can force another component to refresh, but the selItem is coming up as null.

    Here’s a portion of my component. The “mfr” attribute is the selItem.

    Here’s the onchange handler. I need to refresh the SGI list based on the account ID. The mfr object always comes up as null, even when I specify v.mfr.val.

    refreshSGIList : function (component, event, helper) {
    console.log(“In refreshSGIList”);
    console.log(“mfr obj ” + component.get(“v.mfr”));
    var SGIList = component.find(“SGIList”);
    SGIList.reinit();
    },

    Any suggestions on what I could try?

    Reply
    1. david cheng Avatar
      david cheng

      [I posted my code in JSFiddle at https://jsfiddle.net/dmcheng/hx8ofthb/%5D
      Hello Jitendra, thanks for posting this. I’m trying to use onChange with your component so that I can force another component to refresh, but the selItem is coming up as null.

      See JSFiddle for portions of the component and onchange handler.

      In the component, the “mfr” attribute is the selItem.

      The onchange handler should refresh the SGI list based on the account ID. However, the mfr object always comes up as null, even when I specify v.mfr.val.

      Any suggestions on what I could try?

      Reply
  15. Phil Avatar
    Phil

    You the real MVP!

    Reply
  16. Ron Avatar
    Ron

    Nicely done – thanks for posting. Have you figured out how to get around the auto-complete dropdown that chrome lays over your lookup options list? As you probably know, chrome ignores the autocomplete=”off” option.

    Reply
  17. Prashant Saxena Avatar
    Prashant Saxena

    Hi , thanks for the code, but could you please explain that how can i set the Default value in lookup.

    Reply
  18. P Patel Avatar
    P Patel

    Hi Jitendra,

    THank you for this code. I am using current visualforce page which includes lightningStylesheets=true and lookup gives me the classic. How do I add this to my visualforce page?

    Reply
  19. tejdeep reddy Avatar
    tejdeep reddy

    Hi Jitendra,

    Thanks for your code .I am currently using it for autocomplete component .When search bar result is empty, i want to pass that value which i typed in textbox .how can i do it . do you have any any code for autocomplete textbox.

    Reply
  20. Shiva Prasad Achukatla Avatar
    Shiva Prasad Achukatla

    I am getting an error: Uncaught TypeError: Cannot read property ‘nodeType’ of null throws at https://bandwidth–partial–c.cs47.visual.force.com/resource/jquerymin311:3:10545 error when I am an Clicking on li in the below line. Could you please help

    Reply
  21. Abhu Avatar
    Abhu

    I need test class for this

    Reply
  22. Raj Neeraj Avatar
    Raj Neeraj

    Hi Jitendra,

    can you please help me out? how to get a search icon in search box?

    Reply
  23. Narapa Naidu Pulipati Avatar
    Narapa Naidu Pulipati

    Hi Jitendra,

    I have a Save button on my lightning component, which saves the record of a custom object. After saving the record I want a redirection to the lightning record detail page of that record. How can this be acheived.

    Thanks and Regards,
    Narapa Naidu Pulipati

    Reply
  24. Riadh Dallel Avatar
    Riadh Dallel

    For the apex Class you should enable aura call with ” @AuraEnabled(cacheable=true) “

    Reply
  25. ekenigsberg Avatar
    ekenigsberg

    exactly right! Per the Winter ’19 Release Notes (https://releasenotes.docs.salesforce.com/en-us/winter19/release-notes/rn_lc_apex_method_cacheable.htm), two changes are needed:

    1) delete line 35 in the LookupHelper.js (https://github.com/JitendraZaa/LightningLookup/blob/master/metadata/unpackaged/aura/Lookup/LookupHelper.js) — it currently reads “action.setStorable();”

    and

    2) change line 17 in the Lookup.cls (https://github.com/JitendraZaa/LightningLookup/blob/master/metadata/unpackaged/classes/Lookup.cls) — from “@AuraEnabled” to “@AuraEnabled(cacheable=true)”

    Reply
  26. swati Avatar
    swati

    Hi how can we set default value in lookup

    Reply
  27. Dinesh Kumar Avatar
    Dinesh Kumar

    How can I use this component inside an iteration. Consider, I have used an iteration with some field values and want to replace lookup field value with this component pre-populated with the lookup field value. How can i achieve the same for all the rows being with the lookup value in each row are different?

    Reply
  28. Roots Avatar
    Roots

    Hi Jitendra,

    Thank you for posting component code. However its not working for Contact object. For Contact its giving error “field ‘Name’ can not be filtered in a query call”.

    Regards
    Roots

    Reply
  29. Gayathri Avatar
    Gayathri

    Hi Jitendra,

    Actually I have tried above code I am getting an issue with sobject in my code.
    for(SObject s : sobjList){
    ResultWrapper obj = new ResultWrapper();
    obj.objName = objectName;
    obj.text = String.valueOf(s.get(Name)) ;———–>My code is showing variable doesn’t exist “Name”.
    }
    I am directly returning from my soql query id,Name.
    Name i am assigning to the wrapper class variable,that time i am getting above error like Variable doesn’t exist.

    can you suggest me what was wrong in my code.

    Reply
  30. Voma Avatar
    Voma

    Hi Jitendra,

    Here Provided solution is working great for me. Thanks for sharing.

    I need to traverse search using up and down arrow key and on click on enter it should redirect to result page. Please let me know how could I achieve this. I could see there is SLDS available for same but i haven’t found code related to this.

    Reply
  31. shrradhaa Avatar
    shrradhaa

    Hello Sir,
    Can we add secondary field while searching in custom lookup like standard lookup?
    Please help me out here.
    Thank You

    Reply
  32. shubhraw Avatar
    shubhraw

    Thank you so much Jitendra it works flawlessly

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ajax AngularJs ANT ANT Migration Tool Apex ASP.NET best practices C# continuous integration CSS DataLoader Eclipse EGit Flow Git Google Heroku HTML Integration Interview Questions J2EE JAVA Javascript JQuery Lightning component Lightning Web Component LWC NodeJs OAuth PHP Release Salesforce Salesforce DX SAP SEO sfdx SQL SQL Server Students Trailhead Video Tutorial Visualforce Windows XP WordPress XML

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading