Salesforce Lightning System and User Events

Salesforce Lightning System events are fired automatically by the Lightning framework such as during component initialization, attribute value change, rendering, etc. All Components can register for system events in their HTML markup. The Salesforce Lightning Framework used event-driven programming and it uses system and user events in the program. components to talk to each other, the framework recommends using Lightning events. We will write handlers that respond to interface events as they occur. These events may automatically by the framework.

  • A Client-side controller handles user events within a component. It’s a JavaScript resource that defines the function for all the Lightning component’s actions.
  • A Client-side helper enables us to offload complex logic from the controller into separate files so that the help function can be invoked from multiple controller functions.
  • Expressions are used to provide action functions for user interface events. Onclick, onhover, and any other HTML attributes beginning with “on” Some OOTB components simplify assigning actions to user interface events using other attributes, Such as the press attribute on <ui:button>.

Action function must be assigned to attributes using an expression, for example {!c.Action}. This assigns an Aura. Action, which is a reference to the controller function that handles the action. Let us learn how to assign a handler for a click event on a <div>. Follow the steps below.

Calling Client-Side Controller Actions

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="text" type="String" default="Just a string. Waiting for change."/>
      <input type="button" value="Flawed HTML Button" onclick="alert('this will not work')"/> <br/>
      <lightning:button label="Framework Button" onclick="{!c.handleClick}"/> <br/>
      {!v.text}
</aura:component>

Defining Client-side Controller Event Handler

Each controller action function take in three arguments

  • The component to which the controller belongs
  • The event that the action is handling.
  • The component bundle’s helper if it’s used.

Client-side controllers are surrounded by brackets and curl braces to denote a JSON object containing a map of name-value pairs. Separate functions with a comma.  Place your event handler code inside of the controller of the component’s bundle as shown below

({
handleClick : function(cmp, event) {
var attributeValue = cmp.get("v.text");
console.log("current text: " + attributeValue);
Handling events

Event handler attributes can be attached with an HTML DOM element. Event handler attributes on DOM elements can consist of HTML events, such as onClick, onLoad, onmouseover, onkeyup, onfocus, and many more. The event (onclick) is case-sensitive. The lightning framework supports most of the standard HTML client-side DOM events including, but not limited to, the following:

  • onclick
  • onmouseover
  • onmouseout
  • ondbclick
  • onmousedown
  • onmouseup
  • onmouseenter
  • onmouseleave

How to reuse code with Lightning Helpers

A helper resource is part of the component bundle and is auto-wired via the naming convention, <componentName>Helper.js. To create a helper using the Developer Console, click HELPER in the sidebar of the component. This helper file is valid for the scope of the component to which it’s auto-wired.

Helper function in Salesforce lightning is local to a computer. Implement a helper to improve code re-use by invoking the same function from multiple controller functions. Helper is used to moving the heavy lifting of JavaScript logic away from the client-side controller. Let us learn how to re-sue code with a lightning helper.

ClickMe.cmp

<aura:component
implements="force:appHostable,flexipage:availableForAllPageTypes"
access="global"
>
<div>
<div onclick="{!c.clickMe}" onmouseover="{!c.mouseOverMe}"> CLICK ME </div>
</div>
</aura:component>

 

ClickMeHelper.js

({
showAlert : function(component,msg){
alert(msg);
}
})

ClickMeController.js

({
clickME :function(component, event, helper){
helper.showAlert("Ouch");
},
mouseOverMe: function(component, event, helper){
helper.showAlert(component,"oooh");
}
})

How to Get and Set Component Attribute values?

In Salesforce Lightning, we can get and set the values of component attributes from within a handler’s function by using the following syntax:

({
handleClick : function(component, event, helper){
var src = event.getSource();
var msg = src.get("v.message");
if (msg == 'Click Me'){
component.set("v.message", 'Ouch');
} else {
component.set("v.message", 'Click Me!');
}
}
})

Handling System Events

The following events are fired by all components when they are invoked:

  • init: This event is fired when the component is instantiated, but before the markup in the component has rendered.
  • render: This event is fired after the init event, and after all markup from the component has fully rendered or re-rendered.

Listening for Component Initialization

When we create a component, the component fires an init event. This event is fired only once unless the component is explicitly unrendered. To listen for an init event, use the aura:handler component as shown below:

<aura:component >
    <aura:handler name="init" 
                  value="{!this}"
                  action="{!c.doInit}">
    </aura:handler>
</aura:component>Define a 

doInit 

that invokes a helper function named onInit, passing the component, event, and helper arguments to it.

Listening For Component Rendering

When a component is rendered or re-rendered, the render event is fired. Typically w would handle this event to perform post-processing on the DOM, such as applying or removing CSS classes from components. Handling the render events is similar to handling the init event as shown below example:

<aura:component>
<aura:handler name="render" 
                  value="{!this}"
                  action="{!c.onRender}">
    </aura:handler>
</aura:component>

Scroll to Top