カスタムプロパティエディタの JavaScript インターフェース

カスタムプロパティエディタは、次の JavaScript 関数を使用して Flow Builder と通信します。

inputVariables

inputVariables インターフェースは、FlowScreenField メタデータに関するデータを提供します。

1_inputVariables = [];
2
3@api
4get inputVariables() {
5    return this._inputVariables;
6}
7
8// Set a field with the data that was stored from the flow.
9set inputVariables(variables) {
10    this._inputVariables = variables || [];
11}

_inputVariables のデータ構造には、各入力変数の名前、値、データ型が含まれます。

1[{
2    name: 'volume',
3    value: '10',
4    valueDataType: 'Number'
5}]

フローメタデータについての詳細は、『フローメタデータ API』を参照してください。

builderContext

builderContext インターフェースは、フローの要素およびリソースに関すデータを提供します。たとえば、screens および actionCalls データ構造には、入力変数の名前と型が含まれます。Flow Builder で、システム管理者はカスタムプロパティエディタの画面コンポーネントの入力属性の入力として他の要素およびリソースに関するデータを使用できます。

builderContext インターフェースからカスタムプロパティエディタに渡されるデータ構造には、フローの要素およびリソースが含まれます。

1{
2    actionCalls: [],
3    apexPluginCalls: [],
4    constants: [],
5    formulas: [],
6    recordCreates: [],
7    recordDeletes: [],
8    recordLookups: [],
9    recordUpdates: [],
10    screens: [],
11    stages: [],
12    textTemplates: [],
13    variables: []
14}

フローメタデータについての詳細は、『フローメタデータ API』を参照してください。

次の例では、開発者はカスタムフロー画面コンポーネントとそのカスタムプロパティエディタを作成します。Flow Builder で、システム管理者はコンボボックスを使用して、メールの送信者の名前を設定します。ユーザがフローを実行すると、メールに選択した名前がフロー画面に表示されます。

次の HTML、JavaScript、設定ファイルは、カスタムフロー画面コンポーネントを定義します。

1<!--htmlEmail.html-->
2<template>
3  <p>Selected sender's name is: {senderName}</p>
4</template>

次の JavaScript ファイルは、senderName 公開プロパティを定義します。

1// htmlEmail.js
2
3import { LightningElement, api } from "lwc";
4
5export default class HTMLEmail extends LightningElement {
6  @api senderName;
7}

次の設定ファイルは、カスタムプロパティエディタを登録します。

1<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
2    <apiVersion>49.0</apiVersion>
3    <isExposed>true</isExposed>
4    <targets>
5        <target>lightning__FlowScreen</target>
6    </targets>
7    <masterLabel>HTMLEmail</masterLabel>
8    <targetConfigs>
9        <targetConfig targets="lightning__FlowScreen" configurationEditor="c-html-email-editor">
10            <property name="senderName" type="String" role="inputOnly" />
11        </targetConfig>
12    </targetConfigs>
13</LightningComponentBundle>

次の HTML、JavaScript、設定ファイルは、画面コンポーネントのカスタムプロパティエディタを定義します。

次の HTML ファイルは、Flow Builder のカスタムプロパティエディタの UI を定義します。UI には、コンボボックスベースの Lightning Web コンポーネントが表示されます。

1<!--htmlEmailEditor.html-->
2<template>
3  <div class="slds-p-around_xx-small">
4    <lightning-combobox
5      name="senderName"
6      label="Sender Display Name"
7      value={senderName}
8      placeholder="Select Sender"
9      options={options}
10      onchange={handleChange}
11    >
12    </lightning-combobox>
13
14    <p class="slds-p-top_xx-small">Selected sender's name is: {senderName}</p>
15  </div>
16</template>

JavaScript クラスは、カスタムプロパティエディタが初期化されたときに Flow Builder からフローメタデータのコピーを受信します。システム管理者がカスタムプロパティエディタで更新を行うと、イベントがディスパッチされて変更が Flow Builder に反映されます。

1// htmlEmailEditor.js
2import { LightningElement, api } from "lwc";
3export default class HtmlEmailEditor extends LightningElement {
4  @api
5  inputVariables;
6
7  @api
8  builderContext;
9
10  get senderName() {
11    const param = this.inputVariables.find(({ name }) => name === "senderName");
12    return param && param.value;
13  }
14
15  get options() {
16    const variables = this.builderContext.variables;
17    return variables.map(({ name, value }) => ({
18      label: name,
19      value: value.stringValue,
20    }));
21  }
22
23  handleChange(event) {
24    if (event && event.detail) {
25      const newValue = event.detail.value;
26      const valueChangedEvent = new CustomEvent("Configuration_editor_input_value_changed", {
27        bubbles: true,
28        cancelable: false,
29        composed: true,
30        detail: {
31          name: "senderName",
32          newValue,
33          newValueDataType: "String",
34        },
35      });
36      this.dispatchEvent(valueChangedEvent);
37    }
38  }
39}

