Salesforce Lightning Components Workshop

download Salesforce Lightning Components Workshop

of 54

  • date post

    09-Apr-2017
  • Category

    Technology

  • view

    1.385
  • download

    1

Embed Size (px)

Transcript of Salesforce Lightning Components Workshop

  • Building Lightning Components

    Christophe Coenraets Developer Evangelist

    Salesforce DUG NYC 11/11/2015

    #TrailheadLive @ccoenraets

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

  • Step 1: Setting Up Your Environment

  • 1. Sign up for a Developer Edition Org 2. Enable Lightning Components

    Challenge

  • Step 2: Enabling Geolocation on Accounts

  • 1. Add a geolocation field to the Account object 2. Enter sample data

    Challenge

  • Step 3: Creating an Aura-Enabled Controller

  • 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

  • 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

  • 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

  • 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

  • Creating an Aura-Enabled Apex Controller

    public with sharing class AccountController {

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

    }

  • 1. Create an Aura-enabled Apex controller named AccountController

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

    Challenge

  • Step 4: Creating the AccountLocator

    Component

  • Anatomy of a Lightning Component

    AccountMap goes here

    AccountList goes here

  • Component Parts: Component

    UI Markup

    Data binding

    Attributes

    Component

  • Component Parts: Style

    UI Markup

    Data binding

    Attributes

    Component Style

    Encapsulated CSS

  • 1. In the Salesforce1 app 2. In App Builder

    3. In Lightning Applications

    Where can I use Lightning Components?

  • Using a Lightning Component in the Salesforce1 App

    1. Implement the force:appHostable interface

    2. Create a Tab

    3. Add the Tab to Mobile Navigation

  • Using a Lightning Component in a Lightning App

    1. Create a Lightning App File > New > Lightning Application

    2. Embed the Lightning Component

    Useful for creating fullscreen apps or for testing components during development

  • 1. Create the AccountLocator component 2. Add AccountLocator to the Salesforce1 App menu

    Challenge

  • Step 5: Creating the AccountList Component

  • Attributes

    The data of the component

    Available anywhere in the component

    Examples:

  • Data Binding

    {! } notation

    {!v.account.Name}

    Bidirectional in ui: components

    Price attribute value is updated automatically when user types in input field

  • Component Parts: Controller

    UI Markup

    Data binding

    Attributes

    Component

    Event Handlers

    Controller Style

    Encapsulated CSS

  • Event Handlers

    1. Component {!v.counter}

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

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

  • Event Handlers

    ({ doInit : function(component, event) { var action = component.get("c.findAll");

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

    } })

  • Iterating through a List

    {!account.Name}

  • Iterating through a List

  • AccountListItem

    {!v.account.Name}

  • 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

  • Step 6: Creating the AccountMap Component

  • External JavaScript libraries and CSS style sheets must be loaded as static resources

    Use the tag to load them

    Loading is asynchronous afterScriptLoaded event is triggered after files have been succesfully loaded

    Loading External JavaScript Libraries and CSS Files

  • Loading External JavaScript Libraries

  • Loading External CSS Style Sheets

  • Loading JavaScript Libraries and CSS Style Sheets

  • Using the afterScriptLoaded Event

  • 1. Load leaflet JS library 2. Load Leaflet CSS

    3. Render the map when files are loaded

    Challenge

  • Step 7: Intercomponent Communication

  • Intercomponent Communication

    Application Event Broker

    Event Object

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

    AccountMap AccountList

  • Creating the AccountsLoaded Event

  • 1. Create the AccountsLoaded Event

    2. Trigger the AccountsLoaded Event in AccountList

    3. Handle the AccountsLoaded Event in AccountMap

    Challenge

  • Step 8: Using Events to Center the Map

  • Intercomponent Communication

    Application Event Broker

    Event Object

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

    AccountMap AccountList

  • 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

  • Step 9: Interacting with the Salesforce1 App

  • 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

  • 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

  • Component Parts: Helper

    UI Markup

    Data binding

    Attributes

    Component

    Event Handlers

    Controller

    Shared Logic

    Helper Style

    Encapsulated CSS

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

    Challenge

  • Step 10: Using Components in App Builder

  • Using a Lightning Component in App Builder

    1.Implement the flexipage:availableForAllPageTypes interface

    2.Create a component description in the Design part

    3.Drag the component from the component palette in App Builder

  • Compose AccountList and AccountMap in App Builder

    Challenge

  • Summary

    UI Markup

    Data binding

    Attributes

    Component

    Design Descriptor

    Event Handlers

    Controller

    Shared Logic

    Helper Style

    Custom Rendering

    Renderer

    Encapsulated CSS

    App Builder