Lightning Component for Communicating Server Side Aura Method – Best Practice 1

Aura framework provides a javascript action function to send a request from the lightning component to apex controller and it returns the response back to the client side. Please refer this link to know how the server side action is handled by the client-side controller. In this blog we are explaining the best practices can be followed to do this communication.

Implementation

This implementation requires two components. The server communication is modularized into an abstracted component which is then extended to the second component as needed.

Abstract Component

AbstractBase.cmp is the abstract component being extended to the ChildComponent. Please refer my old post which details how extending works in the lighting component.

  • runServerMethod – helper method defined in the AbstractBaseHelper.js file, to interact with the apex controller method.
  • Method Parameters 
    • component – default parameter in the js controller
    • serverMethodName – the name of the server method in the following format, namespace.method_name, eg: c.callApexControllerMethod
  • successCallBack – the callback executes for a successful server transaction
  • failureCallback – the callback executes for a failed transaction
  • params – parameters to be passed to the apex controller method.

response.getState() – provides the action status of the call happened from the client side to server side. The possible action states are NEW, RUNNING, SUCCESS, ERROR, INCOMPLETE and ABORTED.

Refer the link for more details: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_states.htm

You may have noticed that call method is invoked with two parameters in successCallback and failureCallback. The call is a seeded prototype method of vanilla javascript to invoke the function by passing the parameters. Please refer to the link given in the below reference section for details.

Sub Component

The ChildComponent is extended from the AbstractBase component so the subcomponent will have access to all the helper methods of the parent. The sub-component layout consists of input, checkbox and a button control. In addition to that, a couple of aura attributes are defined to store the values of the HTML controls and server responses.

c.sentMessage is a controller event which is triggered by the ‘send message’ button click which is used for invoking the helper method defined in the childComponent.

The sendMessage method defined in the helper part of aura bundle is invoked from the controller part. The helper method calls the runServerMethod which is defined in the parent abstract component.

runServerMethod is invoked with the following parameters.

  • component
  • callApexControllerMethod – static method defined in the apex controller, TestApexController
  • success callback – sets the serverMessage attribute with the response message from the server.
  • failure callback – set the showServerError, serverMessage attributes with the server response.
  • param – Collection of input control values – {message:message,showError:showError};
    • message – the value of the input textbox
    • showError – checked or unchecked status as a boolean

TestApexController

The apex method mush have the following attributes.

  • static and public keywords
  • @AuraEnabled annotation

The apex method accepts two parameters and returns a string message. The method throws an aura exception if the ‘showError’ parameter value is true

Testing Application

ChildComponent is invoked from the application markup.

Server communication Gif

Don’t forget to share the post if you like it & bookmark the blog for future references.

Reference :

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_call.htm

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

One thought on “Lightning Component for Communicating Server Side Aura Method – Best Practice 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s