Salesforce recently announced lightning web components to be GA feature. In a major effort to standardize the UI web developments, lightning web components (LWC)are a major foot forward. Interestingly, Salesforce is not moving away from the Aura framework, and lightning web components will coexist and interact with each other. To get a better understanding of this new programming model, we will try to create a quick action using LWC model
Entire code is available at this Github Location
Use Case – Create a quick action on the contact object, which will display sample contact fields values (name, email, phone, title).
Design – To demonstrate the working of this functionality, we will create a quick action. Quick action will call the lightning component. Lightning component will pass the record id of contact to the lightning web component. Finally Lightning web component will make standard call to fetch contact details.
- Quick Action – To be created on Contact Object
- Lightning Component (Aura) – Quick action will execute
the this component, which in turn will call the lightning web component - Lightning Web Component
Quick Action
Quick Action configuration is standard and calls the lightning component.
Lightning Component
<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
<c:contactDetailsLWC recordId="{!v.recordId}"/>
</aura:component>
As you can see in the second line we are passing the record id to the Lightning web component
Lightning Web Component
// ContactDetailsLWC.html
<template>
<lightning-card
title="Contact Information"
icon-name="standard:contact"
>
<template if:true={contact.data}>
<lightning-layout vertical-align="center">
<lightning-layout-item padding="around-small">
<p>Name : {name}</p>
<p>Account :{accountname}</p>
<p>Phone :{phone}</p>
<p>Email :{email}</p>
</lightning-layout-item>
</lightning-layout>
</template>
</lightning-card>
</template>
//contactDetailsLWC.js
import { LightningElement,api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import TITLE_FIELD from '@salesforce/schema/Contact.Title';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Contact.Account.Name';
const fields = [NAME_FIELD, TITLE_FIELD, PHONE_FIELD, EMAIL_FIELD,ACCOUNT_NAME_FIELD];
export default class ContactDetailsLWC extends LightningElement {
@api recordId;
@api objectApiName = 'Contact';
accountName = NAME_FIELD;
@wire(getRecord, { recordId: '$recordId', fields })
contact;
get name() {
return getFieldValue(this.contact.data, NAME_FIELD);
}
get accountname() {
return getFieldValue(this.contact.data, ACCOUNT_NAME_FIELD);
}
get title() {
return getFieldValue(this.contact.data, TITLE_FIELD);
}
get phone() {
return getFieldValue(this.contact.data, PHONE_FIELD);
}
get email() {
return getFieldValue(this.contact.data, EMAIL_FIELD);
}
}
In the javascript file,
