How to pass values from lwc to screen flow in salesforce

In this blog post, we see how to pass multiple parameters from LWC (Lightning Web Component) to the lightning screen flow in the Salesforce Lightning CRM.

Using the lightning-flow base component, we can embed a screen flow in the LWC.

<template>
    <lightning-flow
        flow-api-name='create_contact'
        >
    </lightning-flow>
</template>

When we implement screen flow within the LWC, definitely we need to communicate between flow and LWC, passing a set of variables.

The scope of this article is to pass parameters from LWC to screen flow and also from screen flow to LWC.

Create a screen flow from the setup

Click the New Resource button in the toolbox and add input variables AccountID and OperationType selecting Text as a data type.

Select Available for input check box for input variables

Create a new screen element and add input text fields. The default value of these text fields should be the input variable names created in the previous step.

Click the New Resource button in the toolbox and add output variables contactName and emailID selecting Text as a data type.

Select Available for output check box for output variables

Create a new screen element with input text fields for data collection

Add an assignment element to assign the field values to the output variables

The complete flow builder canvas looks as shown below

Save the flow and activate.

Create a lightning web component

createContact.html

<template>
    <lightning-flow
        flow-api-name='create_contact'
        flow-input-variables={inputVariables}
        onstatuschange={handleStatusChange}
        >
    </lightning-flow>
</template>

 
createContact.js

import { LightningElement, api } from 'lwc';
 
export default class CreateContact extends LightningElement {
    @api recordId;
 
    //pass input variables to the flow when component is loaded
    get inputVariables() {
        return [
            {
                name: 'AccountID',
                type: 'String',
                value: this.recordId
            },
            {
                name: 'OperationType',
                type: 'String',
                value: 'CreateContact'
            }
        ];
    }
 
    handleStatusChange(event) {
        //executes when finish event is triggered in the lightning flow
        if(event.detail.status === 'FINISHED'){
            const outputVariables = event.detail.outputVariables;
            for(let i = 0; i < outputVariables.length; i++) {
                 const outputVar = outputVariables[i];
                 if(outputVar.name == 'contactName'){
                    console.log('contactName from flow >> ' + outputVar.value);
                 }
                 if(outputVar.name == 'emailID'){
                    console.log('emailID from flow >> ' + outputVar.value);
                 }
            }
        }
    }
}

Output variables are passed to the LWC as an array. Iterate through an outputVariables array and display or assign the variables per the requirement.

 
createContact.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Ensure the parameter names in the LWC JavaScript matches with the input and output variable names created in the lightning flow.

Deploy the newly created LWC and add it to the lightning record page. In this case, we have added it to the Account Flexi page.

 
Output

Input variables from LWC are displayed on the first screen of the lightning flow.

Click the Next button.

Fill in the data to be passed to LWC

On click of Send parameters to LWC button, output variables from the flow are passed to the LWC and displayed in the browser console as shown below.

Wrap up

We have seen detailed steps to communicate between LWC and the lightning flow. If you find any issues, debug the newly created lightning web component and the lightning flow.

Are you building an exciting use case with a lightning-flow base component? share it with us in the comments section below. We really appreciate your time. Thank you.

If you liked our content, consider subscribing to our community page to receive updates on the upcoming articles related to Salesforce Lightning CRM.

Until next time…