This document summarizes a presentation about using Lightning components on any platform. It discusses how Lightning components work, how to enable them in Lightning Experience and the Lightning App Builder. It also introduces Lightning Out, which allows components to be used outside of Lightning Experience, such as in Google Docs using Google App Scripts. Requirements for Lightning Out include making components global and using a Lightning dependency app. The document provides demos of integrating Lightning components into Google Docs to search for addresses.
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
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. Address Finder in Lightning Experience
Separation of Concerns between searching
and how addresses are displayed
AddressInfo Event
AddressFinder.cmp
Address.cmp
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.
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
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
17. Exposing your Components Lightning Out
Note: Inclusion of SLDS
css file in Lightning
“Dependency” App.
Must be absolute path.
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.
20. Google App Script and Lightning Out
▪ oAuth is supported, but the user experience is not great
– See https://github.com/googlesamples/apps-script-oauth2
21. Google App Script Document API’s
▪ Rich API’s for working with
document content
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
https://www.w3.org/WAI/intro/aria.php
▪ Lightning Design System
Examples adopting Aria!
Global Accessibility Awareness Day
23. Resources and Q&A
▪ Source Code in GitHub Stash
– https://gist.github.com/afawcett/6a38c589e3ae18ad2d16d4ee98e00b17
▪ Lightning Components Developer Guide
– https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning
▪ Quickstart: Add-on for Google Docs
– https://developers.google.com/apps-script/quickstart/docs#set_it_up
▪ Google App Script oAuth2 Library
– https://github.com/googlesamples/apps-script-oauth2
▪ My Twitter and Blog
Notas del editor
- Customise the Home page
- Put a more than one Address component on the page
- Illustrate how the LC components HTML and JavaScript was injected into the host page, no IFRAME!