AURA: Updated URL Parameter Value in JS File

I was working on a page in Aura component and the page is loaded on click of a button from a related list(It can also load from a quick Action button). AURA components have a behavior that a component loads with value in cache memory. Which means, AURA component can sometimes load the previously clicked value from URL. Behavior is unpredictable. Which means, Component can load updated value or it can also load previous URL parameter value. For which user may have to click refresh button to load new info.

To overcome thing problem, We have an interface in lightning called lightning:isUrlAddressable. Where Aura component creates a PageReference variable. This Object contains all the parameters that are available in URL. You just need to reload if there is any change in the PageReference parameters or values.

<aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>

When you include lightning:isUrlAddressable, a pagereference variable is declared in background. You need not declare it again.

In almost all the AURA components there will be a onload method with method named doInit. So we erite code in doInit to take all the value from URL and do the necessary processing like calling a Apex class etc. In same way you need need to call the same doInit method whenever there is a change in the URL parameter.

<aura:component implements="lightning:isUrlAddressable">
    <aura:attribute name="a_Name" type="String" />
	<!-- a_Name can be replaced with even a Id that is passed as parameter = Please use proper naming convention -->
	
    <aura:handler name="init" value="{!this}" action="{!c.do_Init}"/>
	
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.do_Init}"/>
	
    Hello {!v.a_Name}.
</aura:component>

We will see how to fetch parameter values from URL.

({
    do_Init: function(cmp, evt, helper) {
        var a_Page_Reference = cmp.get("v.pageReference");
        var a_Temp_Name = a_Page_Reference.state.p_Name;
        cmp.set("v.a_Name", a_Temp_Name);
    }
})

Here a_Page_Reference – Is a object reference to pagerefernce variable.

To fetch any parameter you can use

a_Page_Reference.state.<URL_Parameter_Key>;

In above example URL_Parameter_Key is p_Name

Whenever there is a change in URL parameter p_Name, AURA component calls do_Init method and gets the updated URL parameter value and the same is assigned to a_Name variable.