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
0 Comments