例: 画面コンポーネントの汎用 sObject 入力

この例では、汎用 sObject 入力値を使用するカスタムフロー画面コンポーネントのカスタムプロパティエディタを作成します。システム管理者は選択リスト項目を使用して、レコード変数のオブジェクトとレコード変数に画面コンポーネントの入力値を設定します。ユーザがこの例のフローを実行すると、画面コンポーネントにレコードのコレクションの最初のレコードが表示されます。

実行時のフロー画面

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

1<!--displayRecord.html-->
2<template>
3  <p>Record Name: {inputValue.Name}</p>
4</template>

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

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

Flow Builder で inputValue 公開プロパティを表示するには、設定ファイルで定義します。プロパティを汎用 sObject データ型として定義するには、propertyType サブタグを定義します。サブタグは汎用 sObject データ型を拡張します。inputValue の type 属性は、propertyType サブタグの name 属性を参照します。たとえば、propertyType name="T" の場合は property type="{T}" となります。property サブタグの type 属性は中括弧で囲む必要があります。プロパティを汎用 sObject コレクションデータ型として定義するには、[] を追加します (例: property type="{T[]}")。

role 属性は、プロパティでフローからの入力を受信することができるかどうかを決定します。デフォルト値は、inputAndOutput です。プロパティを入力のみまたは出力のみで使用できるようにするには、role 属性を inputOnly または outputOnly に設定します。

設定ファイルで、configurationEditor 属性を使用してカスタムプロパティエディタを登録します。

組織にカスタム名前空間がなければ、c 名前空間を使用します。組織にカスタム名前空間がある場合は、その名前空間を使用してください。

1<!-- displayRecord.js-meta.xml-->
2<?xml version="1.0" encoding="UTF-8"?>
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4  <apiVersion>50.0</apiVersion>
5  <isExposed>true</isExposed>
6  <targets>
7    <target>lightning__FlowScreen</target>
8  </targets>
9  <masterLabel>Display Record</masterLabel>
10  <targetConfigs>
11    <targetConfig targets="lightning__FlowScreen" configurationEditor="c-display-record-editor">
12      <propertyType name="T" extends="SObject" label="Input Type" description="Generic sObject data type used for input sObject properties" />
13      <property name="inputValue" type={T} label="input value" role="inputOnly" />
14    </targetConfig>
15  </targetConfigs>
16</LightningComponentBundle>

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

[レコードの表示] コンポーネントのカスタムプロパティエディタ

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

1<!--displayRecordEditor.html-->
2<template>
3  <lightning-combobox
4    name="inputType"
5    label="Object for Record Variable"
6    value="{inputType}"
7    placeholder="Select object..."
8    options="{typeOptions}"
9    onchange="{handleInputTypeChange}"
10  >
11  </lightning-combobox>
12
13  <lightning-combobox
14    name="inputValue"
15    label="Record Variable"
16    value="{inputValue}"
17    placeholder="Select record variable..."
18    options="{valueOptions}"
19    onchange="{handleValueChange}"
20  >
21  </lightning-combobox>
22</template>

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

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

Note

1// displayRecordEditor.js
2import { LightningElement, api } from 'lwc';
3
4export default class DisplayRecordEditor extends LightningElement {
5  @api
6  inputVariables;
7
8  @api
9  genericTypeMappings;
10
11  @api
12  builderContext;
13
14  get inputValue() {
15    const param = this.inputVariables.find(({ name }) => name === 'inputValue');
16    return param && param.value;
17  }
18
19  get inputType() {
20    const type = this.genericTypeMappings.find(
21      ({ typeName }) => typeName === 'T'
22    );
23    return type && type.typeValue;
24  }
25
26  get typeOptions() {
27    return [
28      { label: 'Account', value: 'Account' },
29      { label: 'Case', value: 'Case' },
30      { label: 'Lead', value: 'Lead' },
31    ];
32  }
33
34  get valueOptions() {
35    const variables = this.builderContext.variables;
36    return variables.map(({ name }) => ({
37      label: name,
38      value: name,
39    }));
40  }
41
42  handleInputTypeChange(event) {
43    if (event && event.detail) {
44    const newValue = event.detail.value;
45    const typeChangedEvent = new CustomEvent(
46      'configuration_editor_generic_type_mapping_changed',
47      {
48        bubbles: true,
49        cancelable: false,
50        composed: true,
51        detail: {
52          typeName: 'T',
53          typeValue: newValue
54        },
55      }
56    );
57    this.dispatchEvent(typeChangedEvent);
58    }
59  }
60
61  handleValueChange(event) {
62    if (event && event.detail) {
63      const newValue = event.detail.value;
64      const valueChangedEvent = new CustomEvent(
65        'configuration_editor_input_value_changed',
66        {
67          bubbles: true,
68          cancelable: false,
69          composed: true,
70          detail: {
71            name: 'inputValue',
72            newValue,
73            newValueDataType: 'reference',
74          },
75        }
76      );
77    this.dispatchEvent(valueChangedEvent);
78    }
79  }
80}

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

カスタムプロパティエディタが初期化されると、inputVariables は Flow Builder から画面コンポーネントの公開プロパティの値を受信します。

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

1[
2  {
3    name: "inputType",
4    value: "Account",
5    valueDataType: "Account",
6  },
7];

get inputValue() は、カスタムプロパティエディタで使用する inputValue プロパティの値を取得します。

genericTypeMappings インターフェースは、Flow Builder から画面スクリーンの汎用 sObject データ型である入力変数の値を受信します。

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

1[
2  {
3    typeName: "T",
4    typeValue: "Account",
5  },
6];

get inputType() は、カスタムプロパティエディタで使用する inputValue プロパティのデータ型を取得します。

get typeOptions() メソッドは、カスタムプロパティエディタで使用する各オブジェクト入力オプションの表示ラベルと値を取得します。

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}

get valueOptions() メソッドは、画面コンポーネントの入力に対するカスタムプロパティエディタの入力値のオプションとして、variables からのデータを使用します。

システム管理者がカスタムプロパティエディタで [レコード変数のオブジェクト] の入力の値を入力すると、handleInputTypeChange メソッドは configuration_editor_generic_type_mapping_changed イベントを Flow Builder にディスパッチします。Flow Builder は、フローでイベントを受信して値を更新します。

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

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

1<!--displayRecordEditor.js-meta.xml-->
2<?xml version="1.0" encoding="UTF-8"?>
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4  <apiVersion>50.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 (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。