Sunday, April 12, 2015

Salesforce Lightning Component Framework - All you need to know to get started...

Salesforce Lightning Component framework is really awesome. This is the framework which is having Apex on the server-side and JavaScript on the client-side. In this post, I will go through few objects, functions, concepts which will be used very frequently in most of the framework. So let's get started -

Controller -
Below is one controller function. It takes three parameters component, event, helper. 

Controller functions are used for client-side activities. For example - behavior on button click, form submit etc. can be defined inside a controller function. When calling this functions, as a developer, you don't need to set these parameters, the framework will populate them with the required values.

Helper Functions - 
This is the place where you will write all your codes which will be shared between components or sub components. If you have something non-trivial logic, you should move that to helper function and let your controller call the helper function. 

Below is one example where I am retrieving all cases. Now to retrieve cases, I need to write SOQL and that is something happening inside Apex controller (Server-Side). So my helper function getCases is calling the Apex controller's function and I am calling my handling function (getCases) from controller function. 

The advantage with this approach is that now I can call getCases whenever required from my controller. I don't need to repeat the same login every time.

Component - 
Lightning component is represented as component object in API. Below are few methods which you need to know -
  • get()/set() - These methods are used for getting and setting values from value provider. We have two different types of value providers -
    • "v" - This is attribute set value provider.
    • "c" - This is the controller (methods).
  • find() - Finds a component with a specified aura:id. It can find a simple HTML element also provided that element is having an aura:id.
  • getEvent() - Gets a component-level event. This is very much used when a component wants to fire an event that it has registered.
Event -
Lightning component event is represented as Event object in API. This is provided by the framework as parameters to the controller functions. Below are the important methods -
  • getParam() - This is used to get an attribute that was set on the event. 
  • fire() - This is used to fire an event.
  • setParams() - This is used to set parameters on the event.
Action Object -
This is used to communicate with server-side controllers. Below are few methods -
  • getReturnValue() - This is used to get the result of calling the action.
  • getState() - This is used to fetch the state of the action. This is very frequently used to check whether the server-side calling is successful or failure.
  • getError() - This is used to get an array of errors generated from a server-side action.
  • setParams() - This is used to set the parameters required for server-side methods.
  • setCallBack() - This is used to set the callback to be called when the action completes.
Utility Functions -
The API comes with few utility functions which we should know as they are very helpful. These functions are referred to as $A. Below are few utility functions -
  • $A.enqueueAction() - This is used to enqueue an action which will be called by the framework. In Lightning, you can't call any server-side functions directly, rather you will enqueue them and framework will execute those on your behalf.
  • $A.log() - This is used to log information to any subscribers of the leg level. You have to setup an subscriber to the level at which you are logging and have it handle it.
  • $A.newCmpAsync() - This is used to create a dynamic new component. A good example to display an error message by creating a dynamic component.
  • $A.getEvt() - This is used to fire an application-level event.
Lightning Component Documentation -
Your first point of source is the Lightning Components Developer's Guide. This is really well organized and contains lots of information. If you want to know more, you can always access the JavaScript API documentation @ http://<yourInstance>.salesforce.com/auradocs

0 comments:

Post a Comment