Newer Version Available

This content describes an older version of this product. View Latest

Calling a Server-Side Action

Call a server-side controller action from a client-side controller. In the client-side controller, you set a callback, which is called after the server-side action is completed. A server-side action can return any object containing serializable JSON data.

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

The following client-side controller includes an echo action that executes a serverEcho action 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.

1swfobject.registerObject("clippy.codeblock-0", "9");{
2    "echo" : function(component) {
3        // create a one-time use instance of the serverEcho action
4        // in the server-side controller
5        var a = component.get("c.serverEcho");
6        a.setParams({ firstName : component.get("v.firstName") });
7
8        // Create a callback that is executed after 
9        // the server-side action returns
10        a.setCallback(this, function(action) {
11            if (action.getState() === "SUCCESS") {
12                // Alert the user with the value returned 
13                // from the server
14                alert("From server: " + action.getReturnValue());
15
16                // You would typically fire a event here to trigger 
17                // client-side notification that the server-side 
18                // action is complete
19            }
20            else if (action.getState() === "ERROR"){
21                var errors = a.getError();
22                if (errors) {
23                    $A.logf("Errors", errors);
24                    if (errors[0] && errors[0].message) {
25                        $A.error("Error message: " + 
26                                 errors[0].message);
27                    }
28                } else {
29                    $A.error("Unknown error");
30                }
31            }
32            else {
33                alert("Action state: " + action.getState());
34            }
35        });
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(a);
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.

The possible action states are:

NEW
The action was created but is not in progress yet
RUNNING
The action is in progress
SUCCESS
The action executed successfully
ERROR
The server returned an error
ABORTED
The action was aborted