Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Salesforce World Tour 2016 : Lightning Out : Components on any Platform


Published on

Introduction to Lightning Components and Lighting Out. Worked example using Google App Script.

Published in: Software
  • Be the first to comment

Salesforce World Tour 2016 : Lightning Out : Components on any Platform

  1. 1. Lightning Out: Components on Any Platform London | May 19, 2016
  2. 2. Speaker Andrew Fawcett CTO, FinancialForce Salesforce MVP, Certified Developer and Advanced Developer @andyinthecloud
  3. 3. Agenda ▪ Components, Containers and Events ▪ Address Finder Components ▪ Components in Lightning Experience! *NEW* ▪ Components on Any Platform aka “Lightning Out” *NEW* ▪ Components in Google App Add-ons ▪ Google App Script Tips and Tricks ▪ Resources and Q&A
  4. 4. Component Container - Loads Components - Ask each Component render - Manages Events Lightning Components Overview Component - Renders - Attributes - Methods - Events
  5. 5. ▪ Application vs Component Events ▪ Component events within containment hierarchy Lightning Components Publish and Subscribe Component B - Handles event Component C - Handles event Event - MyAppEvent MyAppEvent Component A - Registers the event - Fires event
  6. 6. Address Finder in Lightning Experience Separation of Concerns between searching and how addresses are displayed AddressInfo Event AddressFinder.cmp Address.cmp
  7. 7. Demo Customising Lightning Experience with Lightning Components
  8. 8. Enabling for Lightning App Builder and Pages General steps to enable for Lightning App Builder and Pages. ● Enable My Domain in Your Org ● Add a New Interface/s to Your Component ● Add a Design Resource to Your Component Bundle ● Optional: Add an SVG Resource to Your Component Bundle More information can be found in the documentation.
  9. 9. Lightning Out, Components on Any Platform
  10. 10. Lightning Out Requirements ▪ Lightning Components should be GLOBAL ▪ Lightning “Dependency” App – Only top level components you intend to use ▪ Container Page supports <SCRIPT> import – Import lightning.out.js library into the page ▪ Authentication is handled by the “container” or you! – Session ID is available (e.g Visualforce page,) – Or implements oAuth
  11. 11. Lightning Out: Components on Any Platform
  12. 12. What about Google App Add-ons?
  13. 13. Demo Integrating Lightning Components in Google Documents via Google App Add-ons
  14. 14. Address Finder in Google Documents Separation of Concerns means that the Address Finder component knows nothing of how the AddressInfo event will be handled. In this case by some Google App Script! AddressFinder.cmp AddressInfo Event
  15. 15. What just happened? ComponentA <html> <body> <div id=”mycontainer”> </div> <script src=”./lightning.out.js”> </script> <script> $Lightning.use( “LightningOutApp” ... “ComponetA”... “mycontainer”); </script> </div> ... https://* LightingOutApp ComponentB ComponentChild 1 2 CORS 3Component A 4
  16. 16. CORS, Cross-Origin Resource Sharing? Resources /some/api/resource - GET, POST, UPDATE, PATCH ... https://* <script> XMLHttpRequest….. send(...) </script>
  17. 17. Exposing your Components Lightning Out Note: Inclusion of SLDS css file in Lightning “Dependency” App. Must be absolute path.
  18. 18. Using the Lightning Out JavaScript API Note: Notice the class=”slds” being applied to the containing <div> element. Currently styles defined by the container are not imported by Lightning Out. Hence must be explicitly imported via the Lightning “Dependency” App.
  19. 19. Using the Lightning Out JavaScript API
  20. 20. Google App Script and Lightning Out ▪ oAuth is supported, but the user experience is not great – See
  21. 21. Google App Script Document API’s ▪ Rich API’s for working with document content
  22. 22. ▪ Rich UI’s in HTML pose a challenge to traditional accessibility tools ▪ Accessible Rich Internet Applications (Aria) – Research it and find out more at ▪ Lightning Design System Examples adopting Aria! Global Accessibility Awareness Day
  23. 23. Resources and Q&A ▪ Source Code in GitHub Stash – ▪ Lightning Components Developer Guide – ▪ Quickstart: Add-on for Google Docs – ▪ Google App Script oAuth2 Library – ▪ My Twitter and Blog