{"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_seo_schema_type":"","_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_feature_clip_id":0,"_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_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":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":6598,"position":5},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"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","_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}]}}