Lightning Data Services : Hands on Training Guide

In this blog, we are going to create a sample app which will list 10 recents accounts from Salesforce and will view and edit account using Lightning Data Services.

So lets start.

Create a “LDSAccountListViewApp” Lightning Application

• In the Developer Console, choose File > New > Lightning Application.
• Specify “LDSAccountListViewApp” as the app name and click submit.
• Specify below code in lightning app.

<aura:application extends="force:slds"> 

    <div class="slds-text-heading_large slds-text-align_center"> 

Lightning Data Service Demo App 

    </div> 

</aura:application>

• Save the file.
• Click  preview

Create a LDSAccountEdit lightning Component

• In the Developer Console, choose File > New > Lightning Component.
• Specify “LDSAccountEdit” as the component name and click submit. Paste below code and Save the file.

<aura:component > 

<aura:attribute name="recordId" type="String" required="true"/> 

<aura:attribute name="recordInfo" type="Object"/> 

<aura:attribute name="fieldsInfo" type="Object"/> 

<aura:attribute name="recordError" type="String"/> 

<aura:attribute name="currView" type="String" />

<force:recordData aura:id="recordLoader" 

recordId="{!v.recordId}" 

mode="EDIT" 

targetRecord="{!v.recordInfo}" 

targetFields="{!v.fieldsInfo}" fields="Name,Owner.Name,AnnualRevenue,AccountNumber" 

targetError="{!v.recordError}" 

recordUpdated="{!c.handleRecordChanges}" /> 

<div class="maincontainer"> 

</div> 

<!-- Display Lightning Data Service errors, if any --> 

<aura:if isTrue="{!not(empty(v.recordError))}"> 

<div class="recordError"> 

    <ui:message title="Error" severity="error" closable="true"> {!v.recordError}     </ui:message> 

</div> 

</aura:if> 

</aura:component>

• Click CONTROLLER in the right side bar of the code editor and replace code with below code and save the file.

({ 

    handleRecordChanges: function(component, event, helper) {

  var eventParams = event.getParams(); 

if(eventParams.changeType === "LOADED") { 

// record is loaded 

var fieldsDetails= component.get("v.fieldsInfo"); 

console.log("fieldsInfo is loaded successfully. TargetField"+ JSON.stringify(fieldsDetails)); 

var recordDetails= component.get("v.recordInfo"); 

console.log("recordInfo -Target Record"+ JSON.stringify(recordDetails)); 

console.log('Record loaded successfully'); 

} 

     } 

})

• Update the “LDSAccountListViewApp” code with below code and save file.

<aura:application extends="force:slds"> 

    <div class="slds-text-heading_large slds-text-align_center"> 

Lightning Data Service Demo App 

    </div> 

    <c:LDSAccountEdit recordId=“0017F000004R9C3QAK”/>

</aura:application>

Lets see what we have done!!!

• In order to display more account fields, replace the code inside div with class “maincontainer” with below code.

<div class="maincontainer"> 
      <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 
           <div class="slds-form-element__control" > 
                  <lightning:input label="Account Name" name="accname" value="{!v.fieldsInfo.Name}" /> 
           </div> 
       </div>
       <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 
            <div class="slds-form-element__control" > 
               <lightning:input type="number" label="Annual Revenue" name="atype" value="{!v.fieldsInfo.AnnualRevenue}"  formatter="currency"/>
             </div> 
        </div> 
        <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 
            <div class="slds-form-element__control" > 
                  <lightning:input label="Account Number" name="accnum" value="{!v.fieldsInfo.AccountNumber}" /> 
            </div>
         </div>
          <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 
                <div class="slds-form-element__control" > 
                       <lightning:button variant="brand" label="Save" onclick="{!c.saveRecordHandler}"/> 
                        <lightning:button variant="brand" label="Back" /> 
               </div> 
               </div>
 </div>

• Click CONTROLLER in the right side bar of the code editor and add saveRecordHandler function and save the file.

saveRecordHandler: function(component, event, helper) {       component.find("recordLoader").saveRecord($A.getCallback(function(saveResult) { 

   if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {         console.log('Record updated successfully'); 

   }else if (saveResult.state === "ERROR") { 

      console.log('Problem error: ' + JSON.stringify(saveResult.error)); 

   } else { 

        console.log('Unknown problem, state: ' + saveResult.state + ', error: ' +        JSON.stringify(saveResult.error)); 

   } 

})); 

}

