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.
”
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
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
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>
<aura:application extends="force:slds">
<div class="slds-text-heading_large slds-text-align_center">
Application Event Demo App
</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">
<!-- CODE TO DISPLAY AMBULANCE ACTIONS..COPY CODE FROM NEXT SLIDE -->
</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')}">
<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" />
</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">
<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>
Create a IndependentCarAccidentNotifier lightning Component
Modify Lightning Application14
▹ Modify the in “ApplicationEventDemoApp” Lightning App code 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/>
<c:IndependentCarAccidentNotifier/>
</aura:application>
Lets see what we have done!!!15
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);
}
Lets see what we have done!!!19
20
THANKS!Any questions?You can find me at▹ @sunil02kumar▹ [email protected]