Salesforce Lightning Components Workshop

54
Building Lightning Components Christophe Coenraets Developer Evangelist Salesforce DUG NYC 11/11/2015 #TrailheadLive @ccoenraets

Transcript of Salesforce Lightning Components Workshop

Page 1: Salesforce Lightning Components Workshop

Building Lightning Components

 Christophe Coenraets  Developer Evangelist

 Salesforce DUG NYC  11/11/2015

 #TrailheadLive  @ccoenraets

Page 2: Salesforce Lightning Components Workshop

http://developer.salesforce.com/trailhead/projects

Page 3: Salesforce Lightning Components Workshop

Step 1: Setting Up Your Environment

Page 4: Salesforce Lightning Components Workshop

1.  Sign up for a Developer Edition Org

2.  Enable Lightning Components

Challenge

Page 5: Salesforce Lightning Components Workshop

Step 2: Enabling Geolocation on Accounts

Page 6: Salesforce Lightning Components Workshop

1.  Add a geolocation field to the Account object

2.  Enter sample data

Challenge

Page 7: Salesforce Lightning Components Workshop

Step 3: Creating an Aura-Enabled Controller

Page 8: Salesforce Lightning Components Workshop

Visualforce Page-Centric Model

1.  Browser requests page

Client Server

4.  Browser renders html

2.  Server executes Apex code

3.  Server returns page (html + data)

Show different data? Back to 1

Show different view? Back to 1

Page 9: Salesforce Lightning Components Workshop

Pros

1.  Proven model

2.  Productivity. Easy to implement

3.  Naturally splits large apps into small, manageable units (pages)

Caveats

1.  Limited interactivity

2.  Higher latency

Visualforce Page Centric Model

Page 10: Salesforce Lightning Components Workshop

Lightning App-Centric Model

1.  Browser requests Component

Client Server

3.  Browser builds UI with JavaScript

4.  Browser requests data

7.  Back to 3

2.  Server returns Component Bundle

5.  Server executes Apex

6.  Server returns data (data only!)

Show different data? Back to 4

Show different view? Back to 3

Page 11: Salesforce Lightning Components Workshop

Pros

•  Enables highly interactive/immersive user experiences

•  Less page refreshes

•  Tightly integrated (no iframe)

•  Composable

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

Page 12: Salesforce Lightning Components Workshop

Creating an Aura-Enabled Apex Controller

public  with  sharing  class  AccountController  {  

       @AuraEnabled          public  static  List<Account>  findAll()  {                  return  [SELECT  id,  name  FROM  Account];          }  

}  

 

Page 13: Salesforce Lightning Components Workshop

1.  Create an Aura-enabled Apex controller named AccountController

2.  Add a findAll() method that returns accounts that have location information

Challenge

Page 14: Salesforce Lightning Components Workshop

Step 4: Creating the AccountLocator

Component

Page 15: Salesforce Lightning Components Workshop

Anatomy of a Lightning Component

<aura:component  controller="AccountController">  

       <div>  

               <div>AccountMap  goes  here</div>  

               <div>AccountList  goes  here</div>  

       </div>  

</aura:component>  

Page 16: Salesforce Lightning Components Workshop

Component Parts: Component

UI Markup

Data binding

Attributes

Component  

Page 17: Salesforce Lightning Components Workshop

Component Parts: Style

UI Markup

Data binding

Attributes

Component  Style  

Encapsulated CSS

Page 18: Salesforce Lightning Components Workshop

1.  In the Salesforce1 app

2.  In App Builder

3.  In Lightning Applications

Where can I use Lightning Components?

Page 19: Salesforce Lightning Components Workshop

Using a Lightning Component in the Salesforce1 App

1.  Implement the force:appHostable interface

<aura:component  implements="force:appHostable">  

2.  Create a Tab

3.  Add the Tab to Mobile Navigation

Page 20: Salesforce Lightning Components Workshop

Using a Lightning Component in a Lightning App

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 components during development

Page 21: Salesforce Lightning Components Workshop

1.  Create the AccountLocator component

2.  Add AccountLocator to the Salesforce1 App menu

Challenge

Page 22: Salesforce Lightning Components Workshop

Step 5: Creating the AccountList Component

Page 23: Salesforce Lightning Components Workshop

Attributes

•  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[]"/>

Page 24: Salesforce Lightning Components Workshop

Data Binding

•  {! } 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

Page 25: Salesforce Lightning Components Workshop

Component Parts: Controller

UI Markup

Data binding

Attributes

Component  

Event Handlers

Controller  Style  

Encapsulated CSS

Page 26: Salesforce Lightning Components Workshop

Event Handlers

1.  Component

<aura:attribute  name="counter"  type="Number"  default="0"/>  <ui:button  label="Click  me"  press="{!c.handleClick}"/>  <div>{!v.counter}</div>  

2.  Controller

({          handleClick:  function(component,  event)  {                  var  counter  =  component.get("v.counter");  

               counter  =  counter  +  1;                  component.set("v.counter",  counter);          }  })  

Page 27: Salesforce Lightning Components Workshop

Event Handlers

<aura:attribute  name="accounts"  type="Accounts[]"/>  <aura:handler  name="init"  value="{!this}"  action="{!c.doInit}"  />    ({          doInit  :  function(component,  event)  {                  var  action  =  component.get("c.findAll");  

               action.setCallback(this,  function(a)  {                          component.set("v.accounts",  a.getReturnValue());                  });                  $A.enqueueAction(action);  

       }  })  

