Lightning Aura Components Developer Guide
jNewer Version Available
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}