Lightning web components episode 2- work with salesforce data

Lightning Web Components
Episode 2 – Work with Salesforce Data
March 01, 2019 | 11:00 a.m. IST
Satya Sekhar
Sr. Developer Evangelist
Salesforce
Shashank Srivatsavaya
Developer Relations, Senior
Manager
Salesforce

Forward-Looking Statement
Statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any
such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could
differ materially from the results expressed or implied by the forward-looking statements we make. All statements
other than statements of historical fact could be deemed forward-looking, including any projections of product or
service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding
strategies or plans of management for future operations, statements of belief, any statements concerning new,
planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and
delivering new functionality for our service, new products and services, our new business model, our past operating
losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting,
breach of our security measures, the outcome of any litigation, risks associated with completed and any possible
mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our
ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and
successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and
selling to larger enterprise customers. Further information on potential factors that could affect the financial results
of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our
quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important
disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are
not currently available and may not be delivered on time or at all. Customers who purchase our services should
make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no
obligation and does not intend to update these forward-looking statements.

Go Social!
Salesforce Developers
The video will be posted to YouTube & the
webinar recap page (same URL as registration).
This webinar is being recorded!
@salesforcedevs

Have Questions?
● Don’t wait until the end to ask your question!
● Technical support will answer questions starting now.
● Respect Q&A etiquette
● Please don’t repeat questions. The support team is working their
way down the queue.
● Stick around for live Q&A at the end
● Speakers will tackle more questions at the end, time-allowing
● Head to Developer Forums
● More questions? Visit developer.salesforce.com/forums

Episode 1 recap
• Lightning Web Components - Introduction
• Sample Gallery
• Component Library and Playground
• Base Lightning Components
• Developer Tooling – Salesforce CLI and VS Code

Agenda
● Work with Data
● Base Lightning Components which use Lightning Data Service
● Wire service with Lightning Data Service and UI API
● Wire service with Apex Methods
● Imperative Apex Calls
● Configuring for App Builder

How does Lightning Data Service Work?
Browser
Server
Lightning Web Components
Ligtning Data Service
User Interface API
sObjects
Lightning Data Service
• Caches results on the client
• Invalidates cache entry when data and
meta data changes
• Optimizes server calls
UI API
• Public Salesforce API to build UI
• Gives data and metadata in a single
response
• UI responses respect CRUD, FLS and
Sharing settings

Base Lightning Components
Lightning Record Form
• Supports edit, view, and read-only modes
Benefits
• Metadata aware
• Does not require Apex code
• Provide Form Layout
• Field labels are displayed based on org’s defaults
• Built on Lightning Data Service and UI API
• Can access model statically
• Can also access model dynamically
Lightning Record View Form
• Displays a read only form
Lightning Record Edit Form
• Displays an editable form

Wire Service
Wire Adapter
lightning/ui*Api Module
Wire Adapter
JS APIs
{property}
<template>
</template>
Lightning Web Component
Wire Adapter
HTML JS
property
Lightning
Data
Service

Get data with Wire Service
import { adapterId } from 'adapterModule’;
@wire(adapterId, adapterConfig) propertyOrFunction;
import { LightningElement, api, wire } from 'lwc’;
import { getRecord } from 'lightning/uiRecordApi’;
export default class Record extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] }) record;
}
Syntax
Usage
<template>
{record}
</template>
HTML

Call Apex Methods from Lightning Web Components
Import Apex Methods
Call
Function
Functions in Javascript
Wire Service Call Imperatively
Wire apex method to a property Wire apex method to a function
Annotate Apex method with
@AuraEnabled(cacheable=true)

Call Apex method using wire service
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod’;
@wire(apexMethod, { apexMethodParams }) propertyOrFunction;
import { LightningElement, track, wire } from 'lwc’;
import findContacts from '@salesforce/apex/ContactController.findContacts';
export default class ApexWireMethodToProperty extends LightningElement {
@track searchKey = ’’;
@wire(findContacts, { searchKey: '$searchKey' }) contacts;
}
Syntax
Usage

Imperative methods
import { LightningElement, track } from 'lwc’;
import getContactList from '@salesforce/apex/ContactController.getContactList’;
export default class ApexImperativeMethod extends LightningElement {
@track contacts;
@track error;
handleLoad() {
getContactList()
}
}
.then(result => {
this.contacts = result;
})
.catch(error => {
this.error = error;
});
Javascript
Promise

Demo
Work with multiple records

Configure for Lightning App Builder
• Make your component usable in
Lightning App Builder
• Types of Lightning Pages
• Configure component properties
• Set the supported sObjects

Demo
Component composition
with App Builder

Lightning Web Components – Episode 3
● Component Composition
● Interoperability and Co-existence with Aura
● Events/Intercomponent communication
● Lifecycle hooks
● Pub sub communication
Component communication and Aura interoperability

● Static resources and custom/3rd party javascript
● External API
● Security: Locker
● Testing with Jest
Security and Testing

● Implement for user scenarios
● Live coding testing and debugging
● Aura Migration Strategies and Implementation
● Best Practices
Lightning Web Components - Episode 5: Live-coding with Lightning
Web Components

Get Hands On with a Trailmix!
sforce.co/lwcModern Javascript
Developement

Q & A
Try Trailhead: trailhead.salesforce.com
Join the conversation: @salesforcedevs
Join Trailblazer Community Group: bit.ly/webinarinapac

Survey
Your feedback is crucial to the success of our
webinar programs. Please fill out the survey at
the end of the webinar. Thank you!

Lightning web components episode 2- work with salesforce data

Lightning web components episode 2- work with salesforce data

Recommended

More Related Content

What's hot (20)

Similar to Lightning web components episode 2- work with salesforce data (20)

More from Salesforce Developers (20)

Recently uploaded (20)

Lightning web components episode 2- work with salesforce data