売上予測ページのコンポーネントの作成

Lightning 売上予測ページで使用可能なカスタム Lightning Web コンポーネントを作成します。

コンポーネントの設定ファイルで、lightning__ForecastingPage 対象を追加し、<isExposed> を true に設定します。

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>55.0</apiVersion>
4    <isExposed>true</isExposed>
5    <targets>
6        <target>lightning__AppPage</target>
7        <target>lightning__RecordPage</target>
8        <target>lightning__HomePage</target>
9        <target>lightning__ForecastingPage</target>
10    </targets>
11    <targetConfigs>
12        <targetConfig targets="lightning__ForecastingPage">
13            <property type="String" name="forecastingTypeId" label="forecast ID"  />
14        </targetConfig>
15    </targetConfigs>
16</LightningComponentBundle>

対象の lightning__ForecastingPage はコンポーネントにプロパティを追加します。コンポーネントの JavaScript ファイルでプロパティを宣言します。

lightning__ForecastingPage 対象がサポートするプロパティの一覧は、_『Lightning Aura コンポーネント開発者ガイド』_の「売上予測ページのコンポーネントの作成」を参照してください。

1// custom.js
2import { LightningElement, api } from "lwc";
3import {
4  publish,
5  subscribe,
6  unsubscribe,
7  createMessageContext,
8  releaseMessageContext,
9} from "lightning/messageService";
10import SAMPLEMC from "@salesforce/messageChannel/lightning__forecasting_flexipageUpdated";
11
12export default class LMCWebComponentDemo extends LightningElement {
13  receivedMessage = "";
14  myMessage = "";
15
16  _forecastingTypeId;
17
18  @api
19  get forecastingTypeId() {
20    return this._forecastingTypeId;
21  }
22
23  set forecastingTypeId(value) {
24    this._forecastingTypeId = value;
25  }
26
27  subscription = null;
28  context = createMessageContext();
29
30  constructor() {
31    super();
32  }
33
34  handleChange(event) {
35    this.myMessage = event.target.value;
36  }
37
38  publishMC() {
39    const message = {
40      messageToSend: this.myMessage,
41      sourceSystem: "From LWC",
42    };
43    publish(this.context, SAMPLEMC, message);
44  }
45
46  subscribeMC() {
47    if (this.subscription) {
48      return;
49    }
50    this.subscription = subscribe(this.context, SAMPLEMC, (message) => {
51      this.displayMessage(message);
52    });
53  }
54
55  unsubscribeMC() {
56    unsubscribe(this.subscription);
57    this.subscription = null;
58  }
59
60  displayMessage(message) {
61    this.receivedMessage = message ? JSON.stringify(message, null, "\t") : "no message payload";
62  }
63
64  disconnectedCallback() {
65    releaseMessageContext(this.context);
66  }
67}

所有者や売上予測種別など、Lightning 売上予測ページが変更されると、ページヘッダーによって Lightning メッセージが公開されます。lightning__forecasting_flexipageUpdated LightningMessageChannel を登録することで、Lightning 売上予測ページヘッダーの変更に基づいてカスタムコンポーネントを更新できます。

Lightning 売上予測ページでは、カスタムコンポーネントから公開される標準イベントやカスタムイベントをサポートしていません。

コンポーネントのテンプレートのプロパティにアクセスします。

1<!-- custom.html -->
2<template>
3  <lightning-card title="LMC Web Component" icon-name="custom:custom14">
4    <div class="slds-m-around_medium">
5      <p>MessageChannel: MyMessageChannel__c</p>
6      <br />
7    </div>
8    <!-- Default/basic -->
9    <div class="slds-p-around_medium lgc-bg">
10      <lightning-input
11        type="text"
12        label="Enter some text"
13        value={myMessage}
14        onchange={handleChange}
15      ></lightning-input>
16      <lightning-button label="Publish" onclick={publishMC}></lightning-button>
17    </div>
18
19    <div class="slds-p-around_medium lgc-bg">
20      <lightning-button label="Subscribe" onclick={subscribeMC}></lightning-button>
21      <lightning-button label="Unsubscribe" onclick={unsubscribeMC}></lightning-button>
22      <p>Latest Message Received</p>
23      <lightning-formatted-text value={receivedMessage}></lightning-formatted-text>
24    </div>
25
26    <div class="slds-p-around_medium lgc-bg">
27      <p>forecastingTypeId</p>
28      <lightning-formatted-text value={forecastingTypeId}></lightning-formatted-text>
29    </div>
30  </lightning-card>
31</template>

カスタムコンポーネントを正しく表示するには、可変幅に合わせてカスタムコンポーネントを調整できるようにします。

Note

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。