• Update the “LDSAccountListViewApp” code with below code and save file.

<aura:application extends="force:slds"> 

    <div class="slds-text-heading_large slds-text-align_center"> 

Lightning Data Service Demo App 

    </div> 

    <c:LDSAccountEdit recordId=“0017F000004R9C3QAK”/>

</aura:application>

Lets see what we have done!!!

Create a LDSAccountView lightning Component

• In the Developer Console, choose File > New > Lightning Component.
• Specify “LDSAccountView” as the component name and click submit.
• Copy the code from “LDSAccountEdit” component and paste it here.
• Add a attribute disabled="true" in all lightning:input tag

<lightning:input label="Account Name" name="accname" value="{!v.fieldsInfo.Name}" dsabled="true"/>

• Remove "handleRecordChanges" attribute from <force:recorddata> tag.
• Remove Lightning:button with label as "Save".

Complete code for LDSAccountView Component is :

<aura:component >

    <aura:attribute name="recordId" type="String" required="true"/>

    <aura:attribute name="recordInfo" type="Object"/>

    <aura:attribute name="fieldsInfo" type="Object"/>

    <aura:attribute name="currView" type="String" />

    <aura:attribute name="recordError" type="String"/>

    <force:recordData aura:id="recordLoader"  

                      recordId="{!v.recordId}"  

                      mode="VIEW"

                      targetRecord="{!v.recordInfo}"

                      targetFields="{!v.fieldsInfo}" 

                      fields="Name,Owner.Name,AnnualRevenue,AccountNumber"

                      targetError="{!v.recordError}"

                      />

    <div class="maincontainer"> 

        <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 

            <div class="slds-form-element__control" > 

                <lightning:input label="Account Name" name="accname" value="{!v.fieldsInfo.Name}" disabled="true"/> 

            </div> 

        </div>

        <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 

            <div class="slds-form-element__control" > 

                <lightning:input type="number" label="Annual Revenue" name="atype" value="{!v.fieldsInfo.AnnualRevenue}"  formatter="currency" disabled="true"/>

            </div> 

        </div> 

        <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 

            <div class="slds-form-element__control" > 

                <lightning:input label="Account Number" name="accnum" value="{!v.fieldsInfo.AccountNumber}" disabled="true"/> 

            </div>

        </div>

        <div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1"> 

            <div class="slds-form-element__control" > 

                <!--<lightning:button variant="brand" label="Save" onclick="{!c.saveRecordHandler}"/> -->

                <lightning:button variant="brand" label="Back" onclick="{!c.goBackToListView}"/> 

            </div> 

        </div>

    </div>

    

    <!-- Display Lightning Data Service errors, if any -->

    <aura:if isTrue="{!not(empty(v.recordError))}">

        <div class="recordError">

            <ui:message title="Error" severity="error" closable="true">

                {!v.recordError}

            </ui:message>

        </div>

    </aura:if>    

</aura:component>

• Update the “LDSAccountListViewApp” code with below code and save file.

<aura:application extends="force:slds"> 

    <div class="slds-text-heading_large slds-text-align_center"> 

Lightning Data Service Demo App 

    </div> 

    <c:LDSAccountView recordId=“0017F000004R9C3QAK”/>

</aura:application>

Lets see what we have done!!

Create a Apex class to fetch Account records

• Create Apex Class “LDSAccountListViewController” to fetch latest 10 Account records from your org.

public with Sharing class LDSAccountListViewController { 

@AuraEnabled public static List<Account> findAccounts(){ 

List<Account> accList = new List<Account>(); 

accList=[select id, name,owner.name,type,AccountNumber,AnnualRevenue,Phone from Account order by lastModifiedDate DESC Limit 10]; 

return accList; 

} 

}

Create a LDSAccountListView lightning Component

• In the Developer Console, choose File > New > Lightning Component.
• Specify “LDSAccountListView” as the component name and click submit.

<aura:component controller="LDSAccountListViewController" > 

<aura:attribute name="accList" type="List" /> 

<aura:attribute name="menu" type="List" default="View,Edit"/>

<aura:attribute name="currentView" type="String" default="ListView"/>

<aura:attribute name="selectedRecord" type="String" /> 

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

<!--Section for Account List View starts--> 

