salesforce world tour 2016 : lightning out : components on any platform
TRANSCRIPT
Lightning Out: Components on Any PlatformLondon | May 19, 2016
Speaker
Andrew FawcettCTO, FinancialForce
Salesforce MVP, Certified Developer and Advanced Developer
@andyinthecloudandyinthecloud.com
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
Component Container- Loads Components- Ask each Component render- Manages Events
Lightning Components Overview
Component- Renders- Attributes- Methods- Events
▪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
Address Finder in Lightning Experience
Separation of Concerns between searching and how addresses are displayed
AddressInfo Event
AddressFinder.cmp
Address.cmp
DemoCustomising Lightning Experience
with Lightning Components
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.
Lightning Out, Components on Any Platform
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
Lightning Out: Components on Any Platform
What about Google App Add-ons?
DemoIntegrating Lightning Components
in Google Documents via Google App Add-ons
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
What just happened?
ComponentA
https://mydomain.lightning.force.com/lightning
<html><body><div id=”mycontainer”>
</div><script src=”./lightning.out.js”></script><script>$Lightning.use( “LightningOutApp” ... “ComponetA”... “mycontainer”);</script></div>...
https://*.googleusercontent.com
LightingOutApp
ComponentB
ComponentChild
1
2CORS
3Component A
4
CORS, Cross-Origin Resource Sharing?
https://...lightning.force.com
Resources /some/api/resource - GET, POST, UPDATE, PATCH ...
https://*.googleusercontent.com
<script>XMLHttpRequest….. send(...)</script>
Exposing your Components Lightning Out
Note: Inclusion of SLDS css file in Lightning “Dependency” App. Must be absolute path.
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.
Using the Lightning Out JavaScript API
Disclosure: $A.eventService is not presently documented. Follow source code link for an update on this code following this presentation.. Callback approach?
Google App Script and Lightning Out
▪oAuth is supported, but the user experience is not great
– See https://github.com/googlesamples/apps-script-oauth2
Google App Script Document API’s
▪Rich API’s for working with document content
▪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
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/l
ightning▪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– @andyinthecloud http://andyinthecloud.com
