Salesforce Lightning Web Component development tutorial LWC
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28 students enrolled

Salesforce Lightning Web Component development tutorial LWC

LWC
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28 students enrolled
Last updated 10/2019
English
English [Auto-generated]
Price: $34.99
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 7 articles
  • 6 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Lightning web components
  • Lightning web components in detail : LWC
  • mumbai students
  • aarogya setu
Course content
Expand all 29 lectures 03:40:11
+ Introduction
6 lectures 58:16

What is LWC ?

Initial development environment setup

How to install  VS code ,salesforce extensions for vs code and sfdx

How to connect to org using vs code

Basic salesforce developer org login

Install Visual studio code

Within Visual Studio code,install salesforce extensionpack from salesforce

Please note,when installing this extension,write access to local folder is mandatory,otherwise installation will not work as expected.

Once installed,please create a folder in local machine

Open this folder in VS code and from command pallete select create project with manifest( if your salesforce extension pack is installed correctly you will see this option)

After this ,in VS code command pallete select “authorise an org option”,this will open up a new browser with the salesforce org url you specify,Enter the login password to authorise VS code to work on this org.

After this one can deploy or retreive metadata to and from this org from package.xml.


Salesforce CLIm : is a command line interface and helps you to run commands for Salesforce org and work with the metadata and files locally in your system which are retrived from Salesforce org. To install Salesforce CLI go through the following linkhttps://developer.salesforce.com/tools/sfdxcliand select the prefered OS, download it and install.


Install SFDX CLI

Preview 14:43

Explore the content of LWC  file structure

HTML contains the markup

.JS file contains the javascript logic

Contains attributes like isexposed and where it should be visible

CSS contains style tag

All markup must be inside template tag


Preview 03:30

Build your first react component

What are decorators

Declaring Variables


Decorators

The Lightning Web Components programming model has three decorators that add functionality to a property or function.

The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components.

@apiTo expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of a reactive property changes, the component rerenders. When a component rerenders, all the expressions used in the template are reevaluated.See Public Properties.To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.See Public Methods.@trackTo track a private property’s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties.

Build your first LWC component ,decorators and variables introduction
11:45

How to create variables ,and assign to input tags

One way variables binding

Creating variabes and wiring to LWC input tags
05:14
Decorators @api @track
07:33

How to do 2 way data binding

How to use methods

How to use changehandlers and event.target.value

Preview 15:31
+ Calling Apex from LWC
6 lectures 01:06:05
Building and using Lightning data services part 3
08:50
Building and using Lightning data services part 4
19:55

2 Ways to connect to apex

call apex using wired attribute

call apex by event click(imperatively)

@wire Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.

To mark an apex to be callable from lwc

@AuraEnabled(cacheable=true)

