Salesforce Lightning Events - Hands on Training

1 About Myself!

I am Sunil Kumar

7x Salesforce Certified | Developer | Blogger

Twitter : @sunil02kumar

Blog: https://sunil02kumar.blogspot.in

Facebook Page : SalesforceArticles

I am here for Hands on training session on

Salesforce custom lightning events. I think it

is the best way to interact & learn.

https://sunil02kumar.blogspot.in/

”

Practice is the hardest part of learning, and training is the essence

of transformation.

2

Agenda

▹ Setting up Salesforce environmement for Hands on Training.

▹ Salesforce Lightning events Overview

▹ Creating a Application Event demo App (Sending Ambulance after firing event)

▹ Q&A

3

Setting up Salesforce environmement for Hands on Training.

▹ Sign up for Developer edition if you don’t have by referring below URL:

https://developer.salesforce.com/gettingstarted

▹ Enable My Domain in your org (Navigate to Set Up-My Domain).

▹ After registering My Domain, deploy it for all users.

4

https://developer.salesforce.com/gettingstarted

Salesforce Lightning Events Overview5

Hospital NotifierEvent

(msg)

Perform Action

after handling

notification and

send ambulance

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.

▹ Save the file.▹ Click preview.

6

Place your screenshot here

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

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

Application Event Demo App

</div>

</aura:application>

Upload Static Resource

▹ Download zip file from below URL:

https://goo.gl/U8nfnq

▹ Click on Setup > Static Resouce > New

▹ Specify name as “LightningEventsResources” and browse zip file.

▹ Specify “Public “ for Cache Control field and click on Save.

▹ You can use below blog to follow on steps for this hands on training.

https://goo.gl/WyRWny

▹ GitHub Repository URL for complete code for Hands on Training

https://goo.gl/yoM7nE

7

https://goo.gl/U8nfnq

https://goo.gl/WyRWny

https://goo.gl/yoM7nE

Create a IndependentHospital lightning Component8

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

▹ Save the file.▹ Add this component in “ApplicationEventDemoApp” Lightning App and

click on save and preview.

Place your screenshot here

<aura:component >

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

<b>Hospital Component</b>

</div>

</aura:component>




</div>

<c:IndependentHospital/>

</aura:application>

9

<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>

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

</div>

</aura:component>

Mark up for IndependentHospital lightning Component

10

▹ Update the code inside <div class="slds-card__body slds-card__body_inner">....</div> with below code

▹ Save the file

Mark up for IndependentHospital lightning Component

<div class="{!if(v.msgFromNotifier == '', 'slds-show','slds-hide')}">


<b>Waiting for instructions</b>

</div>


<img src="{!$Resource.LightningEventsResources + '/resources/staticAmbulance.jpg'}" height="256" width="200"/>

</div>

</div>

<div class="{!if(v.msgFromNotifier == '', 'slds-hide','slds-show')}">


<b> Message from Notifier : {!v.msgFromNotifier}</b>

</div>


<img src="{!$Resource.LightningEventsResources + '/resources/animatedAmbulance.gif'}"/>

<audio controls="controls" aura:id="audioclip" />

</div>

</div>

11

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

▹ 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", "");

}

})

({

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();

}

})

Create a IndependentHospital lightning Component

Lets see what we have done!!!12

13

▹ 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">


<img src="{!$Resource.LightningEventsResources + '/resources/accident.jpg'}" height="256" width="200"/>

</div>

</div>

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

</div>

</aura:component>

Create a IndependentCarAccidentNotifier lightning Component

Modify Lightning Application14

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




</div>

<c:IndependentHospital/>

<c:IndependentCarAccidentNotifier/>

</aura:application>

16

▹ 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.

Create a carAccidentAppEvent lightning Event

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

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

</aura:event>

17

▹ Register for event. Add below code in IndependentCarAccidentNotifier component.

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

▹ Call this javascript function on button click.

Register for event in IndependentCarAccidentNotifierComponent

({

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();

}

})

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

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

18

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

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

Handle Event in IndependentHospital Component

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

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);

}

20

THANKS!Any questions?You can find me at▹ @sunil02kumar▹ [email protected]

Salesforce Lightning Events - Hands on Training

Engineering

Transcript of Salesforce Lightning Events - Hands on Training