Lightning Components Workshop

Getting Started with Lightning ComponentsWorkshop

SSID: HANDSON_WORKSHOPpass: devzone_how

Wifi Info

Unit 1:Setting Up Your Environment

1. Sign up for a developer edition2. 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

https://developer.salesforce.com/trailhead/project/account-geolocation-app

Unit 2:Adding Location to Accounts

1. Add a geolocation field to the Account object2. Enter sample data

Lab

Unit 3:Creating the AccountController Apex Class

1. User requests a page2. The server executes the page’s underlying, and sends the resulting page

(HTML+data) back to the browser3. The browser displays the HTML4. Show different data? Back to 15. Show different view? Back to 1

WorkflowVisualforce Page Centric Model

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

1. The user requests a Lightning Component2. Server returns component bundle to browser3. JavaScript generates the UI4. Component makes request for data (data only) [this unit]5. Server returns data6. Show different data? Back to 47. Show different view? Back to 3

Lightning Components App Centric Model

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

Lightning Components vs Aura

Aura

Lightning Components

• Open Source framework (http://documentation.auraframework.org)• Vendor agnostic

• Built on top of Aura• Salesforce-specific extensions

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

• Create an Aura-enabled Apex controller named AccountController• Add a findAll() method that returns accounts that have location information

Lab

Unit 4:Creating the AccountLocator Component

<aura:component controller="AccountController">

<div> <div>AccountMap goes here</div> <div>AccountList goes here</div> </div>

</aura:component>

Anatomy of a Lightning Component

• ComponentHTML, nested Lightning Components, and Lightning tags (attribute, iteration, etc.)

• ControllerJavaScript: Event Handlers

• HelperJavaScript: Shared code within the component

• StyleCSS: Encapsulated CSS styles

• DesignComponent description for use in App Builder

Lightning Component Parts

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


.THIS>div {}

Any div that is an immediate child of .THIS (the root tag)



.THIS div {}

Any div within .THIS (the root tag)



.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



.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



.THIS .disabled {}Any element with the "disabled" class within .THIS (the root tag)


1. In the Salesforce1 app2. In App Builder3. In Lightning Applications

Where can I use Lightning Components?

1. Implement the force:appHostable interface<aura:component implements="force:appHostable">

2. Create a Tab3. Add the Tab to Mobile Navigation

Using a Lightning Component in the Salesforce1 App

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

1. Create a Lightning AppFile > 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

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

<aura:attribute name="title" type="String"/>

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

Attributes

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

• 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

• 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 clickedEvent Handlers

• 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 initializedEvent Handlers

<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

<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 ComponentIterating through a List

<aura:component> <aura:attribute name="account" type="Account"/> <li>{!v.account.Name}</li></aura:component>

AccountListItem

• 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

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 load them• Loading is asynchronous• afterScriptLoaded event is triggered after files have been succesfully loaded

Loading External JavaScript Libraries and CSS Files

<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 Libraries and CSS Style Sheets

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

Using the afterScriptLoaded Event

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

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

Creating the AccountsLoaded Event

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

Firing the Event in AccountList

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

• ControlleraccountsLoaded: function(component, event, helper) {

// add markers using Map api

}

Handling the Event in AccountMap

• Create the AccountsLoaded Event• Trigger the AccountsLoaded Event in AccountList• Handle the AccountsLoaded Event in AccountMap

Lab

Unit 8:Using Events to Center the Map

• 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

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

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

ShareYourFeedback,andWinaGoPro!

3 EarnaGoProprizeentryforeachcompletedsurvey

Tapthebelltotakeasurvey2Enrollinasession1

Before you leave, get your Quest stamp!Attendingthisworkshopearnsyou1hands-onactivitystamptowardsyourDevZoneQuest!

ComeuptothespeakerpodiumattheendtostampyourQuestguide.

Thengocollect3morestampstoearnyourQuestprizepack!

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

Lab

Lightning Components Workshop

Technology

Transcript of Lightning Components Workshop