Code By Code – Lightning Framework – Chapter 11 – Apex In Aura Component

Code By Code – Lightning Framework – Chapter 11 – Apex In Aura Component

Chapter 11

In this chapter, you will learn how you can call Apex methods from Aura Components. Topics for this chapter:

  • Enable Apex Methods For Use In Aura Component
  • Declaring Apex Controller 
  • Actions In Aura Component
  • Cacheable Apex Methods

Calling Server Side Controller

To call a server-side controller function you need to follow below steps:

  • Bind controller with your component
  • Create an action for server side controller
  • Optionally set action parameter
  • Enqueue action
  • Handle response

Enable Apex Methods For Use In Aura Component

Calling an apex method from aura component is easy, however, before doing so, you need to enable an apex method to be called from aura component. Below are some rules to be followed:

  • The Apex class must be public or global
  • The Apex method must be public or global and must be static
  • The Apex method must be annotated with @AuraEnabled annotation which makes it available for Aura Component use. For example:
public with sharing class CarTypeSearch {
@AuraEnabled
public static List<Car_Type__c > getCarTypes(){
return [SELECT Id, Name FROM Car_Type__c ];
}
}

Declaring Apex Controller

Before you can call any apex method from an apex class, you first need to declare the apex class as a controller in aura component. You can declare server controller in the aura:component tag itself which is also the first line in your component markup. Check below line from CarSearchForm component:

<aura:component controller=”CarTypeSearch”>

Actions In Aura Component

Once you annotate your Apex method with @AuraEnabled, now you need to call it from aura component.
To call an apex method, you need to use an action in your JavaScript files like controller, helper, and renderer. Below is sample action from CarSearchForm component:

var action = component.get(“c.getCarTypes”);
action.setCallback(this, function(data) {
component.set(“v.carTypes”, data.getReturnValue());
});
$A.enqueueAction(action);

You can also pass parameters to these apex methods using actions. For doing so, use action.setParams() method.

action.setParams({
‘param1’ : ‘Some Value’,
‘param2’ : ‘Another Value’
});

Note: Parameter name must match apex method parameter names.

Few things to remember:

  • Please do not give your apex method same name as your calling method from controller/helper file.
  • The method calls are asynchronous on the client-side, which means client-side javascript execution will continue and will not wait for the server response. However, the callback method is called on server response and post-processing should be done in this method.

Cacheable Apex Methods

You can also make your apex methods cacheable which means:

  • Server response is cached on the browser
  • This means, for a certain duration, the response is cached and all future call to same apex method during this duration will be served from the browser cache itself and these calls will be sent to the server.
  • This duration is hardcoded in the lightning framework itself. For now, the response is cached for 900 sec, however, the response data is only treated fresh for initial 30 sec. After the initial 30 sec, the browser will make a backend call to the server automatically and would get latest data again. In these cases, you may get 2 callback execution. More on this from this video here.

You can make an apex call cacheable in 2 ways:

1. Declare the apex method as cacheable. Doing this would make this method cacheable for all actions from all the different components.

@AuraEnabled (cacheable=true)

2. You can also make your server response cacheable or storable from aura component action call. Doing this would make the server response cacheable for a particular action and all other component and action will not be impacted.

action.setStorable();

CarSearchForm Helper Code

https://gist.github.com/e040307e1c1f8df890a15b974ab56914

Lightning Component Development Day5 - Server Side Controller, Apex, Inheritance In Lightning

Test your knowledge

Apex In Aura Component

Next In This Guide

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

Leave a Reply

Close Menu