Calling Apex from Aura Components

In order to call an apex method from our aura component, we need to associate the apex class to our aura component as the controller class of the aura component.

We can do that by specifying the apex class in the “controller” part of the aura:component tag.

Example :

<aura:component controller="ApexController">

       <lightning:button label="Call server" onclick="{!c.echo}"/>

</aura:component>

Here, the “ApexController” is an apex class as follows : 

public class ApexController {

    @AuraEnabled
    public static string getString()
    {
        return ‘test’;
}
}

AuraEnabled Notation

We need to use the @AuraEnabled notation with all the methods that we need to call from our lightning component. Also, the apex method must be defined as static in order to use the @AuraEnabled notation on it.

Example :

@AuraEnabled
public static string getString()
{
    return ‘test’;
}

Reading and Writing Attribute values in JS

If we want to read or write an attribute’s value in our javascript controller, we need to use the get and set methods.

Reading an Attribute Value (get)

Let’s say we have a String attribute called “text, like this :

<aura:attribute name=”text” type=”String”/>

If we need to read its value in our javascript controller, we can do it like this :

Syntax:

<component identifier>.get(“v.<attribute name>”);

Example:

({
    myAction : function(component,event,helper) {
        
        var text = component.get("v.text");
    }
})

Here, we use the stored the value of the “text” attribute in a variable called text in our script.

Writing an Attribute Value (Set)

If we need to write some value in an attribute in our javascript controller, we can do it like this :

Syntax:

<component identifier>.get(“v.<attribute name>”,<value>);

Example:

({
    myAction : function(component,event,helper) {
        
        var text = ‘abc’;
       component.set("v.text",text);

    }
})

Here, we are storing the value of the “text” variable in an attribute of the same name.

The Concept of Callback

When we call an apex method from our lightning component, the method is called asynchronously, that is, the framework does not wait for the apex method to return a response.

Here is where we have a concept of callback, by which we define a callback method in the javascript controller which is run when the apex method returns a response.

For example, let’s say we define a method in our apex class to return 10 of the Account records in our org :

public class ApexController {

    @AuraEnabled
    public static list getAccounts ()
    {
        return [SELECT Id,Name FROM Account limit 10];
}
}

If we want to call this method from our javascript method, here is how we do it :

Component Code :

<aura:component controller="ApexController">
    
       <aura:attribute name=”accs” type=”Account[]”/>
       <lightning:button label="Call server" onclick="{!c.getAccounts}"/>

</aura:component>

Javascript Controller :

({
    getAccounts : function(cmp) {
        
        var action = cmp.get("c.getAccounts");
        
        // Call back method
        action.setCallback(this, function(response) {
            
            var responseValue = response.getReturnValue(); 
            cmp.set("v.accs",responseValue);
            
        });
        
        // Enqueue Action
        $A.enqueueAction(action);
    }
})

In code above works in three steps :

1. First we need to get the method from our apex class, we do that by doing “cmp.get(“c.getAccounts”)”, where “getAccounts” is the name of the method in our apex class.

2. Then we need to define a call back method which will be run after the apex class has returned a response. This is done with the “action.setCallback” statement. We are reading the response returned from the apex class with “response.getReturnValue()” and store it in a var called “responseValue”. Then we set this var in an attribute we defined by doing a “cmp.set()”.

3. To fire off the call to the server we need to do “$A.enqueueAction(action)”, which sends the request to the server to process this request. Once the apex class has returned the response, the call back method defined in step 2 is run and performs the actions defined under it.