<aura:if isTrue="{!v.currentView =='ListView'}"> 

<div class="slds-card"> 

  <div class="slds-card__header slds-grid"> 

   <header class="slds-media slds-media_center slds-has-flexi-truncate"> 

         <div class="slds-media__figure"> 

      <lightning:Icon iconName="standard:account" size="large" variant="inverse" /> 

     </div> 

           <div class="slds-media__body"> 

     <h2> <span class="slds-text-heading_small">Accounts({!v.accList.length})</span> </h2>      

     </div> 

   </header> 

   <div class="slds-no-flex"> <lightning:button variant="brand" label="New Account" />   </div> 

    </div> 

    <div class="slds-card__body slds-card__body_inner"> 

        <aura:if isTrue="{!v.accList.length > 0}"> <!--display all accounts--> </aura:if> 

                                </div> 

          <footer class="slds-card__footer">@sunil02kumar</footer> </div> 

</aura:if>

<!--Section for Account List View ends--> 

</aura:component>

• Click CONTROLLER in the right side bar of the code editor and add doInit function and save the file

({ 

    doInit : function(component, event, helper){ 

var action = component.get("c.findAccounts"); 

action.setCallback(this, function(response) { 

var state = response.getState(); 

if (state === "SUCCESS") { 

var apexResponse = response.getReturnValue();

//console.log('***apexResponse:'+ JSON.stringify(apexResponse));

component.set("v.accList", apexResponse);

console.log('********Accounts list view loaded successfully'); 

}else if(state === "ERROR"){ 

alert('Problem with connection. Please try again.'); 

}}); 

$A.enqueueAction(action); 

    } 

})

• Update the “LDSAccountListViewApp” code with below code and save file.

<aura:application extends="force:slds"> 

    <div class="slds-text-heading_large slds-text-align_center"> 

Lightning Data Service Demo App 

    </div> 

    <c:LDSAccountListView />

</aura:application>

• Update LDSAccountListView lightning Component. Replace <!--display all accounts-->  section with below code and save file.

<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">

<thead> 

      <tr class="slds-text-title--caps"> 

<th scope="col">Actions</th> 

<th scope="col">Name</th> 

<th scope="col">Account Number</th> 

</tr> 

</thead> 

<tbody> 

     <aura:iteration items="{!v.accList}" var="item"> 

     <tr class="slds-hint-parent"> 

  <td scope="row"> 

<lightning:buttonMenu iconName="utility:threedots" > 

  <aura:iteration items="{!v.menu}" var="menuItem"> 

                             <lightning:menuItem label="{!menuItem}" value="{!item.Id + '---' + menuItem}" onactive="{!c.onSelectMenuItem}"/> 

  </aura:iteration> 

</lightning:buttonMenu> 

</td> 

<td > {!item.Name}</td> 

<td > {!item.AccountNumber}</td> 

</tr> 

     </aura:iteration> 

</tbody> 

</table>

• Click CONTROLLER in the right side bar of the code editor and add onSelectMenuItem function and save the file.

onSelectMenuItem : function(component, event, helper) { 

var selectedOption = event.getSource().get('v.value'); 

var selectedId = selectedOption.split('---')[0];

console.log('*************selectedId:'+selectedId);

component.set("v.selectedRecord",selectedId);

console.log('*************selectedOption:'+selectedOption); 

if (selectedOption.endsWith("View")) {

component.set("v.currentView","RecordView"); 

}else if(selectedOption.endsWith("Edit")){

component.set("v.currentView","RecordEdit"); 

} 

}

• Update LDSAccountListView lightning Component. Now we are going to display LDSAccountView and LDSAccountEdit components based selection made by user on menu item. Add below markup code in LDSAccountListView component after the section for account list views and save file.

<!--Section for Account record View starts--> 

<aura:if isTrue="{!v.currentView =='RecordView'}"> 

<c:LDSAccountView recordId="{!v.selectedRecord}" currView="{!v.currentView}"/> </aura:if> 

<!--Section for Account record View ends--> 

<!--Section for Account record edit starts--> 

<aura:if isTrue="{!v.currentView =='RecordEdit'}"> 

<c:LDSAccountEdit recordId="{!v.selectedRecord}" currView="{!v.currentView}" /> </aura:if> 

<!--Section for Account record edit ends-->

Update LDSAccountView & LDSAccountView lightning Component

