Salesforce Lightning

Controller in Lightning Bundle

Controller handle client-side events in lightning bundle. It’s a JavaScript resource that defines the functions for all of the component’s actions. A client-side controller is a JavaScript object in object-literal notation containing a map of name-value pairs. Function can represent an action event. Client-side controllers are surrounded by parentheses and curly braces. Separate action handlers with commas.


Example:

An_Action_Name : function(Component, Event, Helper){
	// Javascript code here.
}

Here a function takes 3 parameters

  1. Component – Represents the component to which the controller belongs
  2. Event – The event that action is handling. Like a click event or select event etc.
  3. Helper – The component’s helper, which is optional. A helper contains functions that can be reused by any JavaScript code in the component bundle.

Component attributes value can be accessed in controller section by using syntax shown below.

Syntax:

var a_attribute_Value = component.get("v.a_Attribute_Name");

Example:

var a_String_Value = component.get("v.a_String");

A new value can be set to attributes that are declared in component with below syntax.

component.set("v.a_Attribute_Name","New_Value");

“New_Value” should be of specific data type and double quotes may or may not be required as per data used (Data in a variable and raw data).

Example:

component.set("v.a_String","A new string value");
component.set("v.a_Integer",21);

Note:

  • The order of parameters matters a lot, just like any other normal function in class or javascript which takes parameters, the order in which the parameters is passed will be same no matter what name you give.
    • Means, If you write function(a, b, c), then a is component reference, b is event reference and c is helper reference. It is wise to choose proper name to avoid confusion.
  • Use unique names for client-side and server-side actions in a component. A JavaScript function (client-side action) with the same name as an Apex method (server-side action ) can lead to hard-to-debug issues. In debug mode, the framework logs a browser console warning about the clashing client-side and server-side action names.
  • Everything in Controller and Helper is case-sensitive.
  • A controller is in lightning bundle is saved as componentNameController.js. if you component name is My_Lightning_Component, then a controller will be saved as My_Lightning_ComponentController.js.

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 )

Connecting to %s