Lightning Web Components: Quick Actions with LWC and Aura

In such scenarios where requirement states to show some prepopulated fields while creating record from quick actions.

As of now (Winter 20), we can't use directly LWC in Quick Actions. To use it first we need it to wrap LWC in Aura component and then later use that Aura component in Quick Action.

Components:

1. baseContactAuraComp (Base Parent Comp -Aura)
2. newContactCreateForm (Child Comp -LWC)

Quick Action Button on Account: Select the create new record option and action type as Lightning Component.

Prepopulated Fields: Account and Appointment Set.

** components are created as a part of proof of concept. it can be modified and optimized as per requirement.**

Snippets:

baseContactAuraComp.cmp

<aura:component implements="force:lightningQuickAction, force:hasRecordId">
<c:newContactCreateForm recordId="{!v.recordId}" onclosepopup="{!c.navToNewRecord }"></c:newContactCreateForm>
</aura:component>   

baseContactAuraCompController.js

({
navToNewRecord : function(component, event, helper) {
var recordId = event.getParam('recordId');
console.log('recordId'+recordId);
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": recordId,
"slideDevName": "related"
});
navEvt.fire();
}
})

newContactCreateForm.html

<template>
<lightning-card>
<lightning-layout>
<lightning-layout-item size="6" padding="around-small">
<lightning-card title="Create A New Contact">
<lightning-input name="First Name" label="First Name" onchange={contactFirstNameChangeHandler}></lightning-input>
<lightning-input name="Last Name" label="Last Name" onchange={contactLastNameChangeHandler}></lightning-input>
<lightning-input name="Account Name" value={accountName} label="Account"></lightning-input>
<lightning-input name="Appointment Set" label="Appointment Set" type="checkbox" data-id="checkbox"></lightning-input>
<lightning-button label="Save" onclick={createContact} variant="brand"></lightning-button>
</lightning-card>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>

newContactCreateForm.js

import { LightningElement, api, wire, track } from 'lwc';
import {getRecord, createRecord} from "lightning/uiRecordApi";
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
const fieldArray= ['Account.Id','Account.Name','Account.Appointment_Set__c'];
export default class NewContactCreateForm extends LightningElement {
@api recordId;
@track accountId;
@track contactFirstName;
@track contactLastName;
@track accountName;
@track appointmentSet;
@wire (getRecord, {recordId: '$recordId',fields: fieldArray})
result({data,error}){
if(data){
console.log('data.Name:'+data.fields.Name.value);
console.log('data.Appointment_Set__c'+data.fields.Appointment_Set__c.value);
this.accountId = data.fields.Id.value;
this.accountName = data.fields.Name.value;
const checkbox = this.template.querySelectorAll('[data-id="checkbox"]');
console.log('checkbox>>'+checkbox);
if(data.fields.Appointment_Set__c.value){
checkbox.checked = true;
}
this.appointmentSet = data.fields.Appointment_Set__c.value;
} else if(error){
this.showToast('ERROR', error.body.message, 'error');
}
}
createContact(event){
event.preventDefault();
const fields = { 'FirstName':this.contactFirstName,'LastName':this.contactLastName, 'AccountId':this.accountId, 'Appointment_Set__c':this.appointmentSet};
const recordInput = {apiName: 'Contact',fields};
if(window.confirm("Do you really want to save it?")){
createRecord(recordInput).then(response =>{
console.log('Contact has been created:', response.id);
const recordId= response.id;
this.showToast('SUCCESS','Contact is created'+response.id, 'success');
const closePopupEvent = new CustomEvent('closepopup', { detail: {recordId}});
this.dispatchEvent(closePopupEvent);
}).catch(error=>{
this.showToast('ERROR', error.body.message, 'error');
console.log('Error in creating Contact:', error.body.message);
})
}
}

contactFirstNameChangeHandler(event){
this.contactFirstName = event.target.value;
}

contactLastNameChangeHandler(event){
this.contactLastName = event.target.value;
}

showToast(title, message, variant){
const evt= new ShowToastEvent({
title: title,
message: message,
variant: variant,
});
this.dispatchEvent(evt);
}
}