• In LDSAccountEdit component, add action to lightning:button with label as "Back".

<lightning:button variant="brand" label="Back" onclick="{!c.goBackToListView}"/>

• Click CONTROLLER in the right side bar of the code editor and add goBackToListViewfunction and save the file.

goBackToListView : function(component,event,helper){

component.set("v.currView","ListView"); 

}

• Same way in LDSAccountView, update lightning:button with label as "Back" and add "goBackToListView" JavaScript function to controller.

Let see what we have done so far!!!

So now we are loading account view and edit page using Lightning Data Services. I think this will help you to understand basic concept of Lightning data services.

Below are list of items which can be implemented to for better User experience and for learning.

• You can add deletion of records using LDS.
• When you click on Save in account edit page, it should refresh the list view with latest changes. In this hands on training you have to refresh the browser to see latest values of account record.
• You can use "New Account" to create new account record using LDS.

Hope this will help in basic understanding of Lightning Data Services!!!.

Salesforce Lightning Events : Hands on Training Guide

In this blog, I am going to cover practice session to learn Salesforce Lightning Events concept. By end of this hands on training session, you will create an Lightning App which contains 2 different components and interacts between them by using Lightning events.

So lets get started.

Before starting this hands on training, set up you salesforce environment. Below are prerequisite for this session.

