{"id":6598,"date":"2018-09-03T15:31:58","date_gmt":"2018-09-03T19:31:58","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=6598"},"modified":"2018-09-14T16:19:57","modified_gmt":"2018-09-14T20:19:57","slug":"read-query-parameter-in-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/read-query-parameter-in-lightning-component\/","title":{"rendered":"Read Query Parameter in Lightning Component"},"content":{"rendered":"<p style=\"text-align: justify;\">Before <strong>Summer 18<\/strong>, to read parameter in <strong>Lightning Component<\/strong>, we had to wrap Lightning Component in <strong>Lightning Application<\/strong>. After Summer 18, it has changed for good.<\/p>\n<p style=\"text-align: justify;\">In this blog post we would create a formula field to launch Lightning Component (yes, you read it right). And then we would read URL parameter in Lightning Component using <strong>pageReference<\/strong> provided by interface <strong>lightning:isUrlAddressable<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Create a formula field on Account to launch Lightning Component and read its parameter.<!--more--><\/p>\n<figure id=\"attachment_6599\" aria-describedby=\"caption-attachment-6599\" style=\"width: 585px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6599\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Formula-Field-to-Launch-Lightning-Component.png?resize=585%2C372&#038;ssl=1\" alt=\"Formula Field to Launch Lightning Component\" width=\"585\" height=\"372\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Formula-Field-to-Launch-Lightning-Component.png?w=585&amp;ssl=1 585w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Formula-Field-to-Launch-Lightning-Component.png?resize=300%2C191&amp;ssl=1 300w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><figcaption id=\"caption-attachment-6599\" class=\"wp-caption-text\">Formula Field to Launch Lightning Component<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">As you can see in above image, we would be using Hyperlink method to create link in Lightning Experience<\/p>\n<pre>HYPERLINK(\"\/lightning\/cmp\/c__ReadParameter?accountName=\"+ Name , \"Launch\")<\/pre>\n<p>Create a Lightning Component with below source code<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/7cf6ffaa5c21e1b8d285d7cefc41447f.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">After clicking on formula field, Lightning component would look like below image showing capability to read URL parameter<\/p>\n<figure id=\"attachment_6600\" aria-describedby=\"caption-attachment-6600\" style=\"width: 495px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6600\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Read-URL-Parameter-in-Salesforce-Lightning-Component.png?resize=495%2C256&#038;ssl=1\" alt=\"Read URL Parameter in Salesforce Lightning Component\" width=\"495\" height=\"256\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Read-URL-Parameter-in-Salesforce-Lightning-Component.png?w=495&amp;ssl=1 495w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Read-URL-Parameter-in-Salesforce-Lightning-Component.png?resize=300%2C155&amp;ssl=1 300w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><figcaption id=\"caption-attachment-6600\" class=\"wp-caption-text\">Read URL Parameter in Salesforce Lightning Component<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Launch Lightning Component using formula field and also read query parameter in Salesforce Lightning Component<\/p>\n","protected":false},"author":1,"featured_media":6601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":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":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[311,167,451],"class_list":["post-6598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-component","tag-release","tag-summer-18"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":6598,"position":0},"title":"Salesforce  Lightning Component &#8211; expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":5109,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-component-for-wikipedia-search\/","url_meta":{"origin":6598,"position":1},"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":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":6598,"position":2},"title":"Share JavaScript Code in Lightning Web Component to Read URL Parameters","author":"Jitendra","date":"May 4, 2020","format":false,"excerpt":"Building Reusable LWC Component to read query string from URL","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":5562,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/summer-16-top-features\/","url_meta":{"origin":6598,"position":3},"title":"Salesforce Summer 16 &#8211; My favorite top 20 features","author":"Jitendra","date":"June 28, 2016","format":false,"excerpt":"List of Salesforce Summer 16 features","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"User Switcher in Salesforce Summer 16","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/06\/User-Switcher-in-Salesforce-Summer-16.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6496,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/embed-lightning-component-in-flow\/","url_meta":{"origin":6598,"position":4},"title":"Embed Lightning Component in Flow","author":"Jitendra","date":"June 24, 2018","format":false,"excerpt":"How to create a lookup field in Flow by embedding Lightning Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Use Lightning Component in Salesforce Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5796,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-data-services-standard-controller-for-lightning-components\/","url_meta":{"origin":6598,"position":5},"title":"Lightning Data Service &#8211; Standard Controller for Lightning Components","author":"Jitendra","date":"July 22, 2017","format":false,"excerpt":"Best Practices for Salesforce Lightning Component. How Lightning Data Service can improve Lightning Component performance and solve inconsistent data problem without writing single line of Apex code. Demo source code, image and slides included.","rel":"","context":"In &quot;Apex&quot;","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Salesforce Lightning Data Services","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6598","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=6598"}],"version-history":[{"count":3,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6598\/revisions"}],"predecessor-version":[{"id":6612,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6598\/revisions\/6612"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6601"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}