17

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.

5
  • 1
    Attribute being value providers should be like :{!v.attributeName}.
    – Praveen
    Commented Mar 23, 2017 at 6:37
  • @Praveen Sorry My bad . Just Assume it like a value provider i.e {! v.urlParamName}. Commented Mar 23, 2017 at 8:25
  • I'll add the comment as answer and accept it, so that we can close the question.
    – Praveen
    Commented Mar 23, 2017 at 9:04
  • @Praveen this can't be the answer. It doesn't works in lightning. Commented Mar 23, 2017 at 9:22
  • Apart from the value provider, you are missing aura:application which you need to use as pointed by Santanu.
    – Praveen
    Commented Mar 23, 2017 at 9:42

4 Answers 4

29

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 https://<instance>.lightning.force.com/lightning/cmp/<namespace>__componentName?testAttribute=abc

<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"

4
  • 1
    This worked for me - thank you! I found this link to be helpful: PageReference Types Commented Jun 11, 2018 at 13:35
  • 13
    The original question asked about get params in a community context. lightning:isUrlAddressable does not work in communities.
    – Tyler Zika
    Commented Jul 28, 2018 at 6:24
  • @TylerZika you are right. It is not working in communities. Commented Sep 24, 2018 at 16:36
  • 1
    You now need to append namespace c__ to all parameters which you are including in url and component - so, state.c__testAttribute. Commented Feb 17, 2021 at 17:22
16

First thing first. You have written apex:attribute in your question which is not valid, you should use aura:attribute.

Next, you have to declare the attributes in the app, not in the component in order to fetch them from the URL.

<aura:application >
    <aura:attribute name="name" type="String"/>
    <aura:attribute name="surname" type="String"/>
    Name is : {!v.name} 
    SurName is : {!v.surname}
</aura:application>

This works perfectly fine.

UPDATE: After coming to know that Tarique is looking for a solution in components in community, I did some research and this guy has done a good job for this.

So basically you need to fetch the params using the JS controller. Handle the init event and then do the following to fetch the URL params:

doInit : function(component, event, helper) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1)); //You get the whole decoded URL of the page.
        var sURLVariables = sPageURL.split('&'); //Split by & so that you get the key value pairs separately in a list
        var sParameterName;
        var i;

        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('='); //to split the key from the value.

            if (sParameterName[0] === 'firstName') { //lets say you are looking for param name - firstName
                sParameterName[1] === undefined ? 'Not found' : sParameterName[1];
            }
        }
        console.log('Param name'+sParameterName[0]);
        console.log('Param value'+sParameterName[1]);
    }

I have tried this in my org and it worked!

4
  • 2
    I am using aura component and using it on community pages. So I have to fetch some parameters from URL. But the way you mentioned doesn't works for me. Commented Mar 24, 2017 at 3:39
  • I didn't get that from your question. Anyway I have updated my answer. Commented Mar 24, 2017 at 9:12
  • I want to get the Parameters from the URL directly without using any JS code. Commented Mar 29, 2017 at 6:37
  • This code will give you the LAST parameter always. You need to break out of the loop when you find the one you are looking for Santanu.
    – Shanerk
    Commented Jun 10, 2020 at 21:48
7

It is actually much easier to pass URL parameters to Lighning components in a community page. The "trick" is to expose your attributes at design time to the page, so they show up in the Lightning page designer as component properties. You do that in the design definition (the .design file):

<design:component label="Sample">
   <design:attribute name="someParam" label="Make Parameters great again" />
</design:component>

this presumes that you component has a parameter someParam in its attribute definition (in the .cmp file):

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="someController">
    <aura:attribute name="someParam" type="String" />
    .... stuff here ...
</aura:component>

Let's presume your url looks like ....?color=blue then you add into the property value of your component, after you dragged it onto the lightning page in community builder:

 {!color}

This will pull the value of the color URL parameter and hand it to the someParam attribute of your component. No JS required.

Hope that helps

Update:

Passing URL parameters using component properties is not officially supported and only works on a full page load (which is slow).

4
  • I have component from managed package which has attribute named Media Id. How can I get api name of that attribute to pass value?
    – patryk
    Commented Nov 30, 2017 at 13:38
  • @pepper42 - ask a new question. Better odds to get it solved
    – stwissel
    Commented Dec 1, 2017 at 0:22
  • I found this answer worked only if I added access="global" to the individual aura:attribute tags... otherwise it did not work. But once I did this it worked a charm.
    – bpilling
    Commented Jan 19, 2018 at 0:25
  • Glad it worked out for you
    – stwissel
    Commented Jan 19, 2018 at 0:27
3

Based on Damon Shaw's code, just add this helper method:

getUrlParameter : function(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
}

You must log in to answer this question.

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