Salesforce Lightning Events - Hands on Training

download Salesforce Lightning Events - Hands on Training

of 20

Embed Size (px)

Transcript of Salesforce Lightning Events - Hands on Training

  1. 1. 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.
  2. 2. Practice is the hardest part of learning, and training is the essence of transformation. 2
  3. 3. 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
  4. 4. Setting up Salesforce environmement for Hands on Training. Sign up for Developer edition if you dont 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
  5. 5. Salesforce Lightning Events Overview 5 Hospital NotifierEvent (msg) Perform Action after handling notification and send ambulance
  6. 6. 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
    Application Event Demo App
  7. 7. 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
  8. 8. 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
    Hospital Component
    Application Event Demo App
  9. 9. 9
    Hospital
    @sunil02kumar
    Mark up for IndependentHospital lightning Component
  10. 10. 10 Update the code inside
    ....
    with below code Save the file Mark up for IndependentHospital lightning Component
    Waiting for instructions
    Message from Notifier : {!v.msgFromNotifier}
  11. 11. 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
  12. 12. Lets see what we have done!!!12
  13. 13. 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.
    Car Accident Notifier
    @sunil02kumar
    Create a IndependentCarAccidentNotifier lightning Component
  14. 14. Modify Lightning Application14 Modify the in ApplicationEventDemoApp Lightning App code and click on save and preview.
    Application Event Demo App
  15. 15. Lets see what we have done!!!15
  16. 16. 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
  17. 17. 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 IndependentCarAccidentNotifier Component ({ 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(); } })
  18. 18. 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 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); }
  19. 19. Lets see what we have done!!!19
  20. 20. 20 THANKS! Any questions? You can find me at @sunil02kumar sunil02kumar@gmail.com