Page 28: Salesforce Lightning Components Workshop

Iterating through a List

<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>  

Page 29: Salesforce Lightning Components Workshop

Iterating through a List

<aura:attribute  name="accounts"  type="Account[]"/>  

<aura:handler  name="init"  value="{!this}"  action="{!c.doInit}"/>  

 

<ul>  

<aura:iteration  items="{!v.accounts}"  var="account">  

       <c:AccountListItem  account="{!account}"/>  

</aura:iteration>  

</ul>  

Page 30: Salesforce Lightning Components Workshop

AccountListItem

<aura:component>  

       <aura:attribute  name="account"  type="Account"/>  

       <li>{!v.account.Name}</li>  

</aura:component>  

Page 31: Salesforce Lightning Components Workshop

1.  Create the AccountList component responsible for displaying the list of accounts

2.  Create the AccountListItem component that you nest inside AccountList to render individual accounts in the list

Challenge

Page 32: Salesforce Lightning Components Workshop

Step 6: Creating the AccountMap Component

Page 33: Salesforce Lightning Components Workshop

•  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

Page 34: Salesforce Lightning Components Workshop

Loading External JavaScript Libraries

 

<ltng:require  scripts="/resource/leaflet/leaflet.js"/>  

Page 35: Salesforce Lightning Components Workshop

Loading External CSS Style Sheets

 

<ltng:require  styles="/resource/leaflet/leaflet.css"  />  

Page 36: Salesforce Lightning Components Workshop

Loading JavaScript Libraries and CSS Style Sheets

 

<ltng:require      scripts="/resource/leaflet/leaflet.js"        styles="/resource/leaflet/leaflet.css"  />  

Page 37: Salesforce Lightning Components Workshop

Using the afterScriptLoaded Event

 

<ltng:require      scripts="/resource/leaflet/leaflet.js"        styles="/resource/leaflet/leaflet.css"    afterScriptsLoaded="{!c.renderMap}"  />  

Page 38: Salesforce Lightning Components Workshop

1.  Load leaflet JS library

2.  Load Leaflet CSS

3.  Render the map when files are loaded

Challenge

Page 39: Salesforce Lightning Components Workshop

Step 7: Intercomponent Communication

Page 40: Salesforce Lightning Components Workshop

Intercomponent Communication

Application Event Broker

Event Object

<aura:handler  event="c:AccountsLoaded"          action="{!c.accountsLoadedHandler}"/>    

<aura:registerEvent  name="loaded"          type="c:AccountsLoaded"/>  

var  event  =  $A.get("e.c:AccountsLoaded");  event.setParams({"accounts":  accounts});  event.fire();  

AccountMap AccountList

Page 41: Salesforce Lightning Components Workshop

Creating the AccountsLoaded Event

<aura:event  type="APPLICATION">  

       <aura:attribute  name="accounts"  Type="Account[]"/>  

</aura:event>  

Page 42: Salesforce Lightning Components Workshop

1.  Create the AccountsLoaded Event

2.  Trigger the AccountsLoaded Event in AccountList

3.  Handle the AccountsLoaded Event in AccountMap

Challenge

Page 43: Salesforce Lightning Components Workshop

Step 8: Using Events to Center the Map

Page 44: Salesforce Lightning Components Workshop

Intercomponent Communication

Application Event Broker

Event Object

<aura:handler  event="c:AccountSelected"          action="{!c.accountSelectedHandler}"/>    

<aura:registerEvent  name="select"          type="c:AccountSelected"/>  

var  event  =  $A.get("e.c:AccountSelected");  event.setParams({"account":  account});  event.fire();  

AccountMap AccountList

Page 45: Salesforce Lightning Components Workshop

1.  Create the AccountSelected event

2.  Trigger the AccountSelected event in AccountList

3.  Handle the AccountSelected event in AccountMap and center the map on the selected account location

Challenge

Page 46: Salesforce Lightning Components Workshop

Step 9: Interacting with the Salesforce1 App

Page 47: Salesforce Lightning Components Workshop

1.  Lightning Components enable you to extend standard features

2.  Don't reinvent the wheel

For example, if your component needs an account details view: use the standard one, don't create your own

3.  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

4.  Platform events allow you to integrate your custom components into the standard experience

Salesforce1 Integration

Page 48: Salesforce Lightning Components Workshop

Firing a Platform Event

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

Page 49: Salesforce Lightning Components Workshop

Component Parts: Helper

UI Markup

Data binding

Attributes

Component  

Event Handlers

Controller  

Shared Logic

Helper  Style  

Encapsulated CSS

Page 50: Salesforce Lightning Components Workshop

When a user clicks a marker on the map, load the default Salesforce1 details view for the selected account

Challenge

Page 51: Salesforce Lightning Components Workshop

Step 10: Using Components in App Builder

Page 52: Salesforce Lightning Components Workshop

Using a Lightning Component in App Builder

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  

Page 53: Salesforce Lightning Components Workshop

Compose AccountList and AccountMap in App Builder

Challenge

Page 54: Salesforce Lightning Components Workshop

Summary

UI Markup

Data binding

Attributes

Component  

Design  Descriptor  

Event Handlers

Controller  

Shared Logic

Helper  Style  

Custom Rendering

Renderer  

Encapsulated CSS

App Builder