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.
Getting Started with
Lightning Components
Workshop
Unit 1:
Setting Up Your Environment
1. Sign up for a developer edition
2. Enable Lightning Components (required in pre-winter 16 orgs only)
Lab
Unit 2:
Adding Location to Accounts
1. Add a geolocation field to the Account object
2. Enter sample data
Lab
Unit 3:
Creating the AccountController Apex Class
1. User requests a page
2. The server executes the page’s underlying, and sends the resulting page (HTML+data) back to
the...
Pros
• Proven model
• Productivity. Easy to implement
• Naturally splits large apps into small, manageable units (pages)
C...
1. The user requests a Lightning Component
2. Server returns component bundle to browser
3. JavaScript generates the UI
4....
Pros
• Enables highly interactive/immersive user experiences
• Less page refreshes
• Tightly integrated (no iframe)
Caveat...
Lightning Components vs Aura
Aura
Lightning Components
• Open Source framework (http://documentation.auraframework.org)
• ...
Use @AuraEnabled annotation to make methods available to Lightning Components (conceptually
similar to JavaScript remoting...
• Create an Aura-enabled Apex controller named AccountController
• Add a findAll() method that returns accounts that have ...
Unit 4:
Creating the AccountLocator Component
<aura:component controller="AccountController">
<div>
<div>AccountMap goes here</div>
<div>AccountList goes here</div>
</d...
• Component
HTML, nested Lightning Components, and Lightning tags (attribute, iteration, etc.)
• Controller
JavaScript: Ev...
<aura:component>
<div>
<div class="disabled"></div>
<div>
<div></div>
<ul>
<li class="selected">item 1</li>
<li class="dis...
<aura:component>
<div>
<div class="disabled"></div>
<div>
<div></div>
<ul>
<li class="selected">item 1</li>
<li class="dis...
<aura:component>
<div>
<div class="disabled"></div>
<div>
<div></div>
<ul>
<li class="selected">item 1</li>
<li class="dis...
<aura:component>
<div>
<div class="disabled"></div>
<div>
<div></div>
<ul>
<li class="selected">item 1</li>
<li class="dis...
<aura:component>
<div>
<div class="disabled"></div>
<div>
<div></div>
<ul>
<li class="selected">item 1</li>
<li class="dis...
<aura:component>
<div>
<div class="disabled"></div>
<div>
<div></div>
<ul>
<li class="selected">item 1</li>
<li class="dis...
1. In the Salesforce1 app
2. In App Builder
3. In Lightning Applications
Where can I use Lightning Components?
1. Implement the force:appHostable interface
<aura:component implements="force:appHostable">
2. Create a Tab
3. Add the Ta...
1. Implement the flexipage:availableForAllPageTypes interface
<aura:component implements="flexipage:availableForAllPageTyp...
1. Create a Lightning App
File > New > Lightning Application
2. Embed the Lightning Component
<aura:application >
<c:Accou...
• Create the AccountLocator component
• Add AccountLocator to the Salesforce1 App menu
Lab
Unit 5:
Creating the AccountList Component
• The data of the component
• Available anywhere in the component
• Examples:
<aura:attribute name="price" type="Number"/>...
• {! } notation
<aura:attribute name="account" type="Account"/>
<li><a>{!v.account.Name}</a></li>
• Bidirectional in ui: c...
• Getting the value of an attribute:
var price = component.get("v.price");
• Setting the value of an attribute:
component....
• Component
<aura:attribute name="counter" type="Number" default="0"/>
<ui:button label="Click me" press="{!c.handleClick}...
• Component
<aura:attribute name="accounts" type="Accounts[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doIn...
<aura:attribute name="accounts" type="Account[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<ul>
...
<aura:attribute name="accounts" type="Account[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura...
<aura:component>
<aura:attribute name="account" type="Account"/>
<li>{!v.account.Name}</li>
</aura:component>
AccountListI...
• Create the AccountList component responsible for displaying the list of accounts
• Create the AccountListItem component ...
Unit 6:
Creating the AccountMap Component
• External JavaScript libraries and CSS style sheets must be loaded as static resources
• Use the <ltng:require> tag to lo...
<ltng:require scripts="/resource/leaflet/leaflet.js"/>
Loading External JavaScript Libraries
<ltng:require styles="/resource/leaflet/leaflet.css" />
Loading External CSS Style Sheets
<ltng:require
scripts="/resource/leaflet/leaflet.js"
styles="/resource/leaflet/leaflet.css" />
Loading JavaScript Librarie...
<ltng:require
scripts="/resource/leaflet/leaflet.js"
styles="/resource/leaflet/leaflet.css"
afterScriptsLoaded="{!c.render...
• Load leaflet JS library
• Load Leaflet CSS
• Render the map when files are loaded
Lab
Unit 7:
Using Events to add Markers to the Map
Flow
• AccountMap can't show markers until AccountList has loaded accounts from the server
• When AccountList has successf...
<aura:event type="APPLICATION">
<aura:attribute name="accounts" Type="Account[]"/>
</aura:event>
Creating the AccountsLoad...
var event = $A.get("e.c:AccountsLoaded");
event.setParams({"accounts": accounts});
event.fire();
Firing the Event in Accou...
• Component
<aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
• Controller
accountsLoaded: function(co...
• Create the AccountsLoaded Event
• Trigger the AccountsLoaded Event in AccountList
• Handle the AccountsLoaded Event in A...
Unit 8:
Using Events to Center the Map
• Create the AccountSelected event
• Trigger the AccountSelected event in AccountList
• Handle the AccountSelected event i...
Unit 9:
Interacting with the Salesforce1 App
• Lightning Components enable you to extend standard features
• Don't reinvent the wheel
For example, if your component ne...
var event = $A.get("e.force:navigateToSObject");
event.setParams({
"recordId": accountId
});
event.fire();
This event will...
When a user clicks a marker on the map, load the default Salesforce1 details view for the selected
account
Lab
Upcoming SlideShare
Loading in …5
×

Lightning Components Workshop

2,962 views

Published on

This is the workshop presentation material for the Lightning Components Hands-On Workshop (HOW) being presented at Dreamforce 2015 in the DevZone. This content pairs with the Lightning Components Trailhead project live in Trailhead as of Dreamforce 2015.

Published in: Software
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ●●● https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Good info!.... STARTUPS...Send your pitchdeck to thousands of VC's and Angel's with just 1 click. Visit: Angelvisioninvestors.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Lightning Components Workshop

  1. 1. Getting Started with Lightning Components Workshop
  2. 2. Unit 1: Setting Up Your Environment
  3. 3. 1. Sign up for a developer edition 2. Enable Lightning Components (required in pre-winter 16 orgs only) Lab
  4. 4. Unit 2: Adding Location to Accounts
  5. 5. 1. Add a geolocation field to the Account object 2. Enter sample data Lab
  6. 6. Unit 3: Creating the AccountController Apex Class
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Lightning Components vs Aura Aura Lightning Components • Open Source framework (http://documentation.auraframework.org) • Vendor agnostic • Built on top of Aura • Salesforce-specific extensions
  12. 12. 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
  13. 13. • Create an Aura-enabled Apex controller named AccountController • Add a findAll() method that returns accounts that have location information Lab
  14. 14. Unit 4: Creating the AccountLocator Component
  15. 15. <aura:component controller="AccountController"> <div> <div>AccountMap goes here</div> <div>AccountList goes here</div> </div> </aura:component> Anatomy of a Lightning Component
  16. 16. • 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
  17. 17. <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?
  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>div {} Any div that is an immediate child of .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 within .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>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?
  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>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?
  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 .disabled {} Any element with the "disabled" class within .THIS (the root tag) Styles: How to target these elements?
  23. 23. 1. In the Salesforce1 app 2. In App Builder 3. In Lightning Applications Where can I use Lightning Components?
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. • Create the AccountLocator component • Add AccountLocator to the Salesforce1 App menu Lab
  28. 28. Unit 5: Creating the AccountList Component
  29. 29. • 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
  30. 30. • {! } 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
  31. 31. • 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
  32. 32. • 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
  33. 33. • 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
  34. 34. <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
  35. 35. <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
  36. 36. <aura:component> <aura:attribute name="account" type="Account"/> <li>{!v.account.Name}</li> </aura:component> AccountListItem
  37. 37. • 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
  38. 38. Unit 6: Creating the AccountMap Component
  39. 39. • 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
  40. 40. <ltng:require scripts="/resource/leaflet/leaflet.js"/> Loading External JavaScript Libraries
  41. 41. <ltng:require styles="/resource/leaflet/leaflet.css" /> Loading External CSS Style Sheets
  42. 42. <ltng:require scripts="/resource/leaflet/leaflet.js" styles="/resource/leaflet/leaflet.css" /> Loading JavaScript Libraries and CSS Style Sheets
  43. 43. <ltng:require scripts="/resource/leaflet/leaflet.js" styles="/resource/leaflet/leaflet.css" afterScriptsLoaded="{!c.renderMap}" /> Using the afterScriptLoaded Event
  44. 44. • Load leaflet JS library • Load Leaflet CSS • Render the map when files are loaded Lab
  45. 45. Unit 7: Using Events to add Markers to the Map
  46. 46. 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
  47. 47. <aura:event type="APPLICATION"> <aura:attribute name="accounts" Type="Account[]"/> </aura:event> Creating the AccountsLoaded Event
  48. 48. var event = $A.get("e.c:AccountsLoaded"); event.setParams({"accounts": accounts}); event.fire(); Firing the Event in AccountList
  49. 49. • 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
  50. 50. • Create the AccountsLoaded Event • Trigger the AccountsLoaded Event in AccountList • Handle the AccountsLoaded Event in AccountMap Lab
  51. 51. Unit 8: Using Events to Center the Map
  52. 52. • 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
  53. 53. Unit 9: Interacting with the Salesforce1 App
  54. 54. • 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
  55. 55. 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
  56. 56. When a user clicks a marker on the map, load the default Salesforce1 details view for the selected account Lab

×