SFDC Stop - Always the latest about Salesforce


Full Tutorial Series with videos, free apps, live sessions, salesforce consulting and much more.


Telegram logo   Join our Telegram Channel

Sunday 25 March 2018

Events in Salesforce Lightning - Introduction

What is an Event ? Generally an event is a thing that happens or takes place. When we talk about events in JavaScript, they are simply a thing that happen to HTML element. There can be various types of events when we talk about HTML. For example:-
  1. Web page loaded is an event
  2. Clicking of a button is an event
  3. Changing text in an input field is also an event

So, we can say that any kind of interaction that happen in a webpage either automatically or by human interaction is an event. Now talking about the Salesforce Events, basically there are 2 types of events in Salesforce:- 
  1. Component Events
  2. Application Events

Component Events

A component event is an event that is fired by a lightning component. A component event can either be handled by the component itself or it can be handled by any other component which is present in the hierarchy that receives the event.

Application Events

An application event is generally like a broadcast message. Like if you send a broadcast, then all the receivers that are configured to accept that broadcast message receive that message. Similarly, an application event is fired by a component and all the other components that have the handler defined to receive that event are notified when the event is fired. Application Events are not bound by any hierarchy or relationship.

Salesforce recommends to use component events whenever possible as they have a limited scope. Application Events are handled at the application level and can be used to communicate between different components that are not related to each other.

Usually, we deal with the events that are fired when the user interacts with the browser. Such events are known as browser events. There are another type of events that are called system events that automatically trigger during the component life cycle. If you remember the Salesforce Lightning Tutorial Series, in first video, we added an init handler in our lightning component as shown below:-

In the above code snippet, you can see that I made a handler which runs when the component is initialized and i.e why salesforce has defined it to give the name init and in the above case, it calls the getContactList function which is present in our lightning controller. As we wanted to fetch our contact list when the page is loaded in the previous tutorial, so we used an init handler to do the task. Such event which is fired automatically on component initialization is an example of system event.

So, this was the introduction in which you learnt about what events are and how many events are there in Salesforce Lightning. In the next post, you'll learn about Component Events in Salesforce Lightning. You can go to the next post directly by clicking here. Otherwise you can directly jump on to any other tutorial from the below tutorials in the Salesforce Lightning Events Tutorial Series:-
  1. Salesforce Lightning Events Part 1 - Component Events Introduction
  2. Salesforce Lightning Events Part 2 - Building Component Events
  3. Salesforce Lightning Events Part 3 - Bubble and Capture Phase
  4. Salesforce Lightning Events Part 4 - Understanding Container Components
  5. Salesforce Lightning Events Part 5 - Application Events Introduction
  6. Salesforce Lightning Events Part 6 - Building Application Events
  7. Salesforce Lightning Events Part 7 - Phases of Application Events
Here is the playlist on YouTube that you can follow along with the blogs to have a better understanding:-


So stay tuned and subscribe to my blog if you liked it and do comment your feedback in comments.
Happy Trailblazing..!!

15 comments:

  1. Hi Rahul,
    Thanks for uploading the videos. I am trying to add some validation to the amount field and want to display an error if it is not of numeric type on the below of that field. For that i made below but not able to get the thing. can you please help me where else i need to change it to get it done.
    My Changes;
    in comp1 component added messageWhenTypeMismatch:

    in component controller modified like finding the amount component and validating whether the input provided is error or not, if yes then i am allowing to enter into our code else for now i am displaying alert. But there i want to display the custom error below the amount field.
    addIncome : function(component,event,helper) {
    var incomes = component.get('v.incomes');
    var amt = component.find('amount').get('v.value');
    var inputCmp = component.find("amount");
    alert(amt);
    if(!isNaN(amt)) {
    alert('yes');
    var newIncome = {
    sno: incomes.length + 1,
    source : component.find('source').get('v.value'),
    amount : parseFloat(component.find('amount').get('v.value'))
    }
    if(newIncome.source!='' && newIncome.amount!= '' && newIncome.source != null && newIncome.amount !=null) {
    incomes.push(newIncome);
    component.set('v.incomes',incomes);
    component.find('source').set('v.value','');
    component.find('amount').set('v.value','');
    }
    }
    else {
    alert('Please enter valid numbers from 0-9');
    //inputCmp.set("v.errors", [{message:"Input not a number: " }]);
    }
    }
    it is throwing error for me when setting the error. Can you please look into it and provide the solution for me. Thanks in advance,

    ReplyDelete
    Replies
    1. Hi Srujan, actually lightning:input has a different syntax for setting up errors. You have to do something like:-

      inputCmp.focus();
      inputCmp.set('v.validity', {valid:false, badInput :true});

      Have a look at this tutorial for a clear idea:- https://sfdcstop.blogspot.in/2018/03/salesforce-lightning-tutorial-part-5.html

      Delete
  2. Hi Rahul,

    Thanks for helping us with your awesome tutorials.

    I have created an application event to close the modal(created using lightning:overlaylibrary).
    But it works sometimes and snd starts to throe error then. When I check into console,the event seems to fire multiple times? Any solution

    ReplyDelete
  3. Hi Rahul,

    Thanks for your awesome tutorials on lightning.

    I have created an application event to close the modal created using lightning:overlaylibrary.But it works for few tries,after that it started to shoe error. When I look into console,it shows that the event is firing multiple times. Any solutions?

    ReplyDelete
    Replies
    1. Hi Joseph,

      Which event are you talking about can you give some more detailed explanation about the issue ?

      Delete
  4. Thank you very much for your awesome tutorials on lightning.


    ReplyDelete
    Replies
    1. Happy to see that you liked it Siva. Share it in your network too :-)

      Delete
  5. Well explained Rahul...Thank You Very Much

    ReplyDelete
    Replies
    1. Happy to help :-) Make sure to share among others too.

      Delete
  6. It helped me a lot. Thank you.

    ReplyDelete
    Replies
    1. Good to see that you liked it Abbas, make sure to share it in your network too :-)

      Delete
  7. Well Explained and Nice post.

    ReplyDelete
    Replies
    1. Great to see that you liked it Bibhudananda, make sure to share it in your network too :-)

      Delete
  8. Hi Rahul.
    Can you please a make a video to assign a tasks to partner Portal.

    ReplyDelete
    Replies
    1. Hi, can you please add a request here:- https://www.sfdcstop.com/p/what-do-you-want-us-to-post-next.html It'll help me to track. Thanks!

      Delete