Passing Data to an Apex Controller

Use action.setParams() in JavaScript to set data to pass to an Apex controller.

This example sets the value of the firstName argument on an Apex controller’s serverEcho method based on the firstName attribute value.

1var action = cmp.get("c.serverEcho");
2action.setParams({ firstName : "Jennifer" });

The request payload includes the action data serialized into JSON.

Here's the Apex controller method.

1@AuraEnabled
2public static String serverEcho(String firstName) {
3    return ('Hello from the server, ' + firstName);
4}

The framework deserializes the action data into the appropriate Apex type. In this example, we have a String parameter called firstName.

Example with Different Data Types

Let's look at an application that sends data of various types to an Apex controller. Each button starts the sequence of passing data of a different type.

1<!-- actionParamTypes.app -->
2<aura:application controller="ApexParamTypesController"> 
3    <lightning:button label="putboolean" onclick="{!c.putbooleanc}"/> 
4    <lightning:button label="putint" onclick="{!c.putintc}"/> 
5    <lightning:button label="putlong" onclick="{!c.putlongc}"/> 
6    <lightning:button label="putdecimal" onclick="{!c.putdecimalc}"/> 
7    <lightning:button label="putdouble" onclick="{!c.putdoublec}"/> 
8    <lightning:button label="putstring" onclick="{!c.putstringc}"/>
9    <lightning:button label="putobject" onclick="{!c.putobjectc}"/>
10    <lightning:button label="putblob" onclick="{!c.putblobc}"/> 
11    <lightning:button label="putdate" onclick="{!c.putdatec}"/> 
12    <lightning:button label="putdatetime" onclick="{!c.putdatetimec}"/> 
13    <lightning:button label="puttime" onclick="{!c.puttimec}"/>
14    <lightning:button label="putlistoflistoflistofstring" onclick="{!c.putlistoflistoflistofstringc}"/>
15    <lightning:button label="putmapofstring" onclick="{!c.putmapofstringc}"/>
16    <lightning:button label="putcustomclass" onclick="{!c.putcustomclassc}"/>
17</aura:application>

Here's the application's JavaScript controller. Each action calls the helper's putdatatype method, which queues up the actions to send to the Apex controller. The method has three parameters:

The component
The Apex method name
The data to pass to the Apex method

1// actionParamTypesController.js
2({
3    putbooleanc : function(component, event, helper) {
4        helper.putdatatype(component, "c.pboolean", true);
5    },
6    putintc : function(component, event, helper) {
7        helper.putdatatype(component, "c.pint", 10);
8    },
9    putlongc : function(component, event, helper) {
10        helper.putdatatype(component, "c.plong", 2147483648);
11    },      
12    putdecimalc : function(component, event, helper) {
13        helper.putdatatype(component, "c.pdecimal", 10.80);
14    }, 
15    putdoublec : function(component, event, helper) {
16        helper.putdatatype(component, "c.pdouble", 10.80);
17    }, 
18    putstringc : function(component, event, helper) {
19        helper.putdatatype(component, "c.pstring", "hello!");
20    }, 
21    putobjectc : function(component, event, helper) {
22        helper.putdatatype(component, "c.pobject", true);
23    },
24    putblobc : function(component, event, helper) {
25        helper.putdatatype(component, "c.pblob", "some blob as string");
26    },
27    // Date value is in ISO 8601 date format
28    putdatec : function(component, event, helper) {
29        helper.putdatatype(component, "c.pdate", "2020-01-31");
30    },
31    // Datetime value is in ISO 8601 datetime format
32    putdatetimec : function(component, event, helper) {
33        helper.putdatatype(component, "c.pdatetime", "2020-01-31T15:08:16.000Z");
34    },
35    // Set time in milliseconds. 
36    // You can use (new Date()).getTime() to set the milliseconds
37    puttimec : function(component, event, helper) {
38        helper.putdatatype(component, "c.ptime", 3723004);
39        //helper.putdatatype(component, "c.ptime", (new Date()).getTime());
40    },
41    putlistoflistoflistofstringc : function(component, event, helper) {
42        helper.putdatatype(component, "c.plistoflistoflistofstring", [[['a','b'],['c','d']],[['e','f']]]);
43    },
44    putmapofstringc : function(component, event, helper) {
45        helper.putdatatype(component, "c.pmapofstring", {k1: 'v1'});
46    },
47    putcustomclassc : function(component, event, helper) {
48        helper.putdatatype(component, "c.pcustomclass", {
49            s: 'my string',
50            i: 10,
51            l: ['list value 1','list value 2'],
52            m: {k1: 'map value'},
53            os: {b: true}
54        });
55    },
56})

