{"id":6176,"date":"2017-07-06T01:01:02","date_gmt":"2017-07-06T01:01:02","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=6176"},"modified":"2017-07-06T01:13:37","modified_gmt":"2017-07-06T01:13:37","slug":"lookup-component-in-salesforce-lightning","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","title":{"rendered":"Lookup component in Salesforce Lightning"},"content":{"rendered":"<p style=\"text-align: justify;\">Salesforce comes up with many out of box\u00a0<strong><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/ui_overview.htm\">UI components<\/a>\u00a0<\/strong>and\u00a0<a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/lightning_overview.htm\"><strong>Lightning Base components.<\/strong><\/a>\u00a0However, one important component missing is\u00a0<strong>Lookup component\u00a0<\/strong>or\u00a0<strong>Type ahead component<\/strong> in Lightning. There are some lookup components available however either they are using some JavaScript library or UI doesn&#8217;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 <a href=\"https:\/\/github.com\/JitendraZaa\/LightningExamples\/tree\/master\/Lookup\">my Github repository also<\/a>.<\/p>\n<p style=\"text-align: justify;\">Before, jumping directly to source code, lets first discuss some important points.<!--more--><\/p>\n<h3><strong>Features of\u00a0Lightning Lookup component<\/strong><\/h3>\n<ul>\n<li style=\"text-align: justify;\">Build using Vanilla JavaScript and SLDS<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/controllers_server_storable_actions.htm\">Storable Action<\/a> used to increase performance<\/li>\n<li style=\"text-align: justify;\">Server call made only when space key pressed<\/li>\n<li style=\"text-align: justify;\">On escape key press, search result gets cleared<\/li>\n<li style=\"text-align: justify;\">Ability to set Icon<\/li>\n<li style=\"text-align: justify;\">Parent component can read value of Lookup component without firing any event<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/expr_data_binding.htm?search_text=unbound%20expression\">Use of Unbound expression<\/a> to make component faster<\/li>\n<\/ul>\n<h3>Reading Lightning Lookup component value from parent<\/h3>\n<p style=\"text-align: justify;\">There are multiple ways to read child lightning components value in parent component. We can either use <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/events_intro.htm\">events <\/a>or <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/js_cmp_methods.htm?search_text=aura:method\">component method (aura:method)<\/a>. However, for event, we need to create a new event (Lightning event file) and register it. For\u00a0<strong>aura:method<\/strong>, it doesn&#8217;t return any value. I wanted something very simple and found that <a href=\"https:\/\/stackoverflow.com\/questions\/373419\/whats-the-difference-between-passing-by-reference-vs-passing-by-value\">Pass by reference concept<\/a> works for Lightning Components also. Its very simple, create\u00a0<strong>aura:attribute<\/strong> 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 <em>LookupDemo.cmp<\/em> file.<\/p>\n<p style=\"text-align: justify;\">Below animation will give you some idea on how same lookup component page is used four times.<\/p>\n<figure id=\"attachment_6179\" aria-describedby=\"caption-attachment-6179\" style=\"width: 740px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6179\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Lookup-Component.gif?resize=740%2C604&#038;ssl=1\" alt=\"Salesforce Lightning Lookup Component Demo\" width=\"740\" height=\"604\" \/><figcaption id=\"caption-attachment-6179\" class=\"wp-caption-text\">Salesforce Lightning Lookup Component Demo<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">Below Apex class is used as a Lightning component controller.<br \/>\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/0761516875e9ff93dbd70990c2a4f29b.js\"><\/script><\/p>\n<p>Following source code is for\u00a0<strong>Lightning Lookup component.<\/strong><br \/>\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/6b82ee00c45a4b1b66093966c5e6583b.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">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.<br \/>\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/562c1e87fedabacccfe78b6dd076b321.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salesforce Lightning component in plain JavaScript and SLDS with complete source code<\/p>\n","protected":false},"author":1,"featured_media":6182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311,420],"class_list":["post-6176","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-component","tag-slds"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":6176,"position":0},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5970,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/generic-and-responsive-table-component-in-salesforce-lightning\/","url_meta":{"origin":6176,"position":1},"title":"Generic and Responsive Table Component in Salesforce Lightning","author":"Jitendra","date":"March 31, 2017","format":false,"excerpt":"Complete Source code to create generic and responsive Table component in Salesforce Lightning","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"JSON format for responsive datagrid Lightning component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/03\/JSON-format-for-responsive-datagrid-Lightning-component.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5751,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-selected-html-or-lightning-component-in-aura-iterator\/","url_meta":{"origin":6176,"position":2},"title":"Get Selected HTML or Lightning component in Aura Iterator","author":"Jitendra","date":"September 28, 2016","format":false,"excerpt":"How to detect event from Lightning Component and HTML5 components in Aura Iterator","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Get selected item in aura iterator component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":6142,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","url_meta":{"origin":6176,"position":3},"title":"Show Lightning component on public website without authentication","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to show Lightning component on public sites without need of user authentication","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5737,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/","url_meta":{"origin":6176,"position":4},"title":"Use Lightning Component in Visualforce Page","author":"Jitendra","date":"September 22, 2016","format":false,"excerpt":"How to use Lightning Out to surface Lightning Component on Visualforce Pages","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Use Lightning Components in Visualforce Pages","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5109,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-component-for-wikipedia-search\/","url_meta":{"origin":6176,"position":5},"title":"Lightning Component for Wikipedia search","author":"Jitendra","date":"January 6, 2016","format":false,"excerpt":"Initially I thought creating Wikipedia Search component will be straight forward. I can simply use AJAX request from Lightning component to get result from Wikipedia using its REST API. Soon, I discovered about Content Security Policy\u00a0in Lightning components developer guide. If we attempt to use AJAX or REST API in\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Component for Wikipedia Search","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6176"}],"version-history":[{"count":5,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6176\/revisions"}],"predecessor-version":[{"id":6184,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6176\/revisions\/6184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6182"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}