Custom Apex Class Types

Supported Apex Data Types

When an instance of an Apex class is returned from a server-side action, the framework serializes the return data into JSON format. Only the values of public instance properties and methods annotated with @AuraEnabled are serialized and returned.

These Apex data types are serialized from @AuraEnabled properties and methods. They are supported as Aura component attributes.

• Primitive types except for BLOB
• Objects
• sObjects
• Lists and Maps if they hold elements of a supported type

Custom Apex Class Example

This example shows an Aura component called AccountCardComponent. When a user clicks Show Account, the page shows a card with the name of the account that has the specified ID.

AccountData is a custom Apex wrapper class that holds three strings.

1<!-- AccountData.apxc -->
2public class AccountData {
3    @AuraEnabled public String accountName {get;set;}
4    @AuraEnabled public String accountOwnershipType {get;set;}
5    @AuraEnabled public String accountIndustry {get;set;}
6}

The Apex server-side controller creates an AccountData object, and then returns the object to the JavaScript client-side controller.

1<!-- AccountCardApexController.apxc -->
2public class AccountCardApexController {
3    @AuraEnabled
4    public static AccountData account() {
5        Account myAccount = [SELECT Name FROM Account WHERE Id='001Z5000001QaPTIA0'];
6        AccountData account = new AccountData();
7        account.accountName = myAccount.Name;
8        return account;
9    }
10}

The JavaScript client-side controller retrieves the object from the Apex server-side controller by calling getAccount(). The controller then sets the result in the component’s account attribute, which is refreshed in the UI.

1<!-- AccountCardController.js -->
2({
3    getAccount : function(cmp) {
4        var action = cmp.get("c.account");
5        action.setCallback(this, function(response) {
6            var state = response.getState();
7            if(cmp.isValid() && state === "SUCCESS") {
8                var accountResponse = response.getReturnValue();
9                cmp.set("v.account", accountResponse);
10            }
11        });
12        $A.enqueueAction(action);
13    }
14})

The Aura component markup contains an <aura:attribute> tag with name="account". The attribute type is set to "AccountData".

1<!-- AccountCardComponent.cmp -->
2<aura:component implements="flexipage:availableForAllPageTypes" access="global"
3    controller="AccountCardApexController">
4    <aura:attribute name="account" type="AccountData" />
5    <lightning:button onclick="{!c.getAccount}" label="Show Account"/>
6    <div class="slds-p-bottom_medium" />
7    <aura:if isTrue="{!v.account}">
8        <lightning:card title="{!v.account.accountName}">
9        </lightning:card>
10    </aura:if>
11</aura:component>

List of Custom Apex Objects Example

If an attribute can contain more than one element, use a list.

This example shows an Aura component called AccountCardsComponent that uses the same AccountData custom Apex class as the previous example. When a user clicks Show Accounts, the page displays a list of cards with the account’s name, industry, and ownership type.

The Apex server-side controller creates an list of AccountData objects, and then returns the list to the JavaScript client-side controller.

1<!-- AccountCardsApexController.apxc -->
2public class AccountCardsApexController {
3    @AuraEnabled
4    public static List<AccountData> accounts() {
5    List<Account> MyAccounts = [SELECT Name, Industry, Ownership
6        FROM Account LIMIT 50];
7        List<AccountData> accounts = new List<AccountData>();
8        for(Account acc:MyAccounts) {
9            AccountData account = new AccountData();
10            account.accountName = acc.Name;
11            account.accountIndustry = acc.Industry;
12            account.accountOwnershipType = acc.Ownership;
13            accounts.add(account);
14        }
15        return accounts;
16    }
17}

The JavaScript client-side controller retrieves the list from the Apex server-side controller by calling getAccounts(). The controller then sets the result in the component’s accounts attribute, which is refreshed in the UI.

1<!-- AccountCardsController.js -->
2({
3    getAccounts : function(cmp) {
4        var action = cmp.get("c.accounts");
5        action.setCallback(this, function(response) {
6            var state = response.getState();
7            if(cmp.isValid() && state === "SUCCESS") {
8                var accountsResponse = response.getReturnValue();
9                cmp.set("v.accounts", accountsResponse);
10            }
11        });
12        $A.enqueueAction(action);
13    }
14})

The Aura component markup contains an <aura:attribute> tag with name="accounts". To set type="AccountData[]", array syntax is used because the attribute holds multiple AccountData objects.

1<!-- AccountCardsComponent.cmp -->
2<aura:component implements="flexipage:availableForAllPageTypes" access="global"
3    controller="AccountCardsApexController">
4    <aura:attribute name="accounts" type="AccountData[]" />
5    <lightning:button onclick="{!c.getAccounts}" label="Show Accounts" />
6    <div class="slds-p-bottom_medium" />
7    <aura:iteration var="acc" items="{!v.accounts}">
8        <lightning:card title="{!acc.accountName}">
9            <p class="slds-p-horizontal_small">
10                Industry: {!acc.accountIndustry} Type: {!acc.accountOwnershipType}
11            </p>
12        </lightning:card>
13    </aura:iteration>
14</aura:component>