フローの入力変数の設定

カスタム lightning-flow コンポーネントにフローを埋め込んだら、その変数を初期化して、フローにより多くのコンテキストを提供します。コンポーネントでフローを作成するには、lightning-flow コンポーネントの flow-api-name 属性に、使用するフローの API 名を設定します。

このコンポーネントを使用するには、その前に、Salesforce Flow Builder でフローを作成します。このコンポーネントには、戻る、次へ、一時停止、完了のナビゲーションボタンが含まれています。

フローに、カスタムの Lightning Web コンポーネントまたは Aura コンポーネントがある場合、Lightning Web Runtime を使用する Experience Cloud サイトで lightning-flow を使用することができません。

Note

例

コンポーネントのサーバ側 Javascript ファイルで対応付けのリストを作成し、そのリストを flow-input-variables 属性に渡します。

変数を設定できるのはインタビューの開始時のみで、設定した変数で入力アクセスが許可されている必要があります。入力アクセスを許可しない変数を参照している場合、その変数を設定しようとしても無視されます。

Note

設定した各変数の name、type、value を指定します。type には、フローデータ型の API 参照名を使用します。たとえば、レコード変数の場合は SObject を使用し、テキスト変数の場合は String を使用します。

1{
2  name : "varName",
3  type : "flowDataType",
4  value : valueToSet
5},
6{
7  name : "varName",
8  type : "flowDataType",
9  value : [ value1, value2 ]
10}, ...

この JavaScript ファイルのメソッドは、数値変数、日付コレクション変数、およびいくつかのレコード変数の値の配列を返します。Flow Builder の Record データ型は、ここでは SObject に対応します。

1// myComponent.js
2get inputVariables() {
3  return [
4    { name: 'numVar', type: 'Number', value: 30 },
5    { name: 'dateColl', type: 'String', value: [ '2016-10-27', '2017-08-01' ] },
6    // Sets values for fields in the account record (sObject) variable.
7    // Id uses the value of the accountId property. Rating uses a string.
8    { name: 'account', type: 'SObject', value: {
9      'Id': this.accountId,
10      'Rating': 'Warm'
11    }},
12    // Set the contact record (sObject) variable to the value of the contact property.
13    // We're assuming the property contains the entire sObject for a contact record.
14    { name: 'contact', type: 'SObject', value: this.contact }
15  ]
16}

次に、Apex コントローラを介して取引先を取得するコンポーネントの例を示します。Apex コントローラは、JavaScript ファイルのワイヤを介してデータをフローのレコード変数に渡します。

1<!-- myComponent.html -->
2<template>
3  <lightning-flow flow-api-name="myFlow" flow-input-variables={inputVariables}> </lightning-flow>
4</template>

1// AccountController.apex
2public with sharing class AccountController {
3    @AuraEnabled(cacheable=true)
4    public static Account getAccount() {
5        return [SELECT Id, Name, LastModifiedDate, FROM Account LIMIT 1];
6    }
7}

1// myComponent.js
2import { LightningElement, track, wire } from "lwc";
3import getAccount from "@salesforce/apex/AccountController.getAccount";
4
5export default class MyComponent extends LightningElement {
6  @track
7  inputVariables = [];
8
9  @wire(getAccount)
10  getAccountFromApex({ error, data }) {
11    if (error) {
12      console.log("Failed to get account data.");
13    } else if (data) {
14      this.inputVariables = [
15        {
16          name: "account",
17          type: "SOjbect",
18          value: data,
19        },
20      ];
21    }
22  }
23}

The Japanese Summer '24 guide is now live

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