public static String makeGetCallout() {

Calling Apex from LWC on init using @wire
10:45

Invoking APEX using wired attribute handon demo and more details

Calling apex from lwc deepdive
08:57
SHowing list of contacts for an account using for each template tags
09:25
Template tags and apex part 2 ,creating records
08:13
+ Lifecycle hooks i and Events n LWC
4 lectures 31:31

Lightning web components have a lifecycle managed by the framework. The framework creates components, inserts them into the DOM, renders them, and removes them from the DOM. It also monitors components for property changes. Generally, components don’t need to call these lifecycle hooks, but it is possible.

Life cycle hooks part 1
06:17

More handson hooks example

Life cycle hooks part 2
02:56

 What are nested  events

How to handle nested events

When are nested events used

Nested Events
15:58

What are custom events

How to handle custom events

When are custom events used

Custom Events
06:20
+ Lightning Data Services
6 lectures 01:03:03

Lightning Data Service is built on top of User Interface API. UI API is a public Salesforce API that Salesforce uses to build Lightning Experience and Salesforce for iOS and Android.

Like its name suggests, UI API is designed to make it easy to build Salesforce UI.

UI API responses also respect CRUD access, field-level security settings, and sharing settings

import { deleteRecord } from 'lightning/uiRecordApi';

import { updateRecord } from 'lightning/uiRecordApi

Building and using Lightning data services part 1
08:18
Building and using Lightning data services part 2
04:51

Create local variables and bind them to input tags

@track contactId;

@track firstName;

@track lastName;


IN JS bind the local to the schema variable

<lightning-input type="text" label="" name="input1" value={relatedContactObj.LastName} onchange={onLastNameChange}></lightning-input>

In the onchange handler assign the values to the local variables

This.firstname =e.target.value

Building and using Lightning data services part 3
08:50

Within lwc build json object with fields api name and values,map the imported schema to local variables

const recordInput = {

ields: {

[Id.fieldApiName]: this.contactId,

[contactFirstName.fieldApiName]: this.firstName,

[contactLastName.fieldApiName]: this.lastName,

}

;

Once this recordinput is created pass it to createrecord or updaterecord

this.contactId = event.target.dataset.recordid;//this requires usage of data tags in lightning-input

Preview 19:55

<lightning-record-form object-api-name={accountObject}

fields={myFields}onsuccess={handleAccountCreated}> //this part submits the record

</lightning-record-form>


Almost codeless, useage

Import he UI recordpi object and fieldsnames

Import the createrecordmethod from API

Syntax

import ACCOUNT_OBJECT from '@salesforce/schema/Account';

import NAME_FIELD from '@salesforce/schema/Account.Name';

import AccountRevenue__cField from '@salesforce/schema/Account.AccountRevenue__c';

import { createRecord } from 'lightning/uiRecordApi';


accountObject = ACCOUNT_OBJECT;

myFields = [NAME_FIELD, AccountRevenue__cField];

// eslint-disable-next-line no-console

handleAccountCreated(result) {console.log(result);}


Can only overide record detail pages for access to object-api name

Codeless components :Lightning record edit form :editing SObject records
05:30

Updated video lecture

Learn to use lightning record form

How to use schema fields and create template

To create record

To update record with page context in record detail page

Use picklist mappings


Lightning record form full example -Create-edit and with picklist
15:39
+ Code sample from tutorial
6 lectures 00:10
Calculator - first app,2 event binding,2 way binding
00:02
helloworld
00:01
Wired apex example
00:01
lightningdataservice Imperative call to apex and template tag foreach example li
00:02
EVents
00:02
Lightning record edit form
00:01
+ Project for practise
1 lecture 01:05

Student table

Fields:

Age number

Studentemail email

Dateofjoining date

confirmed boolean

Comments textarea

Country

City


Student marks table

Fields:

MD to studentmaster

Marks number

Subject picklist

Year number



1. Students mark should have 1 semesters  and marks against one subject will be once a year.

and Student age cannot be less than 19


2. Students should be marked as pass or fail on average marks of 35 across a years records

3. Students who have more than 2 marks or given 2 subjects whether pass of fail,cannot be deleted for the current year

4.background check failed approval process students cannot be  confirmed again ,using validation rule

5. Visualforce UI for student master and marks using custom controller to save ,edit,delete data

6. Create many to many object finalresults__c ,which will have the following schema

   MD to student master

   md to student marks

   Year

   Pass or Fail(This will be based on an average marks field of 35 for the year,also an email

    will be sent out to student with the result for the year,whether he has passed or failed)

   Average marks for the year(this will be calculated from the marks object and stored here

   either via config or apex)

7. When new student is created

    WEclome kit email should be sent out

    Confirmed flag should be true

    It should be submitted to approval for backgroud and visa check

    Task should be created to make new id

    Create new contact record for student created

8 Build approval process for student for visa and degree check

   

9. Create LWC  with apex class for students and marks forms.

   

These scenarios can be resolved using a combination of validation,workflow,master detail relation

   triggers and LWC.

Please complete the project requirements using LWC components for UI.
01:05
Requirements
  • salesforce administrator and configuration
  • Salesforce apex development
Description

In this tutorial you will learn to bascially build custom salesforce UI with Custom Lightning Web Components.


Build Lightning web components


Lightning tags


Variables,decorators,data and property binding


Structure of LWC bundle


Connect with Apex using Wire attribute


Connect with Apex imperatively


Dml with  Lightning data services


DML with Lightning record form


Inter component communication using Events


Nested and  Custom event handling


Learn component lifecyce hooks and how to use them


Note;Prerequisite for this course is ,working knowledge of salesforce administration and Development including Apex programming,and knowledge of  basic javascript,html ,css .



Who this course is for:
  • Salesforce developers
  • Salesforce consultants
  • Web developers