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.

Lightning Components Workshop

665 views

Published on

Slides for the hands on lightning component workshop that is accompanying the trailhead found https://developer.salesforce.com/trailhead/project/account-geolocation-app

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Lightning Components Workshop

  1. 1. Getting Started with Lightning Components Workshop
  2. 2. SSID: HANDSON_WORKSHOP pass: devzone_how Wifi Info
  3. 3. Unit 1: Setting Up Your Environment
  4. 4. 1. Sign up for a developer edition 2. Enable Lightning Components (required in pre-winter 16 orgs only) 3. Open a browser tab to the Trailhead project https://developer.salesforce.com/trailhead/project/account-geolocation-app Lab
  5. 5. Unit 2: Adding Location to Accounts
  6. 6. 1. Add a geolocation field to the Account object 2. Enter sample data Lab
  7. 7. Unit 3: Creating the AccountController Apex Class
  8. 8. 1. User requests a page 2. The server executes the page’s underlying, and sends the resulting page (HTML+data) back to the browser 3. The browser displays the HTML 4. Show different data? Back to 1 5. Show different view? Back to 1 Workflow Visualforce Page Centric Model
  9. 9. Pros • Proven model • Productivity. Easy to implement • Naturally splits large apps into small, manageable units (pages) Caveats • Limited interactivity • Higher latency Visualforce Page Centric Model
  10. 10. 1. The user requests a Lightning Component 2. Server returns component bundle to browser 3. JavaScript generates the UI 4. Component makes request for data (data only) [this unit] 5. Server returns data 6. Show different data? Back to 4 7. Show different view? Back to 3 Lightning Components App Centric Model
  11. 11. Pros • Enables highly interactive/immersive user experiences • Less page refreshes • Tightly integrated (no iframe) Caveats • Higher learning curve compared to vanilla Visualforce pages • Higher level of complexity. Building an app is generally more complex than building a page. Lightning Components App Centric Model
  12. 12. Lightning Components vs Aura Aura Lightning Components • Open Source framework (http://documentation.auraframework.org) • Vendor agnostic • Built on top of Aura • Salesforce-specific extensions
  13. 13. Use @AuraEnabled annotation to make methods available to Lightning Components (conceptually similar to JavaScript remoting) public with sharing class AccountController { @AuraEnabled public static List<Account> findAll() { return [SELECT id, name FROM Account]; } } Creating an Aura-Enabled Apex Controller
  14. 14. • Create an Aura-enabled Apex controller named AccountController • Add a findAll() method that returns accounts that have location information Lab
  15. 15. Unit 4: Creating the AccountLocator Component
  16. 16. <aura:component controller="AccountController"> <div> <div>AccountMap goes here</div> <div>AccountList goes here</div> </div> </aura:component> Anatomy of a Lightning Component
  17. 17. • Component HTML, nested Lightning Components, and Lightning tags (attribute, iteration, etc.) • Controller JavaScript: Event Handlers • Helper JavaScript: Shared code within the component • Style CSS: Encapsulated CSS styles • Design Component description for use in App Builder Lightning Component Parts
  18. 18. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS {} The root tag Styles: How to target these elements?
  19. 19. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS>div {} Any div that is an immediate child of .THIS (the root tag) Styles: How to target these elements?
  20. 20. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS div {} Any div within .THIS (the root tag) Styles: How to target these elements?
  21. 21. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS>div>ul {} ul that is immediate child of a div that is immediate child of .THIS .THIS ul {} ul anywhere within .THIS .THIS>div ul {} ul anywhere within a div that is immediate child of .THIS .THIS div ul {} ul anywhere within a div that's anywhere within .THIS Styles: How to target these elements?
  22. 22. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS>div>ul>li.selected {} li with "selected" class and that is immediate child of a ul that is immediate child of a div that is immediate child of .THIS (root tag) .THIS ul>li.selected {} li with "selected" class and that is immediate child a ul that is anywhere within .THIS .THIS li.selected {} li with "selected" class anywhere within .THIS .THIS .selected {} Any element with "selected" class anywhere within .THIS Styles: How to target these elements?
  23. 23. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS .disabled {} Any element with the "disabled" class within .THIS (the root tag) Styles: How to target these elements?
  24. 24. 1. In the Salesforce1 app 2. In App Builder 3. In Lightning Applications Where can I use Lightning Components?
  25. 25. 1. Implement the force:appHostable interface <aura:component implements="force:appHostable"> 2. Create a Tab 3. Add the Tab to Mobile Navigation Using a Lightning Component in the Salesforce1 App
  26. 26. 1. Implement the flexipage:availableForAllPageTypes interface <aura:component implements="flexipage:availableForAllPageTypes"> 2. Create a component description in the Design part <design:component label="AccountList"> </design:component> 3. Drag the component from the component palette in App Builder Using a Lightning Component in App Builder
  27. 27. 1. Create a Lightning App File > New > Lightning Application 2. Embed the Lightning Component <aura:application > <c:AccountLocator /> </aura:application> Useful for creating fullscreen apps or for testing Lightning components during development Using a Lightning Component in a Lightning App
  28. 28. • Create the AccountLocator component • Add AccountLocator to the Salesforce1 App menu Lab
  29. 29. Unit 5: Creating the AccountList Component
  30. 30. • The data of the component • Available anywhere in the component • Examples: <aura:attribute name="price" type="Number"/> <aura:attribute name="title" type="String"/> <aura:attribute name="account" type="Account"/> <aura:attribute name="accounts" type="Account[]"/> Attributes
  31. 31. • {! } notation <aura:attribute name="account" type="Account"/> <li><a>{!v.account.Name}</a></li> • Bidirectional in ui: components <aura:attribute name="price" type="Number"/> <ui:inputNumber label="Principal:" value="{!v.price}" format="#"/> -> price attribute value is updated automatically when user types in input field Data Binding
  32. 32. • Getting the value of an attribute: var price = component.get("v.price"); • Setting the value of an attribute: component.set("v.price", price); Manipulating Attributes in JavaScript
  33. 33. • Component <aura:attribute name="counter" type="Number" default="0"/> <ui:button label="Click me" press="{!c.handleClick}"/> <div>{!v.counter}</div> • Controller ({ handleClick: function(component, event) { var counter = component.get("v.counter"); counter = counter + 1; component.set("v.counter", counter); } }) Example: Display how many times a button was clicked Event Handlers
  34. 34. • Component <aura:attribute name="accounts" type="Accounts[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> • Controller ({ doInit : function(component, event) { var action = component.get("c.findAll"); action.setCallback(this, function(a) { component.set("v.accounts", a.getReturnValue()); }); $A.enqueueAction(action); } }) Example: Retrieve data when component is initialized Event Handlers
  35. 35. <aura:attribute name="accounts" type="Account[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <ul> <aura:iteration items="{!v.accounts}" var="account"> <li>{!account.Name}</li> </aura:iteration> </ul> Iterating through a List
  36. 36. <aura:attribute name="accounts" type="Account[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:iteration items="{!v.accounts}" var="account"> <c:AccountListItem account="{!account}"/> </aura:iteration> Using a Nested Component Iterating through a List
  37. 37. <aura:component> <aura:attribute name="account" type="Account"/> <li>{!v.account.Name}</li> </aura:component> AccountListItem
  38. 38. • Create the AccountList component responsible for displaying the list of accounts • Create the AccountListItem component that you nest inside AccountList to render individual accounts in the list Lab
  39. 39. Unit 6: Creating the AccountMap Component
  40. 40. • External JavaScript libraries and CSS style sheets must be loaded as static resources • Use the <ltng:require> tag to load them • Loading is asynchronous • afterScriptLoaded event is triggered after files have been succesfully loaded Loading External JavaScript Libraries and CSS Files
  41. 41. <ltng:require scripts="/resource/leaflet/leaflet.js"/> Loading External JavaScript Libraries
  42. 42. <ltng:require styles="/resource/leaflet/leaflet.css" /> Loading External CSS Style Sheets
  43. 43. <ltng:require scripts="/resource/leaflet/leaflet.js" styles="/resource/leaflet/leaflet.css" /> Loading JavaScript Libraries and CSS Style Sheets
  44. 44. <ltng:require scripts="/resource/leaflet/leaflet.js" styles="/resource/leaflet/leaflet.css" afterScriptsLoaded="{!c.renderMap}" /> Using the afterScriptLoaded Event
  45. 45. • Load leaflet JS library • Load Leaflet CSS • Render the map when files are loaded Lab
  46. 46. Unit 7: Using Events to add Markers to the Map
  47. 47. Flow • AccountMap can't show markers until AccountList has loaded accounts from the server • When AccountList has successfully loaded the accounts from the server, it fires a custom event named AccountLoaded providing the list of accounts as an event attribute • AccountMap registers as a listener for that event • When AccountMap gets the event, it adds the makers on the map Benefits of event-based communication: • Components don't know about each other (they don't have references to each other) • Components are more reusable Communicating with Events
  48. 48. <aura:event type="APPLICATION"> <aura:attribute name="accounts" Type="Account[]"/> </aura:event> Creating the AccountsLoaded Event
  49. 49. var event = $A.get("e.c:AccountsLoaded"); event.setParams({"accounts": accounts}); event.fire(); Firing the Event in AccountList
  50. 50. • Component <aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/> • Controller accountsLoaded: function(component, event, helper) { // add markers using Map api } Handling the Event in AccountMap
  51. 51. • Create the AccountsLoaded Event • Trigger the AccountsLoaded Event in AccountList • Handle the AccountsLoaded Event in AccountMap Lab
  52. 52. Unit 8: Using Events to Center the Map
  53. 53. • Create the AccountSelected event • Trigger the AccountSelected event in AccountList • Handle the AccountSelected event in AccountMap and center the map on the selected account location Lab
  54. 54. Unit 9: Interacting with the Salesforce1 App
  55. 55. • Lightning Components enable you to extend standard features • Don't reinvent the wheel For example, if your component needs an account details view: use the standard one, don't create your own • Navigation between standard features and custom components should be smooth and feel integrated: users shouldn't notice they are switching between standard and custom features • Platform events allow you to integrate your custom components into the standard experience Salesforce1 Integration
  56. 56. var event = $A.get("e.force:navigateToSObject"); event.setParams({ "recordId": accountId }); event.fire(); This event will be handled be the Salesforce1 app which will then navigate to the account's details view Firing a Platform Event
  57. 57. Share Your Feedback, and Win a GoPro! 3 Earn a GoPro prize entry for each completed survey Tap the bell to take a survey2Enroll in a session1
  58. 58. Before you leave, get your Quest stamp! Attending this workshop earns you 1 hands-on activity stamp towards your DevZone Quest! Come up to the speaker podium at the end to stamp your Quest guide. Then go collect 3 more stamps to earn your Quest prize pack!
  59. 59. When a user clicks a marker on the map, load the default Salesforce1 details view for the selected account Lab

×