Lightning Component Events

In lightning component events are the most important and confusing topic . For the beginners It Is hard to understand the lightining events.

So here in this post I will explain you the concept of events in lightining. before dive into the deep lets talk a  little bit about  lightining component events.

What is lightning Events ? 

In the Lightning Component framework, events are fired from JavaScript controller actions. Events can contain attributes that can be set before the event is fired and read when the event is handled.

• Lightning components are designed to be self-contained and independent. so to communicate between two components we use events .
• Events are a two way  process: sending and receiving. The sending component (and controller) creates and then fires the event. The receiving component (and controller) intercepts and handles it.
• Lightning component events can be one of two types: Component and Application.

Component Events :

Component events are parent-child relationships, in which an event registered in the child component can be handled only by the parent and not other sibling components.

Application Events :

Application events, on the other hand, are for sibling relationships. They can communicate with any other component. The type of component is determined by the event file itself by setting the attribute on the <aura:event> tag to either COMPONENTor APPLICATION.

Let’s Understand Events By the help of an Example :

So In this example we communicate between two different lightining component by the help of an event so we have 2 different component and 1 event

Name Of the components are : 

1. productForm.cmp 
2. products.cmp

Name Of The event is : 

1. productAddItem.evt

Now lets see what this components will do and how event works

productAddItem.evt

Events are defined as separate entities from components and controllers, and they act as the go-between for the sending and receiving parties. The event definition also determines the event type: COMPONENT or APPLICATION.

<aura:event type="COMPONENT"> <aura:attribute name="products" type="Products__c" /> </aura:event> 

productForm.cmp

productForm component has a submit button attached to the event. The component registers an event (registerEvent is your cue this is the sending component) named addProduct. Keep this name in mind, because the receiving component will call this same name. It’s the glue that binds the sender and receiver together. The button references the clickAddProduct function in its controller, which begins the event process.

<aura:component> 
    <aura:attribute name="products" type="Products__c" />
    <aura:registerEvent name="addProduct" type="c:productAddItem" />
    <!—component form here—>
    <ui:button label="Add Product" press="{!c.clickAddProduct}" /> 
</aura:component> 

productFormController.js

When the button in the above component is pressed, it sends the action off to this function in the controller. Validation aside, this is pretty simple. It “loads” the event and then fires it.

({ 
   clickAddProduct: function(component, event, helper) 
   { 
       var products = component.get(“v.products");
       var createEvent = component.getEvent(“addProduct");
       createEvent.setParams({“products" : products});
       createEvent.fire();
    } 
}) 

products.cmp

Just like we registered the event in the child component, we now handle it in the parent component with a handler. Note that the name, addProduct, is the same as when we registered the event. The action attribute defines the next step in the loop, which calls a function in the controller called handleAddProduct.

<aura:component>
 <aura:attribute name=“products" type=“Products__c[]"/> 
 <aura:handler name="addProduct" event="c:productAddItem" action="{!c.handleAddProduct}" /> 
 <c:productForm /> 
    <!—rest of component stuff here—>
 </aura:component> 

productsController.js

This is the receiving controller that handles the incoming event and communicates with the apex controller. The function, saveProduct, is a reference to the apex controller in which the upsert takes place (not shown here). The final line of code queues up the action (the call to the server), which upserts the form entry. And with that, the event cycle is complete.

({ 
    handleAddProduct: function(component, event, helper) {
    var newProduct = event.getParam(“products");
    var action = component.get("c.saveProduct"); 
    action.setCallback(this, function(response) 
    {
       var state = response.getState(); 
       if (component.isValid() && state === "SUCCESS") 
       { 
          component.set("v.products", response.getReturnValue());
       } else 
       { 
           console.log("Failed with state: " + state);
        } 
     }); 
    $A.enqueueAction(action);
   } }) 

Hits: 319