Foreground, setBackground, setStorable, setAbortable

There are some properties that you can set on a server-side action to influence how the framework manages the action while it’s in the queue waiting to be sent to the server.

Foreground and Background Actions

Foreground actions are the default. Multiple queued foreground actions are batched in a single request (XHR) to minimize network traffic. The batching of actions is also known as boxcar’ing, similar to a train that couples boxcars together. The server sends the XHR response to the client when all actions have been processed on the server. If a long-running action is in the boxcar, the XHR response is held until that long-running action completes. Marking an action as background results in that action being sent separately, which avoids it impacting the response time of the other actions.

To set an action as a background action, call the setBackground() method on the action object in JavaScript.

Storable Actions

Enhance your component’s performance by marking actions as storable to quickly show cached data from client-side storage without waiting for a server trip. If the cached data is stale, the framework retrieves the latest data from the server.

• A storable action might result in no call to the server. Never mark as storable an action that updates or deletes data.
• For storable actions in the cache, the framework returns the cached response immediately and also refreshes the data if it’s stale. Therefore, storable actions might have their callbacks invoked more than once: first with cached data, then with updated data from the server.

To mark a server-side action as storable, call setStorable() on the action in JavaScript code.

Abortable Actions

An abortable action in the queue is not sent to the server if the component that created the action is no longer valid, that is cmp.isValid() == false. A component is automatically destroyed and marked invalid by the framework when it is unrendered. Mark a server-side action as abortable by using the setAbortable() method on the Action object in JavaScript.

Mark a server-side action as abortable by using the setAbortable() method on the Action object in JavaScript.


Let's understand the scenarios using a sample application. Pressing the button under Foreground Action results in 1 batched action from 2 different actions (the 3rd entry), and is then sent to the server; while pressing the button under Background Action results in the action being sent separately (the 1st and 2nd entry) to the server.

Pressing the button under Storable Action for the first time results in one server trip (foreground action). Pressing the button again for couple of times doesn't result in any more server trips, displaying the same cached data from client-side storage as shown below.

Code for this application is provided below.

AuraHandledException

From Apex class:

    @AuraEnabled
    public static List<Account> fetchAccount() {
        throw new AuraHandledException('User-defined error');
    }

From client-side controller:

    doInit: function(component, event, helper) {
        var action = component.get('c.fetchAccount');
        action.setParams({ firstName : cmp.get("v.firstName") });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.Accounts', response.getReturnValue());
            }
            else if (component.isValid() && state === "ERROR") {
                console.log("Error Message: ", response.getError()[0].message);
            }
        });
        $A.enqueueAction(action);
    }

Lightning Component Rendering LifeCycle

Rendering LifeCycle

1. The init event is fired by the component service that constructs the components to signal that initialization has completed.

2. For each component in the tree, the base implementation of render() or your custom renderer is called to start component rendering.

3. Once your components are rendered to the DOM, afterRender() is called to signal that rendering is completed for each of these component definitions.

4. To indicate that the client is done waiting for a response to the server request XHR, the aura:doneWaiting event is fired.

5. The framework fires a render event, enabling you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements. Handling the render event is preferred to creating a custom renderer and overriding afterRender().

6. Finally, the aura:doneRendering event is fired at the end of the rendering lifecycle.

Salesforce doesn't recommend using the legacy aura:waiting, aura:doneWaiting, and aura:doneRendering application events except as a last resort. The aura:waiting and aura:doneWaiting application events are fired for every batched server request, even for requests from other components in your app.

References:
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-1.html
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-2.html

Access SOQL data in Lightning component

public class AccountContactController {
    @AuraEnabled
    public static List<Account> fetchAccount() {
        List<Account> listOfAccounts = [SELECT Name, AnnualRevenue, BillingState, (SELECT LastName FROM contacts) FROM Account LIMIT 10];
        return listOfAccounts;
    }
}

<aura:component controller="AccountContactController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="Accounts" type="Account[]"/>
    <ul>
        <aura:iteration items="{!v.Accounts}" var="account">
            <li>AccountName: {!account.Name}</li>
            <ul>
                <aura:iteration items="{!account.Contacts}" var="contact" indexVar="index">
                    <li>Contact {!index + 1} : {!contact.LastName}</li>
                </aura:iteration>
            </ul>
            <hr/>
        </aura:iteration>
    </ul>
</aura:component>

({
    doInit: function(component, event, helper) {
        var action = component.get('c.fetchAccount');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.Accounts', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

Access apex class properties in Lightning component

public class PersonController {
    @AuraEnabled public String Name {get;set;}
    @AuraEnabled public integer Age {get;set;}
    @auraEnabled public List<Account> ListOfAccounts {get;set;}
    
    @AuraEnabled
    public static PersonController initMethod(){
        PersonController person = new PersonController();
        person.Name = 'John Doe';
        person.Age = 30 ;
        person.ListOfAccounts = [SELECT Id, Name FROM Account LIMIT 10];
        return person ;
    }
}

Note the attribute personController of type PersonController.

<aura:component controller="PersonController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="personController" type="PersonController"/>
    
    <div>
        Name: {!v.personController.Name}<br />
        Age: {!v.personController.Age}<br />
    </div>
    <div>
        List of Accounts:
        <aura:iteration items="{!v.personController.ListOfAccounts}" var="account">
            <li>{!account.Name}</li>
        </aura:iteration>
    </div>
</aura:component>

({
    doInit : function(component, event, helper) {
        var action = component.get('c.initMethod');
        action.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.personController', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
})