Set Flow Input Variables

When you embed a flow in a custom lightning-flow component, give the flow more context by initializing its variables. To create a flow in your component, set the lightning-flow component’s flow-api-name attribute to the API name of the flow that you want to use.

To use this component, build a flow with the Salesforce Flow Builder first. The component includes the navigation buttons Back, Next, Pause, and Finish.

If your flow has custom Lightning web components or Aura components, then you can’t use lightning-flow on Experience Cloud sites that use Lightning Web Runtime.

Note

Create Input Variables for the Flow

In the component’s Javascript file, create a list of maps and pass that list to the flow-input-variables attribute.

You can only set variables at the beginning of an interview, and the variables you set must allow input access. If you reference a variable that doesn’t allow input access, attempts to set the variable are ignored.

Note

For each variable that you set, provide the variable’s name, type, and value. For type, use the API name for the flow data type. For example, for a record variable use SObject, for a text variable use String.

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

This method in the JavaScript file returns an array of values for a number variable, a date collection variable, and a couple of record variables. The Record data type in Flow Builder corresponds to SObject here.

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}

Example: Pass Account Data to the Flow

This example component gets an account via an Apex controller. The Apex controller passes the data to the flow’s record variable through a wire in the JavaScript file.

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: "SObject",
18          value: data,
19        },
20      ];
21    }
22  }
23}