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

8

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, " "));
}
|improve this answer|||||
  • 1
    side note: window.location.pathname instead of window.location.href can also be used, if you don't need the whole url – glls Apr 14 '17 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 Apr 14 '17 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 – Mohith Shrivastava Apr 14 '17 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 Apr 14 '17 at 19:18
  • Ya so once you get the value is javascript you can use component.set("attributename", variablevalue); updated ans – Mohith Shrivastava Apr 14 '17 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.