Getting the URL parameter into Lightning component using the “{! paramName}” expression

I am new to communities in lightning and I am trying to figure out a way to directly fetch the URL parameters into the lightning component attributes using the
{! urlParamName} expressions.

for example :

https://www.someurl.com/page?name=somename&surname=somesurname

My lightning component will be :

<aura:component>

    <!-- Parameters Available in URL-->
    <aura:attribute name="name" type="String">
    <aura:attribute name="surname" type="String">

    <!--It will get name parameter from URL directly-->
    Name is : {!v.name} 

    <!--It will get surname parameter from URL directly-->
    SurName is : {!v.surname}

</aura:component>

I am trying to figure out a way which cannot includes JS.
Currently I am using Lightning JS to get these parameters.

Answer

After Summer 18 release (API version 43 and up) we can do this.

Implement lightning:isUrlAddressable interface and use pageReference attribute.

Example. – Component
Assume url is <aura:component implements="lightning:isUrlAddressable"> <aura:handler name="init" value="{!this}" action="{!c.doInit}" description="Handler for valueInit event fired when the component has been initialised"/> {!v.pageReference.state.testAttribute} </aura:component>

Component Controller

({
    doInit : function(component, event, helper) {
        console.log(component.get("v.pageReference").state.testAttribute);
    }
})

Console output will look like: “abc”

Attribution
Source :
Link , Question Author : Tarique Shamim , Answer Author : Brian Miller

Leave a Comment