カスタムテキストコンポーネントを標準のフローコンポーネントに反応するように設定します。
customText.js の例に示しているように、@api デコレータを使用して公開項目を作成します。.js-meta.xml ファイルに、customText.js-meta.xml の例で示しているように、適切な種別の対象設定を追加します。flow-support コンポーネントで定義された FlowAttributeChange イベントを起動します。リアクティビティを機能させるためには、FlowAttributeChange のイベント名が公開項目の名前と一致する必要があります。フローランタイムの性質上、setter メソッドは FlowAttributeChange イベントが起動された後に呼び出され、リアクティビティによって公開項目が変更された場合にも呼び出されます。1<!-- customText.html -->
2<template>
3 <lightning-input type="text" label="This is custom text" onchange={handleInputChange}>
4 </lightning-input>
5</template>1// customText.js
2import LightningElement, api, track } from 'lwc';
3import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
4
5export default class customText extends LightningElement {
6 @track _input;
7
8 @api
9 set customTextValue(input) {
10 if (input) {
11 this._input = input;
12 }
13 };
14 get customTextValue() {
15 return this._input;
16 }
17
18 handleInputChange(event) {
19 const attributeChangeEvent = new FlowAttributeChangeEvent('customTextValue', event.target.value);
20 this.dispatchEvent(attributeChangeEvent);
21 }
22}1// customText.js-meta.xml
2<?xml version="1.0" encoding="UTF-8"?>
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4 <apiVersion>52.0</apiVersion>
5 <isExposed>true</isExposed>
6 <masterLabel>Custom Text</masterLabel>
7 <description>Custom Text Example</description>
8 <targets>
9 <target>lightning__FlowScreen</target>
10 </targets>
11<targetConfigs>
12 <targetConfig targets="lightning__FlowScreen">
13 <property name="customTextValue" label="Custom Text Value" type="String" />
14 </targetConfig>
15</targetConfigs>
16</LightningComponentBundle>The Japanese Summer '24 guide is now live
j