Email Quick Action with a Pre-Email Screen and Lightning Record Picker in Lightning Web Component | Salesforce

Kapil September 08, 2024


 Hi there, in this blog you will be able to understand the scenario of having a Pre-Email screen and the code snippet of doing the same.

If you are following my Videos/Blog then previously I had created a video on Send Email as Quick Action and the other one was on Lightning Record Picker. If you are new to this blog you can check the previous videos links below: 

1. Send Email as Quick Action : https://youtu.be/PoaWHVuxlEE?si=x4aSNhZ6N50aaiiB

2. Lightning Record Picker : https://youtu.be/zZ1OJq5iHi4?si=tK6_ukRYAe_W_GXP


Scenario : We need to create a Email Quick Action on Account object which should give us a list of related Contacts and user should be having option to pick the Contact and send the email.

Solution : As a solution we will build a LWC Quick Action which will be having Lightning Record Picker as a Pre-Screen so that user can select the Contact. Once the Contact is selected we will redirect user to Email Composer with selected contact email.

Below is the code snippet to achieve the same - 

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div class="slds-m-around_medium">
    <lightning-record-picker
      lwc:ref="recordPicker"
      object-api-name="Contact"
      placeholder="Search..."
      label="Select a record"
      matching-info={matchingInfo}
      display-info={displayInfo}
      filter={filter}
      onchange={handleChange}
    >
    </lightning-record-picker>
  </div>
</template>


JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { LightningElement, api, wire } from "lwc";
import { NavigationMixin } from "lightning/navigation";
import { getRecord } from "lightning/uiRecordApi";
import EMAIL_FIELD from "@salesforce/schema/Contact.Email";
import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
import { CloseActionScreenEvent } from "lightning/actions";

const fields = [EMAIL_FIELD];

export default class EmailQuickActionV1 extends NavigationMixin(
  LightningElement
) {
  @api recordId;
  @api selectedRecordId;
  contact;
  email;

  matchingInfo = {
    primaryField: { fieldPath: "Name" },
    additionalFields: [{ fieldPath: "Title" }]
  };
  displayInfo = {
    primaryField: "Name",
    additionalFields: ["Title", "Email"]
  };

  get filter() {
    return {
      criteria: [
        {
          fieldPath: "AccountId",
          operator: "eq",
          value: this.recordId
        }
      ]
    };
  }
  handleChange(event) {
    this.selectedRecordId = event.detail.recordId;
    console.log("🚀 ~ this.selectedRecordId:", this.selectedRecordId);
  }

  @wire(getRecord, { recordId: "$selectedRecordId", fields })
  wiredContact({ error, data }) {
    if (error) {
      console.log("###Error: " + error);
    } else if (data) {
      this.contact = data;
      this.email = this.contact.fields.Email.value;
      console.log("🚀 ~ this.email:", this.email);
      this.triggerEmail();
    }
  }
  triggerEmail() {
    var pageRef = {
      type: "standard__quickAction",
      attributes: {
        apiName: "Global.SendEmail"
      },
      state: {
        recordId: this.recordId,
        defaultFieldValues: encodeDefaultFieldValues({
          HtmlBody: "Default values from Quick Action.",
          Subject: "Hello from Salesforce Bolt",
          ToAddress: this.email
        })
      }
    };
    this[NavigationMixin.Navigate](pageRef);
    this.dispatchEvent(new CloseActionScreenEvent());
  }
}


js-meta.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
     <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
      </targets>
      <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
          <actionType>ScreenAction</actionType>
        </targetConfig>
      </targetConfigs>
</LightningComponentBundle>


Output


Checkout Complete Video on YouTube

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments