Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Salesforce > LWC > Flashcards

LWC Flashcards

1
Q

What is lwc?

A

UI framework built using html, modern Javascript. Uses core web standards. runs natively on browser which in turn makes it light weight and perform faster(load, render faster and responsive)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Benefits of lwc?

A
  • up to date with current web standards
  • runs natively on browser hence faster(no compilations or abstractions)
  • transferable skill
  • coexist with aura
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Files in LWC/folder structure in LWC?

A

MyComponent.html - frontend
MyComponent.js - client side backend
MyComponent.js-meta.xml - configuration
MyComponent.css

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is lwc module?

A

lwc framework follows module structure. So lwc is a core module which is extended by every lwc component. It provides with lifecycle hooks, decorators, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Named vs default exports

A

Named exports can be many in a single file and while importing their names need to match in both places. For that just write export in front of that function. It’s opposite happens in default exports.

LWC js file is a default export

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

xml file basic attributes?

A

apiVersion - salesforce api version
isExposed - is component exposed to lightning app builder or lightning experience builder
targets - target -
lightning_HomePage,
lightning_AppPage,
lightning_RecordPage,
lightning_ScreenFlow,
lightning_Tab

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Can aura component have lwc? and vice versa

A

Yes. No

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

camel case vs kebab case

A

name of properties/folder/components - camel case, while including a component in the html - kebab case prefixed with namespace or default namespace(i.e.) c

myComponent, MyComponent, c-my-component

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are decorators?

A

They modify behavior of properties and functions.
@api, @track, @wire

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

field vs property

A

interchangeable but to define, field is wrt class and property is wrt the instance of that class

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

@api

A
  • marks a property public
  • public properties can be assigned value in
    html markup by parent component
  • public properties are reactive (all
    properties are reactive in newer releases)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is reactive?

A

A change in value of property makes the component re render as it is observing it. With new release all properties are reactive

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

@track

A

make an element of array or property of object reactive

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

@wire

A

Provision of immutable data from salesforce to component. caches. To mutate that data copy of it needs to be made on which mutations happen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Conditional rendering?

A
  • <template if:true={data}></template>
  • <template if:false={data}></template>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

List rendering?

A
  • <template for:each={contacts} item=’contact’>
  • <li key={contact.id} value={contact.name}></li>
  • </template>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

expression in lwc

A

<template>{propertyName}</template>

.js
@api propertyName

declared in js and used in html

in case of aura properties declared in html and assigned in js

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Which annotation is used to expose an apex method to lwc?

A

@AuraEnabled(Cacheable=true)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

When is cacheable=true mandatory?

A

When apex method called by wire adapter. The returned list is cached.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is caching?

A

Storing data in browser cache so as to make less server calls.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Can cacheable=true used for imperative apex calls?

A

Yes but then the returned data becomes immutable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Types of calls in lwc?

A

wire and imperative

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are lifecycle hooks?

A

LWC provides methods which allows to hook code at different stages of lifecycle of lwc.

24
Q

List lifecycle events and hooks

A

-component created - constructor() - parent to child
-inserted in DOM - connectedCallback() - parent to child
-rendered - render(), renderedCallback() - child to parent
-error occured - errorCallback() - parent to child
-removed from DOM - disconnectedCallback() - parent to child

best resource - https://www.sfdcstop.com/2023/08/lifecycle-hooks-in-lwc.html

25
Q

Lifecycle flow?

A
  • Constructor called on parent
  • parent public properties assigned
  • parent inserted into DOM
  • connectedcallback() called on parent - initialization tasks like fetch data, update cache or listen to events happen here
  • parent rendered
    • constructor called on child
    • child public properties assigned
    • child inserted into DOM
    • connectedCallback() called on child
    • child rendered
    • renderedCallback() called on child
  • renderedCallback() called on parent
  • if error occurs errorCallback() on parent
  • component removed
  • parent disconnectedCallback() - remove listeners
  • child disconnectedCallback()

or

parent private properties assigned
parent constructor
parent public properties assigned
parent connected callback - get initial data from server / listen for events
child private properties assigned
child constructor called
child public properties assigned
child connected callback
child rendered callback
parent rendered callback
parent disconnected
child disconnected

26
Q

render() use

A

render component dynamically or conditionally

27
Q

Is rederedCallback() called once? can be called once?

A

No, called every time a component renders. Yes, we can limit it to be executed once

28
Q

When should setter used instead of connectedCallback() for assigning value to a property?

A

When the component derives it’s state from that property dynamically. / you want some logic to execute whenever that property changes

data of a contact based on contactid

refer lifecycle hook doc for clarity

29
Q

Can connectedCallback fire multiple time?

A

it’s called only once in a lifecycle but if the case is of reordering list by removing and reinserting element that multiple calls happen.

30
Q

api, dom, html, xml, json full form

A

Applicaion programming interface - interface for give and take of data
document object model - defines structure of elements in browser
hypertext markup language - defines structure of elements
xtensible markup language - defines structure of data
javascript object notation - defines structure of data

31
Q

LDS. LMS

A

lightning data service
lightning message service

32
Q

Ways of working with salesforce data?

A
  • LDS
    • lightning base components
      • lightning-record-form
      • lightning-record-view-form
      • lightning-record-edit-form
    • lightning uiapi modules
      • uiRecordapi
      • uiObjectapi
      • uiAppapi
  • Apex
33
Q

What is LDS?

A

Plays role of intermediate between salesforce and browser.
diagram
- browser/client
- LWCs
- LDS
- Salesforce/server
- user interface api
- database

34
Q

cache system of LDS

A

The records loaded in LDS are cached on the browser and shared across all components. LDS does timed interval caching. and reloads cache if data becomes invalid or refreshed in between the time window.

35
Q

Why to import salesforce reference objects and fields?

A

-Salesforce verifies if object and field exist
-If object or field name is renamed then the code doesn’t need to be updated.
-The references doesn’t allow deletion of fields and objects until they are dereferenced inside the code.

36
Q

how to import references to objects and fields?

A

import POSITION_OBJECT from ‘@salesforce/schema/Position__c
import LEVEL_FIELD from ‘@salesforce/schema/Position__c.level__c
same for standard and custom fields but without __c.
import POSITION_HIRINGMANAGER_NAME_FIELD__c from ‘@salesforce/schema/Position__c.HiringManager__r.Name__c’;
import ACCOUNT_OWNER_NAME_FIELD from ‘@salesforce/schema/Account.Owner.Name’;

3 relationship fields allowed, i.e. 4 objects

37
Q

How to get current recordid in salesforce?

A

@api recordid. The flexipage containing component sets this public property to record id.

38
Q

Can we communicate between aura and lwc?

A

Yes
If aura contains lwc then
-aura can set public properties of lwc and using component.find(‘elementid’).public_function_of_lwc it can access lwc’s public functions

-lwc can dispatch custom events to aura with the data attached to detail property.

sharing a javascript file

if they are unrelated then LMS-lightning message channel or platform events can work

39
Q

Details on lifeycle hooks? read if needed

A

https://knowledgepredator.wordpress.com/2020/06/14/life-cycle-hooks-in-lightning-web-components/

40
Q

imperative vs wire apex calls

A

wire called when component loads

imperative execute on demand

41
Q

What is one way and two way binding?

A

this is in context to parent and child component

In one way binding only parent can make changes to child properties, reverse not allowed. Child has only read only access to parent properties, in lwc.

in two way binding two ways changes can take place.

In context of html and js
in one way binding - only js can make html changes, html changes can’t make js changes

In aura, using bounded expression it is achieved, {!v.variable}, {#v.variable}-unbounded

42
Q

which binding lwc and aura have?

A

aura - two way
lwc - one way

43
Q

pro and con of one way binding?

A

pro - more control over flow of data
con - need to write more code

44
Q

Can we make the Wire method to refresh forcefully and bring fresh data from server?

A

Yes, using refreshApex method

refer docs for more if needed

45
Q

How can we communicate from parent component to child component in LWC?

How can we pass data from parent component to child component in LWC ?

Can we call child Component method from parent in LWC?

A

access public property and function of child lwc.

set property in html template
access function using this.template.querySelector(‘c-child-component’).functionName() inside js of parent

46
Q

How can we communicate from child component to parent component in LWC ?

A

By dispatching cuatom events from child js to which parent is listening in html

this.dispatchEvent(new CustomEvent(‘add’,{detail: 3});

<c-child-component onAdd = {parentfunction}></c-child-component>

47
Q

How can we communicate between unrelated components in LWC?

A

old pubsub model

LMS - lightning message service/channel

48
Q

How pub sub in LWC work?

A

there is a pubsub.js file that needs to be included in the lwc directory

use it’s methods in publisher and subscriber components

49
Q

How LMS work?

A

create a messageChannels folder in main/default

inside that create .messageChannel-meta.xml file having all the data properties defined

write respective code in publisher and subscriber components

refer doc for code, if needed

50
Q

LMS vs pubsub

A

LMS enables any component to communicate with each other across any page.

51
Q

Can we include more than one JavaScript file in LWC Component?

Can we include more than one HTML file in LWC Component?

A

yes in both cases

52
Q

How to include LWC Component inside VF Page?

A

We can include our lwc component inside aura component. Then use lightning out feature to include that aura lightning component inside VF page

53
Q

match aura and lwc file structure

A

file.cmp - file.html
fileController.js - file.js
fileHelper.js - file.js
fileRenderer - file.js
file.design - file.js-meta.xml
file.css - file.css

54
Q

developer requirements for LWC

A

salesforce DX
salesforce CLI
VS code with salesforce extension

55
Q

Steps for creating and deploying lwc project

A

in vs command palette SFDX: create project, provide namespace or keep default

right click main/default and SFDX: create LWC

in command p. SFDX: authorize org

right click on lwc component and SFDX:deploy to org

add component using lightning app builder and activate it

56
Q

Development choice between lwc aura

A

If completely new functionality required then create lwc

if revamp existing aura them it’s child components also need to be migrated

if aura is needed them make them communicate

57
Q
A

Salesforce (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions