3

I have a url link on a lightning component on customer community. When I click the link, I redirect to other lightning component.

<aura:attribute name="Url1" type="String" default="./commonClass?par=True?id=" description="URL to the common page." />
<li class="slds-item"><a href="{!v.Url1}">commonpage1</a></li>

Now, I would like to access the parameter "par" from the url link on new lightning component after redirecting. How can i do it? I went through Getting the URL parameter into Lightning component using the "{! paramName}" expression and Lightning App - getting URL parameter, but I dont see any <aura:application/> to declare my attribute there.

Updated: cmp:

 <aura:attribute name="int" type="String" description="Boolean from url to show Intermittent Report." /> 

controller.js:

doInit : function(component, event, helper) {

        helper.getParameterByName(cmp,event,'int');
    }

helperjs:

getParameterByName : function(cmp,event,name) {
   url = window.location.href;
   name = name.replace(/[\[\]]/g, "\\$&");
   var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
   results = regex.exec(url);
   if (!results) return null;
   if (!results[2]) return '';
   //return decodeURIComponent(results[2].replace(/\+/g, " "));
        component.set('v.int', decodeURIComponent(results[2].replace(/\+/g, " ")));

},

It says, WARNING: Callback failed: in inspect element chrome.

Please guide.

Thank you

1 Answer 1

7

This is a limitation, you cannot access the URL parameters in lightning components via an expression tag .

If the hashed part of the URL is changing then there is a neat event to handle and you can read what has changed

aura:locationChange event

If your URL hash is not changing then you can use javascript to do this in your controller.js using below code

doInit: function(component, event, helper) {
  // This is url query parameter
  var value = helper.getParameterByName(component , event, 'variable');
  // Set the value, assumes you have created attribute "attributename" in your markup
  component.set("attributename", value);
}

and your helper.js will have a common function to read URL parameter

getParameterByName: function(component, event, name) {
  name = name.replace(/[\[\]]/g, "\\$&");
  var url = window.location.href;
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
  var results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
9
  • 1
    side note: window.location.pathname instead of window.location.href can also be used, if you don't need the whole url
    – glls
    Commented Apr 14, 2017 at 18:57
  • @mohit thanks for the response. is the 'variable' parameter in my controller.js thats calling helper is the attribute in url link?
    – Anurag
    Commented Apr 14, 2017 at 19:11
  • Yes thats URL query parameter and I assume that you will use the attribute value as a query parameter to the URL Commented Apr 14, 2017 at 19:13
  • yes, but the attribute I use in URL is declared on the first component. When I click a URL on first component, it redirects to the new component. Now i want to access the attribute from URL in new component. The attribute is declared on different component and accessed in other component. In this case, do I have to declare attribute on both components or just on the initial component works?
    – Anurag
    Commented Apr 14, 2017 at 19:18
  • Ya so once you get the value is javascript you can use component.set("attributename", variablevalue); updated ans Commented Apr 14, 2017 at 19:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .