Calling a Server-Side Action

A client-side controller is a JavaScript object in object-literal notation containing name-value pairs. Each name corresponds to a client-side action. Its value is the function code associated with the action.

Let’s say that you want to trigger a server-call from a component. The following component contains a button that’s wired to a client-side controller echo action. SimpleServerSideController contains a method that returns a string passed in from the client-side controller.

1<aura:component controller="SimpleServerSideController">
2    <aura:attribute name="firstName" type="String" default="world"/>
3    <ui:button label="Call server" press="{!c.echo}"/>
4</aura:component>

The following client-side controller includes an echo action that executes a serverEcho method on a server-side controller. The client-side controller sets a callback action that is invoked after the server-side action returns. In this case, the callback function alerts the user with the value returned from the server. action.setParams({ firstName : cmp.get("v.firstName") }); retrieves the firstName attribute from the component and sets the value of the firstName argument on the server-side controller’s serverEcho method.

1swfobject.registerObject("clippy.codeblock-1", "9");({
2    "echo" : function(cmp) {
3        // create a one-time use instance of the serverEcho action
4        // in the server-side controller
5        var action = cmp.get("c.serverEcho");
6        action.setParams({ firstName : cmp.get("v.firstName") });
7
8        // Create a callback that is executed after 
9        // the server-side action returns
10        action.setCallback(this, function(response) {
11            var state = response.getState();
12            if (state === "SUCCESS") {
13                // Alert the user with the value returned 
14                // from the server
15                alert("From server: " + response.getReturnValue());
16
17                // You would typically fire a event here to trigger 
18                // client-side notification that the server-side 
19                // action is complete
20            }
21            else if (state === "ERROR"){
22                var errors = response.getError();
23                if (errors) {
24                    $A.logf("Errors", errors);
25                    if (errors[0] && errors[0].message) {
26                        $A.error("Error message: " + 
27                                 errors[0].message);
28                    }
29                } else {
30                    $A.error("Unknown error");
31                }
32            }
33        });
34
35        // optionally set abortable flag here
36
37        // A client-side action could cause multiple events, 
38        // which could trigger other events and 
39        // other server-side action calls.
40        // $A.enqueueAction adds the server-side action to the queue.
41        $A.enqueueAction(action);
42    }
43})

In the client-side controller, we use the value provider of c to invoke a server-side controller action. This is the same syntax as we use in markup to invoke a client-side controller action. The cmp.get("c.serverEcho") call indicates that we are calling the serverEcho method in the server-side controller. The method name in the server-side controller must match everything after the c. in the client-side call.

Use $A.enqueueAction(action) to add the server-side controller action to the queue of actions to be executed. All actions that are enqueued this way will be run at the end of the event loop. Rather than sending a separate request for each individual action, the framework processes the event chain and executes the action in the queue after batching up related requests. The actions are asynchronous and have callbacks.

1action.setCallback(this, function(response) { ...}, "ABORTED");