Thursday 30 August 2018

Invoke Apex from Lightning Component | how to call an Apex class from a Lightning component

In this post we will talk about how to call Apex class from Lightning Component.

Step 1) Create on Apex Class with @AuraEnabled annotation and method must be static.

public with sharing class UserController {
    public static List<User> getUserList() {
        return [Select id,name,email FROM User ];

Step 2) Create Lightning Component with controller.
  • Add Controller attribute in <aura:Component tag to link the Apex Class like <aura:component controller="CLASSNAME">
  • Define <aura:Attribute tag to get value and to display value in Lightning page
  • Call Java Script doInit method to with <aura:handler" like <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<aura:component controller="UserController">
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>   
    <aura:attribute name="userList" type="List" />
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
              <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Type">Email</div></th>
              <!-- Use the Apex model and controller to fetch server side data -->
              <aura:iteration items="{!v.userList}" var="usr">
                      <th scope="row"><div class="slds-truncate" title="{!usr.Id}">{!usr.Id}</div></th>
                      <td><div class="slds-truncate" title="{!usr.Name}">{!usr.Name}}</div></td>
                      <td><div class="slds-truncate" title="{!usr.Email}">{!usr.Email}</div></td>

Step 3) In Java Script Controller method call the helper JS method like below
    doInit : function(component, event, helper) {

Step 4) As per best practice use Helper method for all logic.
  • Call Apex Class method with component.get("c.getUserList");
  • Then Set the callback method in queue like action.setCallback(this, function(response) { ... });
  • If call is successful then set the result in <aura:Attribute like  component.set("v.userList", response.getReturnValue());

    getUserList : function(component) {
        var action = component.get("c.getUserList");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.userList", response.getReturnValue());
            else {
                console.log("Failed with state: " + state);
    } ,


Step 5) Create one Application to test the result.

<aura:application extends="force:slds">
    <c:UserDetails />

Here is output.

Amit Chaudhary


  1. hi am getting empty page response.can you help with this

    1. Please check your query return any record or not

  2. What if we dont write @auraenabled in Apex class??

    1. You Can't Use that in Lightning Component

  3. Give you give more detail on how to complete step 5? How and where do you create on Application

  4. Can you give more detail on how to complete step 5? How and where do you create on Application