Read Query Parameter in Lightning Component

Launch Lightning Component using formula field and also read query parameter in Salesforce Lightning Component

Before Summer 18, to read parameter in Lightning Component, we had to wrap Lightning Component in Lightning Application. After Summer 18, it has changed for good.

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 pageReference provided by interface lightning:isUrlAddressable.

Create a formula field on Account to launch Lightning Component and read its parameter.

Formula Field to Launch Lightning Component
Formula Field to Launch Lightning Component

As you can see in above image, we would be using Hyperlink method to create link in Lightning Experience

HYPERLINK("/lightning/cmp/c__ReadParameter?accountName="+ Name , "Launch")

Create a Lightning Component with below source code

After clicking on formula field, Lightning component would look like below image showing capability to read URL parameter

Read URL Parameter in Salesforce Lightning Component
Read URL Parameter in Salesforce Lightning Component

Related posts

10 thoughts on “Read Query Parameter in Lightning Component”

  1. Thanks so much Jitendra, really useful article.
    Will the formula field work in Salesforce Classic and salesforce 1 mobile too?
    Chait

  2. It does not work. When you click on the hyperlink of the formula, the page loses the parameter and its reference data.

  3. will it work in community if yes i am having trouble passing it in my url as i am getting null when doing console.log

    will it work in community pages, if yes then how, can you brief me?

    this is url and i am passing parameter in it as key= sunil https://deb1-coro.cs17.force.com/v2/s/invdetail?key=sunil

    var pageReference = component.get(‘v.pageReference’); console.log(JSON.stringify(pageReference));

    but getting null as log

  4. This is not working anymore after Summer 19 . YOU Need to append namespace c__ to all parameters which you are including in url and same in the compoenent. For example above formula field would be

    HYPERLINK(“/lightning/cmp/c__ReadParameter?c__accountName=”+ Name , “Launch”)

    & code
    ({
    init : function(component, event, helper) {
    var pageReference = component.get(“v.pageReference”);
    component.set(“v.accountName”, pageReference.state.c__accountName);
    }
    })

Leave a Reply

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