メッセージチャネルの登録および登録解除

1<!-- lmsSubscriberWebComponent.html -->
2<template>
3  <lightning-card title="LMSSubscriberWebComponent" icon-name="custom:custom30">
4    <div class="slds-m-around_medium">
5      <template lwc:if={Picture__c}>
6        <img src={Picture__c} alt="Profile photo" />
7      </template>
8      <p>{Name}</p>
9      <p>{Title}</p>
10      <p>
11        <lightning-formatted-phone value={Phone}></lightning-formatted-phone>
12      </p>
13      <p>
14        <lightning-formatted-email value={Email}></lightning-formatted-email>
15      </p>
16    </div>
17  </lightning-card>
18</template>

1// lmsSubscriberWebComponent.js
2import { LightningElement, wire } from "lwc";
3import { getRecord, getFieldValue } from "lightning/uiRecordApi";
4import { ShowToastEvent } from "lightning/platformShowToastEvent";
5import { reduceErrors } from "c/ldsUtils";
6
7// Import message service features required for subscribing and the message channel
8import {
9  subscribe,
10  unsubscribe,
11  APPLICATION_SCOPE,
12  MessageContext,
13} from "lightning/messageService";
14import recordSelected from "@salesforce/messageChannel/Record_Selected__c";
15
16import NAME_FIELD from "@salesforce/schema/Contact.Name";
17import TITLE_FIELD from "@salesforce/schema/Contact.Title";
18import PHONE_FIELD from "@salesforce/schema/Contact.Phone";
19import EMAIL_FIELD from "@salesforce/schema/Contact.Email";
20import PICTURE_FIELD from "@salesforce/schema/Contact.Picture__c";
21
22const fields = [NAME_FIELD, TITLE_FIELD, PHONE_FIELD, EMAIL_FIELD, PICTURE_FIELD];
23
24export default class LmsSubscriberWebComponent extends LightningElement {
25  subscription = null;
26  recordId;
27
28  Name;
29  Title;
30  Phone;
31  Email;
32  Picture__c;
33
34  @wire(getRecord, { recordId: "$recordId", fields })
35  wiredRecord({ error, data }) {
36    if (error) {
37      this.dispatchToast(error);
38    } else if (data) {
39      fields.forEach((item) => (this[item.fieldApiName] = getFieldValue(data, item)));
40    }
41  }
42
43  @wire(MessageContext)
44  messageContext;
45
46  // Encapsulate logic for Lightning message service subscribe and unsubsubscribe
47  subscribeToMessageChannel() {
48    if (!this.subscription) {
49      this.subscription = subscribe(
50        this.messageContext,
51        recordSelected,
52        (message) => this.handleMessage(message),
53        { scope: APPLICATION_SCOPE },
54      );
55    }
56  }
57
58  unsubscribeToMessageChannel() {
59    unsubscribe(this.subscription);
60    this.subscription = null;
61  }
62
63  // Handler for message received by component
64  handleMessage(message) {
65    this.recordId = message.recordId;
66  }
67
68  // Standard lifecycle hooks used to subscribe and unsubsubscribe to the message channel
69  connectedCallback() {
70    this.subscribeToMessageChannel();
71  }
72
73  disconnectedCallback() {
74    this.unsubscribeToMessageChannel();
75  }
76
77  // Helper
78  dispatchToast(error) {
79    this.dispatchEvent(
80      new ShowToastEvent({
81        title: "Error loading contact",
82        message: reduceErrors(error).join(", "),
83        variant: "error",
84      }),
85    );
86  }
87}