Apex with Aura

There has been always confusion around how to structure & write or remember the Apex connection with Aura. Below is a break-down of how to handle apex server side call from aura.

To integrate or send data from Apex to Aura component the key are two Major things:

1. Ensure to make your Apex Class method @AuraEnabled and connect Apex class to Aura component via controller attribute.
2. Define Callback method, set params to send to apex, handle callback method and enqueue it to execute

Lets focus on Step 2 that has 4 major steps :

({
handleClick : function(component, event, helper) {
//Step 2.1: Mention Name of Apex Method — defined by variable action

var action = component.get(‘c.fetchAccount’);

//Step 2.2: set params if any that are inputted to apex method
action.setParams({
“accName”: “Edge Communications”
});

//Step 2.3: Define Callback function
action.setCallback(this,function(response){
var state = response.getState();
if(state===’SUCCESS’)
{
var returnValue = response.getReturnValue();
console.log(returnValue);
}
else if (state===’INCOMPLETE’){
console.log(‘Internet Connection broken’);
}
else if (state === ‘ERROR’){
console.log(response.getMessage());
}
});

//Step 2.4: enqueue action defined above in Step 2.1
$A.enqueueAction(action);

}
})

Step 1: below is as follows:

APEX CLASS BELOW:

public class ApexClassToGetAccount {
@AuraEnabled
public static List<Account> fetchAccount(String accName)
{
return [Select Id,Name,Industry from Account where Name=: accName];
}
}

AURA COMPONENT:

<aura:component controller=”ApexClassToGetAccount” >
<lightning:card>
<div>
<lightning:button label=”Fetch Account” onclick=”{!c.handleClick}”/>
</div>
</lightning:card>
</aura:component>

Output : On Click of Fetch Account — Edge Communications details are fetched