Salesforce World Tour 2016 : Lightning Out : Components on any Platform
•Als PPTX, PDF herunterladen•
3 gefällt mir•2,187 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie Salesforce World Tour 2016 : Lightning Out : Components on any Platform
Ähnlich wie Salesforce World Tour 2016 : Lightning Out : Components on any Platform (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Salesforce World Tour 2016 : Lightning Out : Components on any Platform
- 1. Lightning Out: Components on Any Platform London | May 19, 2016
- 2. Speaker Andrew Fawcett CTO, FinancialForce Salesforce MVP, Certified Developer and Advanced Developer @andyinthecloud andyinthecloud.com
- 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. Component Container - Loads Components - Ask each Component render - Manages Events Lightning Components Overview Component - Renders - Attributes - Methods - Events
- 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
- 7. Demo Customising Lightning Experience with Lightning Components
- 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. Lightning Out, Components on Any Platform
- 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. Lightning Out: Components on Any Platform
- 12. What about Google App Add-ons?
- 13. Demo Integrating Lightning Components in Google Documents via Google App Add-ons
- 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. 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 2 CORS 3Component A 4
- 16. CORS, Cross-Origin Resource Sharing? https://...lightning.force.com Resources /some/api/resource - GET, POST, UPDATE, PATCH ... https://*.googleusercontent.com <script> XMLHttpRequest….. send(...) </script>
- 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.
- 19. Using the Lightning Out JavaScript API
- 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
Hinweis der Redaktion
- - 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!