How To: Call an Apex Controller Method From Lightning Component

Lightning seems to be all the rage these days!  How could it not?  It is exciting stuff and changes the way that Salesforce developers need to think when coming up with their solutions on the platform.  One of the most common things you will need to do with Lightning will be to call methods on an Apex controller for any server side logic you need to perform.

If this is something you are trying to figure out then you have come to the right place.  If you are familiar with using Javascript Remoting in Visualforce, then calling Apex methods from a Lightning component will look very very similar.

The following assumes you have your namespace setup and you are able to create a Lightning app that you can hit from the preview in the developer console.  Once you have a Lightning app created, you can create a component to add to the app.  This component will be what makes the callout to the controller.

<aura:component controller="yournamespace.YourController">
    <aura:attribute name="yourAuraVariable" type="String"/>
    ...
</aura:component>

Here you can see that we have a controller called YourController.  This controller will have the method that we use to populate the aura attribute yourAuraVariable.  The controller code will look something like this.

public class YourController {
    @AuraEnabled
    public static String getMyAuraVariableFromTheController() {
        return 'Here is the text from my controller';
    }
}   

Now that we have our controller code built, it is just a matter of calling this code from a little bit of Javascript in the Lightning component.

({
    getMyAuraVariable : function(component) {
        //this will be the method name on the controller contained within the 
        // controller property on our aura component
        var a = component.get("c.getMyAuraVariableFromTheController");
        var self = this;

        //build the callback since all controller calls are batched and sent
        //asynchronously
        a.setCallback(this, function(action){
            //action.getState() will let you know if it was successful or not. 
            //a good idea would be to check this to make sure everything
            //worked as expected.
            console.log(action.getState());

            //set the return value from the controller to the variable on our component
            component.set("v.yourAuraVaraible", action.getReturnValue());
            //do more stuff
        });

        //fire off the action
        $A.enqueueAction(a);
    }, 
    ...
}) 

This bit of code is contained within the helper of our component.  You simply call this function from anywhere, either on init or another action on the page and it will populate our aura variable with the results that are returned from the controller.  In this case ‘Here is the text from my controller’.  Obviously in most cases you will want to return more complex data than just a string but this is just to get you off the ground and running with how calling controller methods work.  Good luck and let me know if you have any questions!!

 

Comments

Returning visitor? Please login or register.

Leave A Comment