• Sign up for Developer edition ( https://developer.salesforce.com/gettingstarted ) if you don’t have.
• Enable My Domain in your org (Navigate to Set Up-My Domain).
• After registering My Domain, deploy it for all users.

Create a Lightning Application:

• In the Developer Console, choose File > New > Lightning Application.
• Specify “ApplicationEventDemoApp” as the app name and click submit.
• Specify below code in lightning app.

<aura:application extends="force:slds"> 

    <div class="slds-text-heading_large slds-text-align_center"> 

Application Event Demo App 

    </div> 

</aura:application>

• Save the file.
• Click  preview.

Upload Static Resource:

• Download zip file from below URL:
• LightningEventsResources -Static Resource Link
• Click on Setup > Static Resouce > New
• Specify name as “LightningEventsResources” and browse zip file.
• Specify “Public “ for Cache Control field and click on Save.

Create a IndependentHospital lightning Component

• In the Developer Console, choose File > New > Lightning Component.
• Specify “IndependentHospital” as the component name and click submit.
• Specify below code in lightning component.

<aura:component > 

   <div class="slds-align--absolute-center"> 

       <b>Hospital Component</b> 

   </div> 

</aura:component>

• Save the file.
• Add this component in “ApplicationEventDemoApp” Lightning App and click on save and preview.

<aura:application extends="force:slds"> 
    <div class="slds-text-heading_large slds-text-align_center"> 
Application Event Demo App 
    </div> 
    <c:IndependentHospital/> 
</aura:application>

Let see what we have done !!!

Update the IndependentHospital lightning Component with below code

• Update the IndependentHospital component with below code to add some action to send ambulance.

<aura:component >
    <aura:attribute name="msgFromNotifier" type="String" default=""/>
    <div class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <img src="{!$Resource.LightningEventsResources  + '/resources/hospitalImage.jpg'}" height="100" width="100"/>
                </div>
                <div class="slds-media__body">
                    <h2>
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" >
                            <span class="slds-text-heading_small">Hospital</span>
                        </a>
                    </h2>
                </div>
            </header>
            <div class="slds-no-flex">
                <lightning:button label="Reset" variant="brand" onclick="{!c.resetComponent}"/>
                <lightning:button label="Send Ambulance" variant="brand" onclick="{!c.sendAmbulanceMannually}"/>
            </div>
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <div class="{!if(v.msgFromNotifier == '', 'slds-show','slds-hide')}">
                <div class="slds-align--absolute-center">
                    <b>Waiting for instructions</b>
                </div>
                <div class="slds-align--absolute-center">
                    <img src="{!$Resource.LightningEventsResources  + '/resources/staticAmbulance.jpg'}" height="256" width="200"/>
                </div>
            </div>
           <div class="{!if(v.msgFromNotifier == '', 'slds-hide','slds-show')}">
                <div class="slds-align--absolute-center">
                    <b> Message from Notifier : {!v.msgFromNotifier}</b>
                </div>
                <div class="slds-align--absolute-center">
                    <img src="{!$Resource.LightningEventsResources  + '/resources/animatedAmbulance.gif'}"/>
                    <audio  controls="controls" aura:id="audioclip" class="slds-hide"/>
                </div>
            </div>
        </div>
        <footer class="slds-card__footer">@sunil02kumar</footer>
    </div>
    
</aura:component>

• Click HELPER in the right side bar of the code editor and replace code with below code and save the file.

({ 

     PlayAmbulanceSiren : function(component) { 

var rUrl = $A.get('$Resource.LightningEventsResources'); rUrl = rUrl + '/resources/ambulanceSiren.mp3'; 

console.log(rUrl); 

var domElement = component.find("audioclip").getElement(); domElement.src=rUrl; 

domElement.play(); 

      } 

})

• Click CONTROLLER in the right side bar of the code editor and replace code with below code and save the file.

({

    sendAmbulanceMannually: function(component, event, helper) {

        component.set("v.msgFromNotifier", "sending ambulance mannually");

        helper.PlayAmbulanceSiren(component);

    },

    resetComponent :function(component, event,helper){

        component.set("v.msgFromNotifier", "");

    }

})

Create a IndependentCarAccidentNotifier lightning Component

• In the Developer Console, choose File > New > Lightning Component.
• Specify “IndependentCarAccidentNotifier” as the component name and click submit.
• Specify below code in lightning component and save file.

<aura:component >
    <div class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__body">
                    <h2>
       <a href="javascript:void(0);" ><span class="slds-text-heading_small">Car Accident Notifier </span> <a>
                    </h2>
                </div>
            </header>
            <div class="slds-no-flex">
                <lightning:button label="Send Notification via App Events " variant="brand"/>
            </div>
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <div class="slds-align--absolute-center">
                <img src="{!$Resource.LightningEventsResources  + '/resources/accident.jpg'}" height="256" width="200"/>
            </div>
        </div>
        <footer class="slds-card__footer">@sunil02kumar</footer>
    </div>
</aura:component>



Modify Lightning Application

• Modify the in “ApplicationEventDemoApp” Lightning App code and click on save and preview.

<aura:applicationextends="force:slds">
<div class="slds-text-heading_largeslds-text-align_center">
Application Event Demo App
</div>
<c:IndependentHospital/>
<c:IndependentCarAccidentNotifier/>
</aura:application>

Lets see what we have done!!

Create a carAccidentAppEvent lightning Event

• In the Developer Console, choose File > New > Lightning Event.
• Specify “carAccidentAppEvent” as the event name and click submit.
• Specify below code in lightning event and save file.

<aura:event type="APPLICATION" description="Event template" >

<aura:attribute name="msg" type="String" access="GLOBAL"/> 

</aura:event>

Register for event in IndependentCarAccidentNotifier Component

• Register for event in IndependentCarAccidentNotifier Component

<aura:registerEvent name="carAccidentAppEvent" type="c:carAccidentAppEvent"/>

• Click CONTROLLER in the right side bar of the code editor and replace code with below code and save the file.

({

    fireCarAccidentAppEvent : function(component, event, helper) {                                                   console.log('fireCarAccidentAppEvent is called');

//syntax for app event

var appEvent = $A.get("e.c:carAccidentAppEvent");

appEvent.setParams({"msg":"Car Accident Notification through Application event. Sending ambulance!!!."});

appEvent.fire();

    }

})

• Call this javascript function on button click.

<lightning:button label="Send Notification via App Events " variant="brand" onclick="{!c.fireCarAccidentAppEvent}"/>

Handle Event in IndependentHospital Component

• Write Event handler in hospital component. Add below code in IndependentHospital component.

<aura:handler event="c:carAccidentAppEvent" action="{!c.handleNotification}"/>

• Create an attribute to store msg send by event.

<aura:attribute name="msgFromNotifier" type="String" default=""/>

• Click CONTROLLER in the right side bar of the code editor and replace code with below code and save the file.

handleNotification : function(component, event, helper){ 

console.log('handleNotification is called'); 

var sentMessage= event.getParam("msg"); 

console.log('******sentMessage by app event:'+sentMessage);

component.set("v.msgFromNotifier", sentMessage);

helper.PlayAmbulanceSiren(component); 

}

Lets see what we have done!!!

Now preview the Lightning app and click on "Send notification vai App Events" button which will trigger ambulance in independentHospital component.

So after completing this, you will understand the concept of communication between 2 different components by using application events.

Hope this will help!!!

Application Events vs Component Events : Which/How to use for handling custom events in Lightning

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events can be fired or handled by javascript controller. Event are triggered by user action.

As we know that along with system events, there are 2 types of custom lightning events:

• Application Events
• Component Events

Here I am going to explain difference between them along with code sample.

Component Events 

1. Components events can be handled by same component or component which is present in containment hierarchy (component that instantiates or contain component).
2. Below is syntax for creating component event.
   
    <aura:event type="COMPONENT" description="Event template" >                                          <aura:attribute name="msg" type="String" access="GLOBAL"/>                                               </aura:event>
   
   
3. Below is syntax for firing component events from javascript controller.
   
   var accidentEvent = component.getEvent("newCarAccident"); accidentEvent.setParams({"msg":"New Message!!!."});                               accidentEvent.fire();
   
   
4. While handling component events, we need to specify name attribute in  <aura:handler>
   
   <aura:handler action="{!c.handleNotification}" event="c:carAccidentComponentEvent" name="newCarAccident">
   
   Make sure that name attribute is same as that of name attribute while registering the event.
   
   

Application Events

1. This kind of events can be handled by any component which is listening to it (have handler defined for event). It is kind of publish-subscribe modal.
2. Below is syntax of creating application event.
   
   <aura:event type="APPLICATION" description="Event template" >                                                     <aura:attribute name="msg" type="String" access="GLOBAL"/>                           </aura:event>
   
   
   
3. Below is syntax to file application events from javascript controller.
   
   var appEvent = $A.get("e.c:carAccidentAppEvent");               appEvent.setParams({"msg":"New Message!!!."});                                               appEvent.fire();
   
   
4. While handling application events, no need to specify name attribute in <aura:handler>
   
   <aura:handler event="c:carAccidentAppEvent" action="{!c.handleNotification}"/>

System Events

1. These events are fired automatically by the framework such as during component initialization, attribute value change, rendering etc. All Components can register for system events in their HTML markup.
2. Few examples of system events are init, aura:waiting, aura:doneWaiting, aura:doneRendering etc.
3. If app or component is rerendered, then init event is fired. If server side call is made in init then, aura:waiting event is fired. Once the server call is finished then aura:doneWaiting event is fired. After this aura:doneRendering is fired.

Events Best Practices:

1. Always try to use component events. Component event usage is more localized as these can be used by same component or component in containment hierarchy.
2. If you use application events then it may fire system events.
3. Use Application events only if components are present in 2 different app or are not in containment hierarchy.

I have created GitHub project which contains example demo for Application events and Component Events. You can download complete code from below URL:

Sample code for Application Events and Component Events

Hope this help!!!

More Blogs>>: 

LIGHTNING COMPONENT TO DISPLAY SETUP AUDIT TRAIL DATA    
AURA:IF vs SLDS-SHOW/HIDE    
INHERITANCE IN LIGHTNING    
FIRING EVENT FROM LIGHTNING COMPONENT AND PASSING IT TO VF PAGE    
CHANGES TO LIGHTNING DATA SERVICE IN SUMMER'17    
LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE    

Journey from Salesforce Classic Development to Salesforce Lightning Development

Today I got chance to speak in Pune Salesforce Developer Meet up about me journey from Salesforce Classic Development (using VF pages and VF Components) to Salesforce Lightning components.

After explaining the Salesforce transition from Classic development to Salesforce Lightning framework, I covered Salesforce Lightning custom events followed by very simple Demo.

Through this blog, I am going to share the presentation which i delivered today. This presentation also contains Git hub Repository URL which contains all code which was presented in Demo.

Journey from classic Salesforce development to lightning Developmemt from Sunil kumar

GITHUB URL for source code:
Lightning Events Demo App

Looking forward for everyone's comments and suggestions!!!

More Blogs>>: 

LIGHTNING COMPONENT TO DISPLAY SETUP AUDIT TRAIL DATA    
AURA:IF vs SLDS-SHOW/HIDE    
INHERITANCE IN LIGHTNING    
FIRING EVENT FROM LIGHTNING COMPONENT AND PASSING IT TO VF PAGE    
CHANGES TO LIGHTNING DATA SERVICE IN SUMMER'17    
LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE