Salesforce meetup | Lightning Web Component

ACCENTURE
TECHNOLOGY
MEETUP
A GENERIC RELATED
LIST IN LIGHTNING
WEB COMPONENT
Laura Fulmer
Salesforce Developer

ABOUT THE PRESENTER
Laura Fulmer
laura.fulmer@accenture.com
Salesforce Developer
Certifications:
– Platform App Builder
– Platform Developer I
– Einstein Analytics and Discovery Consultant

AGENDA
Copyright © 2020 Accenture. All rights reserved. 3
About the LWC
• What are these components?
• Aura vs. LWC
• Parts of the package
• Advantages and considerations
Demo
• Wrapper Class
• Dynamic query
• Flatten the object structure
• Grouping and Concatenating

WHAT ARE LIGHTNING WEB
COMPONENTS?
• A new programming model for building Lightning components
that leverages the web standards breakthroughs of 2014-2019
• LWC is an implementation of the W3C’s Web Components
standards
• Provides a layer of specialized Salesforce services on top of the
core stack
• Can coexist and interoperate with the Aura model
• Unparalleled performance

AURA VS. LWC
• Aura and LWC components can coexist
and interoperate in the same org and
on same page
• They can share the same
– Underlying services
– Base Lightning components
– High leves services
• Aura can include LWC but LWC cannot
include Aura
Lightning Components
Security
Lightning Data Service
Base Lightning Components
Custom component
model
Custom components
Rendering optimization
Custom modules
Custom events
Web components
Templates
Custom elements
Shadow DOM
Modules
Standard events
Events
Standard elements
Rendering
ECMAScript 5 ECMAScript 7
Aura
Programming Model
Lightning Web Components
Programming Model

AURA VS. LWC
FILE MAPPING IN THE COMPONENT BUNDLE

CONFIGURATION FILE
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<objects>
<object>Account</object>
</objects>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage, lightning__HomePage">
<property name="subject" type="String" default=""
label="Name of the person you want to greet"/>
<property name="greeting" type="String" default="" label="Greeting" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
<design:component label="Hello World">
<design:attribute name="subject" label="Subject"
description="Name of the person you want to greet" />
<design:attribute name="greeting" label="Greeting" />
</design:component>
LWC Aura

JAVASCRIPT
({
count : function(component, event, helper){
let greeting = component.get("v.greeting");
alert(greeting.length + " letters");
}
})
import { LightningElement, track } from 'lwc';
export default class HelloLwc extends LightningElement {
@track greeting = 'World';
handleChange(event){
this.greetig = event.target.value;
}
count(){
alert(this.greeting.length + " letters");
}
}
LWC Aura

HTML
<template>
<lightning-card title="Hello_LWC">
<lightning-button label="count" onclick={count}>
</lightning-button>
<div class="slds-m-around_medium">
<p>Hello, {greeting}!</p>
<lightning-input label="Name" value={greeting}
onchange={handlechange}>
</lightning-input>
</div>
</lightning-card>
</template>
<aura:component
implements="flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="greeting" type="String">
<lightning:card title="Hello_Aura">
<aura:set attribute="actions">
<lightning:button label="count" onclick="{!c.count}"/>
</aura:set>
<div class="slds-m-around_medium">
<p>Hello, {!v.greeting}!</p>
<lightning:input label="Name" value="{!v.greeting}"/>
</div>
</lightning:card>
</aura:component>
LWC Aura

CSS
• No need for .THIS
• Standard CSS syntax
• To override lightning design use
loadStyle and static resource
• CSS styles defined in a parent
component don’t reach into a child.
.boxLarge {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: #344A5F;
}
.boxSmall {
width: 100px;
height: 100px;
margin: auto;
background-color: #F0F1F2;
}

LIFECYCLE HOOKS
constructor() called parent
connectedCallback() called
on parent
render() called parent
renderedCallback() called on
parent
constructor() called on child
connectedCallback() called
on child
render() called on child
renderedCallback() called on
child
Properties
assigned
Parent Component Child Component
1
2
3
8 7
6
5
4
Properties
assigned
Parent created

12Copyright © 2020 Accenture. All rights reserved.
ADVANTAGES OF THE LWC
BETTER
PERFORMANCE
Faster loading sites
MORE STANDARD
Built-in browser security
features, more out-of-
the-box solutions and
less customization
BETTER BROWSER
COMPATIBILITY
More consistency
SERVICE
COMPONENT
More reusable and
efficient components
without UI elements
EASY TO LEARN
Based on native web
standards, no added
abstraction layer

13Copyright © 2020 Accenture. All rights reserved.
CONSIDERATIONS OF THE
USAGE OF LWC
UNSUPPORTED
EXPERIENCES AND
TOOLS
APIs, Actions and
Chatter extension
MOBILE SDK DOESN’T
SUPPORT IT
Wrapping it in Aura is
also unsupported
CANNOT CONTAIN
AURA
This needs to be
considered upon
planning

OBJECT STRUCTURE
ContactLead
Reservation__c
Market__c Space__c

The dynamic query is built on the information from the Admin user
SELECT [Field Set name] FROM [Child object API name]
WHERE [Parent field API name on child object] = recordId
AND [Additional filter in SOQL format]
SORT BY [API name of the field that is the base of sorting]
[Sort Direction]
DYNAMIC QUERY

public class lightningTableColumnWrapper {
@AuraEnabled
public string label {get;set;}
@AuraEnabled
public String fieldName {get;set;}
@AuraEnabled
public string type {get;set;}
@AuraEnabled
public boolean sortable {get;set;}
}
WRAPPER CLASS
public class lightningTableWrapper{
@AuraEnabled
public List<sObject>
tableRecord {get;set;}
@AuraEnabled
public List<lightningTableColumnWrapper>
tableColumn {get;set;}
@AuraEnabled
public Map<String,String>
referenceValMap{get;set;}
}

FLATTEN THE OBJECT STRUCTURE FOR THE
DATATABLE I

changeIdToName(output) {
for (let i = 0; i < this.totalCount; i++) {
let currentObject = {};
Object.assign(currentObject, this.resp.tableRecord[i]);
currentObject.Id = '/' + currentObject.Id;
for (let j = 0; j < Object.keys(currentObject).length; j++) {
let currentField = Object.keys(currentObject)[j];
if (typeof currentObject[currentField] === 'object') {
const newVal = currentObject[currentField].Id ? ('/' + currentObject[currentField].Id) : null;
this.flattenStructure(currentObject, currentField + '_', currentObject[currentField]);
currentObject[currentField] = newVal;
}
}
output.push(currentObject);
}
}
FLATTEN THE OBJECT STRUCTURE FOR THE
DATATABLE II
flattenStructure(topObject, prefix, toBeFlattened) {
// eslint-disable-next-line guard-for-in
for (const prop in toBeFlattened) {
const curVal = toBeFlattened[prop];
if (typeof curVal === 'object') {
this.flattenStructure(topObject, prefix + prop + '_', curVal);
} else {
topObject[prefix + prop] = curVal;
}
}
}

groupFields(output) {
let groups = {};
let groupField = this.groupBy;
groups = output.reduce(function (initialValue, currentValue) {
initialValue[currentValue[groupField]] = initialValue[currentValue[groupField]] || [];
let currentRecord = {};
Object.assign(currentRecord, currentValue);
initialValue[currentValue[groupField]].push(currentRecord);
return initialValue;
}, Object.create(null));
return groups;
}
GROUPING FIELDS

concatenateFields(groups, cols) {
let concatArray = [];
for (let i = 0; i < Object.keys(groups).length; i++) {
this.totalCount = Object.keys(groups).length;
let currentGroupName = Object.keys(groups)[i];
let currentGroup = groups[currentGroupName];
//Looping over the columns of the current group
for (let j = 0; j < cols.length; j++) {
let currentField = cols[j].fieldName;
//Looping over the records of the current group
for (let l = 0; l < currentGroup.length; l++) {
//If the value in the first line is undefined, make it equal with the
current value
if (currentGroup[0][currentField] === undefined) {
currentGroup[0][currentField] = currentGroup[l][currentField];
}
CONCATENATE VALUES
//If the current value is NOT undefined or the first value does not
contain it, concatenate it to the first one
if (currentGroup[l][currentField] !== undefined
&& !currentGroup[0][currentField]
.includes(currentGroup[l][currentField])) {
currentGroup[0][currentField] +=
', ' + currentGroup[l][currentField];
}
}
}
concatArray.push(currentGroup[0]);
}
return concatArray;
}

USEFUL LINKS
Component Reference:
developer.salesforce.com/docs/component-library/overview/components
LWC sample apps:
trailhead.salesforce.com/sample-gallery
Salesforce Lightning Design System:
lightningdesignsystem.com
Supported Salesforce experiences and tools in LWC:
developer.salesforce.com/docs/component-
library/documentation/en/lwc/lwc.get_started_supported_experiences
Open source base components:
github.com/salesforce/base-components-recipes

Salesforce meetup | Lightning Web Component

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Semelhante a Salesforce meetup | Lightning Web Component

Semelhante a Salesforce meetup | Lightning Web Component (20)

Mais de Accenture Hungary

Mais de Accenture Hungary (13)

Último

Último (20)

Salesforce meetup | Lightning Web Component