You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Invoking Apex Callout Using Lightning Component

The Salesforce Lightning Component framework is used for developing dynamic web apps for Mobile and Desktop devices. It is built on an open-source framework called Aura. Lightning component is a client-server framework that accelerates development, as well as app performance, and is ideal for use with the Salesforce1 mobile applications. It uses JavaScript on the client side and Apex on the server side.

Steps to invoke Apex callout From Lightning component:

1. Enable Lightning component:

Navigate to Develop -> Lightning Components.

Check Enable Lightning Components and Enable Debug Mode options, and Click the Save Button.

2. Create Named Credential:

Under Administer section, Navigate to Security Controls  Named Credentials and click New Named Credential button. Enter the values as shown in the below image.

invoking apex callouts

3. Create a Wrapper class (“CustomerWrapper”):

Public class CustomerWrapper {

    public String Name{get;set;}
    public String City{get;set;}
    public String Country{get;set;}

4. Create a Server-Side Controller for the Lightning component (“ CustomerTableController ”):

Public class CustomerTableController {

 Public static List<customerWrapper> customerData(){
 Http h = new Http();
 HttpRequest req = new HttpRequest();
 HttpResponse res = h.send(req);
 return (List<customerWrapper>)JSON.deserialize(res.getBody(), List<customerWrapper>.class);

5. Create a New Lightning Component (“CustomersTable”):

 <aura:component controller="CustomerTableController" implements="force:appHostable" >
    <aura:attribute name="customers" type="customerWrapper[]"/>
    <br/> <br/><center>
    <ui:button press="{!c.getCustomerData}" label="Get The Customers Data"/>
    <br/> <br/><hr/>
        <table border="1" class="table">
            <aura:iteration items="{!v.customers}" var="cust">

6. Create new Client-Side Controller for the Lightning Component (“CustomersTableContoller.js”):


    getCustomerData : function(component) {
        var action = component.get("c.customerData");
        action.setCallback(this, function(response) { 
              var state = response.getState();
           if (state === "SUCCESS") {
               var returnValue =response.getReturnValue();
                component.set("v.customers", returnValue );

7. Create a Lightning Component Tab:

Under Build section, Navigate to Create  Tabs, and Click the New button in the Lightning Component Tabs section. Now, enter the values as shown in the below image.

8. Add Lightning component Tab to the Salesforce1 menu:

Under Administer section, Navigate to Mobile Administration  Mobile Navigation

Move the Customers option from “Available” to the “Selected Items”, and click the Save button

9. Salesforce1

Open Salesforce1 by using your Salesforce instance, for example, and select the Customers Option in the Salesforce1 menu

invoking apex callouts

10. Make a Callout from Lightning component:

Now, you can see the Get the Customers data button and if you click that link, it will make a callout to the below URL and will display the data from response in the table format.

invoking apex callouts

Data from the Response:

invoking apex callouts

Reference Link: Salesforce Lightning Component