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.

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:

  1. The component
  2. The Apex method name
  3. 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;}
}

When Lightning Web Security is enabled, you can’t use an Apex inner class as a parameter or return value for an Apex method that's called by an Aura component.

Note