Salesforce | Passing URL parameters to Apex controller in a Lightning components

The following example helps you understand how to pass parameters from URL to components.

In AURA , it is made easy to pass the parameters to the controllers. This only works for attributes of type String and must be appended to a .app resource. You can’t request URL value for a .cmp resource directly.

We know that we can create attributes in the components as variables and they are meant for the scope of the components. So we create application attributes for the entire scope of application. So when we need to get the values from the URL, it is easy to pass them to application attributes, in other words, application attributes can take the values from URL directly.

Here is a simple example:

1. Create an application - 'URLApp'

2. Create an attribute in the application.

<aura:application>
    <aura:attribute name=”GetIdFromUrl” type=”String” default=”this is default value”/>
    Value in GetIdFromUrl  Attribute: {!v.GetIdFromUrl}!
</aura:application>

Save the code and run it, your output should be:

Now, If you just pass a value (.app?GetIdFromUrl=Pass the Any ID of the account record )to the url the attribute as parameter in the URL, for example, in this case:

That's all there is for parameter passing using URL in Lightning Component.

Now that you have the value in the attribute, you can play with it. Now let's say, we want to get Account details based on the ID from URL.

Let's create a component and pass this value to the component and we can take it from that easily.

3. Create a component Name: AccountFormByID, adding a server-side controller, AccountFormByIDController, with an attribute: accGetID

<aura:component controller=”AccountFormByIDController” >
    <aura:attribute name=”accGetID” type=”String”/> 
    <aura:attribute name=”ac” type=”Account”/>   
    <aura:handler name=”init” value=”{!this}” action=”{!c.doInitAction}” /> 
    <ui:inputText label=”Account Name” value=”{!v.ac.Name}”/>            
    <ui:inputText label=”Type” value=”{!v.ac.Type}”/> 
    <ui:inputText label=”Industry” value=”{!v.ac.Industry}”/>  
</aura:component>

So with this, Component is capable of showing an account record on the app. we need to associate this component with our app and controllers.

4. Client-side Controller:

({
    doInitAction : function(component, event, helper) {
              var action = component.get(“c.find_AccById”);
        action.setParams({ “get_accountid”: component.get(“v.accGetID”) });
         action.setCallback( this, function(response) {
            var state = response.getState();
            if (state === “SUCCESS”) {
                component.set(“v.ac”, response.getReturnValue());
                console.log(response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
})

5. Server-side Controller:

public class AccountFormByIDController {
    @AuraEnabled
    public static Account find_AccById(Id get_accountid) {
        if(get_accountid != null ) {
            return [SELECT Id, Name, Type, Industry from Account where ID = :get_accountid];
        }
        else{
            return [SELECT ID,  Name, Type, Industry from Account LIMIT 1];
        }     
    } 
}

And make some changes on the app:

<aura:application>
    <aura:attribute name=”GetIdFromUrl” type=”String”/>
    Value in GetIdFromUrl Attribute: {!v.GetIdFromUrl}
    <c:AccountByID accGetID=”{!v.GetIdFromUrl}”/>
</aura:application>

Now, Try without passing attribute value in URL parameter and you get output like this :