The helper has a utility method to send the data to an Apex controller.

1// actionParamTypesHelper.js
2({
3    putdatatype : function(component, actionName, val) {
4        var action = component.get(actionName);
5        action.setParams({ v : val });
6        action.setCallback(this, function(response) {
7            console.log(response.getReturnValue());
8        });
9        $A.enqueueAction(action);
10    }   
11})

Here's the Apex controller.

1public class ApexParamTypesController { 
2    @AuraEnabled
3    public static Boolean pboolean(Boolean v){
4        System.debug(v);
5        return v;
6    }
7    @AuraEnabled
8    public static Integer pint(Integer v){
9        System.debug(v+v);
10        return v;
11    }
12    @AuraEnabled
13    public static Long plong(Long v){
14        System.debug(v);
15        return v;
16    }  
17    @AuraEnabled
18    public static Decimal pdecimal(Decimal v){
19        System.debug(v);
20        return v;
21    } 
22    @AuraEnabled
23    public static Double pdouble(Double v){
24        System.debug(v);
25        return v;
26    }  
27    @AuraEnabled
28    public static String pstring(String v){
29        System.debug(v.capitalize());
30        return v;
31    }
32    @AuraEnabled
33    public static Object pobject(Object v){
34        System.debug(v);
35        return v;
36    }
37    @AuraEnabled
38    public static Blob pblob(Blob v){
39          System.debug(v.toString());
40        return v;
41    }      
42    @AuraEnabled
43    public static Date pdate(Date v){
44          System.debug(v);
45        return v;
46    }      
47    @AuraEnabled
48    public static DateTime pdatetime(DateTime v){
49        System.debug(v);
50        return v;
51    }       
52    @AuraEnabled
53    public static Time ptime(Time v){
54        System.debug(v);
55        return v;
56    }      
57    @AuraEnabled
58    public static List<List<List<String>>> plistoflistoflistofstring(List<List<List<String>>> v){
59        System.debug(v);
60        return v;
61    }       
62     @AuraEnabled
63    public static Map<String, String> pmapofstring(Map<String, String> v){
64        System.debug(v);
65        return v;
66    }     
67    @AuraEnabled
68    public static MyCustomApexClass pcustomclass(MyCustomApexClass v){
69        System.debug(v); 
70        return v;
71    }  
72}

The pcustomclass() Apex method has a parameter that's a custom Apex type, MyCustomApexClass. Each property in the Apex class must have an @AuraEnabled annotation, as well as a getter and setter.

1public class MyCustomApexClass {
2    @AuraEnabled
3    public String s {get; set;}
4    @AuraEnabled
5    public Integer i {get; set;}
6    @AuraEnabled
7    public List<String> l {get; set;}
8    @AuraEnabled
9    public Map <String, String> m {get; set;}
10    @AuraEnabled
11    public MyOtherCustomApexClass os {get; set;}
12}

The MyCustomApexClass Apex class has a property with a type of another custom Apex class, MyOtherCustomApexClass.

1public class MyOtherCustomApexClass {
2    @AuraEnabled
3    public Boolean b {get; set;}
4}

Lightning Aura Components Developer Guide

Passing Data to an Apex Controller

Example with Different Data Types

See Also