Passing Data 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.
var action = cmp.get("c.serverEcho");
action.setParams({ firstName : "Jennifer" });
The request payload includes the action data serialized into JSON.
Here's the Apex controller method.
@AuraEnabled
public static String serverEcho(String firstName) {
return ('Hello from the server, ' + firstName);
}
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.
<!-- actionParamTypes.app -->
<aura:application controller="ApexParamTypesController">
<lightning:button label="putboolean" onclick="{!c.putbooleanc}"/>
<lightning:button label="putint" onclick="{!c.putintc}"/>
<lightning:button label="putlong" onclick="{!c.putlongc}"/>
<lightning:button label="putdecimal" onclick="{!c.putdecimalc}"/>
<lightning:button label="putdouble" onclick="{!c.putdoublec}"/>
<lightning:button label="putstring" onclick="{!c.putstringc}"/>
<lightning:button label="putobject" onclick="{!c.putobjectc}"/>
<lightning:button label="putblob" onclick="{!c.putblobc}"/>
<lightning:button label="putdate" onclick="{!c.putdatec}"/>
<lightning:button label="putdatetime" onclick="{!c.putdatetimec}"/>
<lightning:button label="puttime" onclick="{!c.puttimec}"/>
<lightning:button label="putlistoflistoflistofstring" onclick="{!c.putlistoflistoflistofstringc}"/>
<lightning:button label="putmapofstring" onclick="{!c.putmapofstringc}"/>
<lightning:button label="putcustomclass" onclick="{!c.putcustomclassc}"/>
</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
// actionParamTypesController.js
({
putbooleanc : function(component, event, helper) {
helper.putdatatype(component, "c.pboolean", true);
},
putintc : function(component, event, helper) {
helper.putdatatype(component, "c.pint", 10);
},
putlongc : function(component, event, helper) {
helper.putdatatype(component, "c.plong", 2147483648);
},
putdecimalc : function(component, event, helper) {
helper.putdatatype(component, "c.pdecimal", 10.80);
},
putdoublec : function(component, event, helper) {
helper.putdatatype(component, "c.pdouble", 10.80);
},
putstringc : function(component, event, helper) {
helper.putdatatype(component, "c.pstring", "hello!");
},
putobjectc : function(component, event, helper) {
helper.putdatatype(component, "c.pobject", true);
},
putblobc : function(component, event, helper) {
helper.putdatatype(component, "c.pblob", "some blob as string");
},
// Date value is in ISO 8601 date format
putdatec : function(component, event, helper) {
helper.putdatatype(component, "c.pdate", "2020-01-31");
},
// Datetime value is in ISO 8601 datetime format
putdatetimec : function(component, event, helper) {
helper.putdatatype(component, "c.pdatetime", "2020-01-31T15:08:16.000Z");
},
// Set time in milliseconds.
// You can use (new Date()).getTime() to set the milliseconds
puttimec : function(component, event, helper) {
helper.putdatatype(component, "c.ptime", 3723004);
//helper.putdatatype(component, "c.ptime", (new Date()).getTime());
},
putlistoflistoflistofstringc : function(component, event, helper) {
helper.putdatatype(component, "c.plistoflistoflistofstring", [[['a','b'],['c','d']],[['e','f']]]);
},
putmapofstringc : function(component, event, helper) {
helper.putdatatype(component, "c.pmapofstring", {k1: 'v1'});
},
putcustomclassc : function(component, event, helper) {
helper.putdatatype(component, "c.pcustomclass", {
s: 'my string',
i: 10,
l: ['list value 1','list value 2'],
m: {k1: 'map value'},
os: {b: true}
});
},
})
The helper has a utility method to send the data to an Apex controller.
// actionParamTypesHelper.js
({
putdatatype : function(component, actionName, val) {
var action = component.get(actionName);
action.setParams({ v : val });
action.setCallback(this, function(response) {
console.log(response.getReturnValue());
});
$A.enqueueAction(action);
}
})
Here's the Apex controller.
public class ApexParamTypesController {
@AuraEnabled
public static Boolean pboolean(Boolean v){
System.debug(v);
return v;
}
@AuraEnabled
public static Integer pint(Integer v){
System.debug(v+v);
return v;
}
@AuraEnabled
public static Long plong(Long v){
System.debug(v);
return v;
}
@AuraEnabled
public static Decimal pdecimal(Decimal v){
System.debug(v);
return v;
}
@AuraEnabled
public static Double pdouble(Double v){
System.debug(v);
return v;
}
@AuraEnabled
public static String pstring(String v){
System.debug(v.capitalize());
return v;
}
@AuraEnabled
public static Object pobject(Object v){
System.debug(v);
return v;
}
@AuraEnabled
public static Blob pblob(Blob v){
System.debug(v.toString());
return v;
}
@AuraEnabled
public static Date pdate(Date v){
System.debug(v);
return v;
}
@AuraEnabled
public static DateTime pdatetime(DateTime v){
System.debug(v);
return v;
}
@AuraEnabled
public static Time ptime(Time v){
System.debug(v);
return v;
}
@AuraEnabled
public static List<List<List<String>>> plistoflistoflistofstring(List<List<List<String>>> v){
System.debug(v);
return v;
}
@AuraEnabled
public static Map<String, String> pmapofstring(Map<String, String> v){
System.debug(v);
return v;
}
@AuraEnabled
public static MyCustomApexClass pcustomclass(MyCustomApexClass v){
System.debug(v);
return v;
}
}
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.
public class MyCustomApexClass {
@AuraEnabled
public String s {get; set;}
@AuraEnabled
public Integer i {get; set;}
@AuraEnabled
public List<String> l {get; set;}
@AuraEnabled
public Map <String, String> m {get; set;}
@AuraEnabled
public MyOtherCustomApexClass os {get; set;}
}
The MyCustomApexClass Apex class has a property with a type of another custom Apex class, MyOtherCustomApexClass.
public class MyOtherCustomApexClass {
@AuraEnabled
public Boolean b {get; set;}
}