senderName メソッドは、senderName インターフェースを使用して保存された inputVariables 入力変数に関する情報を返します。options メソッドは、builderContext インターフェースメソッドを使用して保存された差し込み項目のリストを返します。カスタムプロパティエディタには、画面コンポーネントの入力属性の入力値として差し込み項目が表示されます。

コンボボックスが表示されているカスタムプロパティエディタ

elementInfo

elementInfo インターフェースは、カスタムプロパティエディタを呼び出しているカスタムフロー画面コンポーネントやカスタムアクションに関するデータを提供します。このインターフェースを使用して、画面コンポーネントやアクションの異なるインスタンスを区別します。

次の例では、フローメタデータを _elementInfo に保存していますが、項目には任意の名前を付けることができます。

1_elementInfo = {};
2@api
3get elementInfo() {
4    return this._elementInfo;
5}
6
7// Set a local variable with the data that was stored from flow.
8set elementInfo(info) {
9    this._elementInfo = info || {};
10}

_elementInfo のデータ構造には、フローメタデータのフロー要素の API 参照名および種別が含まれます。

1{
2    apiName: 'slider',
3    type: 'Screen'
4}

種別の有効な値は次のとおりです。

Screen — 画面要素
Action — アクション要素

validate

validate インターフェースを使用して、カスタムプロパティエディタのカスタム検証を実行します。フロー管理者が Flow Builder の画面エディタで [完了] をクリックすると、Flow Builder は各カスタムプロパティエディタの validate 関数を評価します。関数で key および errorString データ構造が返されると、画面エディタにエラー数が表示されます。

Flow Builder には、エラー数のみが表示されます。カスタムプロパティエディタにエラー文字列を表示するには、コードを記述します。

Note

次の例では、データを validity 項目に保存していますが、任意の項目名を使用できます。カスタムプロパティエディタにエラー文字列を表示するために、sliderCmp を使用して、エラー文字列を照会、設定、レポートしています。

1@api
2validate() {
3    const sliderCmp = this.template.querySelector('lightning-slider');
4    const validity = [];
5    if (this.volume < 0 || this.volume > 100) {
6        sliderCmp.setCustomValidity('The slider range is between 0 and     100.');
7        validity.push({
8            key: 'Slider Range',
9            errorString: 'The slider range is between 0 and 100.',
10        });
11    } else {
12        sliderCmp.setCustomValidity('');
13    }
14    sliderCmp.reportValidity();
15    return validity;
16}

genericTypeMappings

genericTypeMappings データ構造には、各入力の名前と値が含まれます。typeName は、汎用 sObject 入力の名前です (例: ‘T__param1’)。typeValue は、汎用 sObject 入力の特定値です (例: Account)。

1[{
2    typeName: 'T__param1',
3    typeValue: 'Account'
4}]

イベント種別

入力値の変更を Flow Builder にレポートするには、カスタムプロパティエディタの handleChange 関数からイベントをディスパッチします。bubbles および composed を true に設定します。

イベント種別の有効な値は次のとおりです。

configuration_editor_input_value_changed — 入力値が変更されたときにディスパッチされるイベント種別。
configuration_editor_input_value_deleted — 入力値が削除されたときにディスパッチされるイベント種別。
configuration_editor_generic_type_mapping_changed — 汎用 sObject 入力値が変更されたときにディスパッチされるイベント種別。

次の detail プロパティは、変更をレポートするための入力を定義します。

name — 画面コンポーネントの JavaScript クラスの入力変数。
newValue — 入力の新しい値。
newValueDataType — 入力の新しいデータ型。
typeName — 画面コンポーネントの JavaScript クラスまたは呼び出し可能なメソッドの Apex クラスの汎用 sObject 入力。画面コンポーネントのカスタムプロパティエディタで typeName を参照するには、propertyType サブタグの name 属性を参照します。値は中括弧で囲む必要があります (例: property type="{T}")。プロパティを汎用 sObject コレクションデータ型として定義するには、[] を追加します (例: property type="{T[]}")。カスタムプロパティエディタで呼び出し可能なアクションの typeName を参照するには、入力名の先頭に T__ を、出力名の先頭に U__ を追加します (例: T__param1)。
typeValue — 汎用 sObject 入力または出力の特定値。

たとえば、システム管理者がカスタムプロパティエディタで volume の値を入力すると、イベントがディスパッチされます。Flow Builder は、フローでイベントを受信して値を更新します。

1handleChange(event) {
2    if (event && event.detail) {
3        const newValue = event.detail.value;
4        const valueChangedEvent = new CustomEvent(
5            'configuration_editor_input_value_changed', {
6            bubbles: true,
7            cancelable: false,
8            composed: true,
9            detail: {
10                name: 'volume',
11                newValue,
12                newValueDataType: 'Number'
13            }
14            }
15        );
16        this.dispatchEvent(valueChangedEvent);
17    }
18}

The Japanese Summer '24 guide is now live

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