例: 画面コンポーネントのカスタムプロパティエディタ

次の例では、ボリュームを表示するカスタムフロー画面コンポーネントのカスタムプロパティエディタを作成します。システム管理者は、ボリュームコンポーネントのカスタムプロパティエディタのスライダを使用してボリュームを設定します。ユーザがフローを実行すると、システム管理者が設定したボリュームレベルがフロー画面に表示されます。

実行時のフロー画面。

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

1<!--volume.html-->
2<template>
3  <div>
4    <h1 class="slds-text-heading_medium">Volume</h1>
5  </div>
6
7  <div class="slds-p-top_xxx-small">
8    <p>
9      Your selected volume is:
10      <lightning-formatted-number value={volume}></lightning-formatted-number>
11    </p>
12  </div>
13</template>

JavaScript クラスは、volume 公開プロパティを定義します。

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

Flow Builder で volume 公開プロパティを表示するには、設定ファイル <property name="volume" type="Integer"/> で定義します。role 属性は、プロパティでフローからの入力を受信することができるかどうかを決定します。デフォルト値 (この例で使用されている値) は inputAndOutput です。プロパティを入力のみまたは出力のみで使用できるようにするには、role 属性を inputOnly または outputOnly に設定します。

設定ファイルで、<targetConfig targets="lightning__FlowScreen" configurationEditor="c-volume-editor"> のように configurationEditor 属性を使用してカスタムプロパティエディタを登録します。組織にカスタム名前空間がなければ、c 名前空間を使用します。組織にカスタム名前空間がある場合は、その名前空間を使用してください。

1<!-- volume.js-meta.xml-->
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>49.0</apiVersion>
4  <isExposed>true</isExposed>
5  <targets>
6    <target>lightning__FlowScreen</target>
7  </targets>
8  <masterLabel>Volume</masterLabel>
9  <targetConfigs>
10    <targetConfig targets="lightning__FlowScreen" configurationEditor="c-volume-editor">
11      <property name="volume" type="Integer"/>
12    </targetConfig>
13  </targetConfigs>
14</LightningComponentBundle>

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

スライダコンポーネントを使用して入力値を設定するカスタムプロパティエディタ

このカスタムプロパティエディタの HTML テンプレートは、スライダベースの Lightning Web コンポーネントを使用する UI を定義します。

1<!--volumeEditor.html-->
2<template>
3  <div class="slds-p-around_xx-small">
4    <lightning-slider label="Volume" step="10" value={volume} onchange={handleChange}>
5    </lightning-slider>
6  </div>
7</template>

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

@api プロパティを使用して、フローのデータを取得します。イベントを使用して、実行時のフローの変更をレポートします。

Note

1// volumeEditor.js
2import { LightningElement, api } from "lwc";
3
4export default class VolumeEditor extends LightningElement {
5  _inputVariables = [];
6
7  @api
8  get inputVariables() {
9    return this._inputVariables;
10  }
11
12  // Set a field with the data that was stored from the flow.
13  // This data includes the public volume property of the custom volume
14  // component.
15  set inputVariables(variables) {
16    this._inputVariables = variables || [];
17  }
18
19  // Get the value of the volume input variable.
20  get volume() {
21    const param = this.inputVariables.find(({ name }) => name === "volume");
22    return param && param.value;
23  }
24
25  @api
26  validate() {
27    const volumeCmp = this.template.querySelector("lightning-slider");
28    const validity = [];
29    if (this.volume < 0 || this.volume > 100) {
30      volumeCmp.setCustomValidity("The slider range is between 0 and 100.");
31      validity.push({
32        key: "Slider Range",
33        errorString: "The slider range is between 0 and 100.",
34      });
35    } else {
36      volumeCmp.setCustomValidity("");
37    }
38    volumeCmp.reportValidity();
39    return validity;
40  }
41
42  handleChange(event) {
43    if (event && event.detail) {
44      const newValue = event.detail.value;
45      const valueChangedEvent = new CustomEvent("configuration_editor_input_value_changed", {
46        bubbles: true,
47        cancelable: false,
48        composed: true,
49        detail: {
50          name: "volume",
51          newValue,
52          newValueDataType: "Number",
53        },
54      });
55      this.dispatchEvent(valueChangedEvent);
56    }
57  }
58}

Flow Builder には、カスタムプロパティエディタと通信するための JavaScript インターフェースがあります。この JavaScript クラスは、inputVariables および validate インターフェースを使用します。

この例では、inputVariables の getter および setter を定義します。カスタムプロパティエディタが初期化されると、inputVariables の setter は、Flow Builder から画面コンポーネントの公開プロパティの値を受信します。この例では、フローメタデータを _inputVariables 項目に保存するという規則を使用していますが、項目には任意の名前を付けることができます。

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

1[
2  {
3    name: "volume",
4    value: "10",
5    valueDataType: "Number",
6  },
7];

volume メソッドは、ボリュームの UI で使用する volume プロパティの value を取得します。

システム管理者が Flow Builder の画面エディタ UI で [完了] をクリックすると、Flow Builder は各カスタムプロパティエディタの validate 関数を評価します。関数で key および errorString データ構造が返されると、Flow Builder にエラー数が表示されます。これにより、システム管理者が画面エディタで変更を保存することを回避できます。

Flow Builder には、エラー数のみが表示されます。エラー文字列を表示するには、コードを記述します。この例では、lightning-slider コンポーネントの setCustomValidity() 関数を使用して、カスタムエラーメッセージを表示します。validate インターフェースメソッドを使用します。

Note

システム管理者がカスタムプロパティエディタでボリュームの値を入力すると、handleChange メソッドは configuration_editor_input_value_changed イベントを Flow Builder にディスパッチします。Flow Builder は、フローでイベントを受信して値を更新します。

volumeEditor の設定ファイルは次のようになります。

1<!--volumeEditor.js-meta.xml-->
2<?xml version="1.0" encoding="UTF-8"?>
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4  <apiVersion>49.0</apiVersion>
5  <!--isExposed can be true or false-->
6  <isExposed>true</isExposed>
7</LightningComponentBundle>

The Japanese Summer '24 guide is now live

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