How to pass data from Salesforce Lightning Web Component to Flow?

role=”outputOnly” should set in the property tag for the targetConfig targets=”lightning__FlowScreen” tag to pass data from Salesforce Lightning Web Component to Flow.

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <lightning-datatable
            key-field="Id"
            data={listAccounts}
            columns={columns}
            show-row-number-column
            onrowselection={handleSelected}>
        </lightning-datatable>      
    </lightning-card>
</template>

JavaScript:

import { LightningElement, api } from 'lwc';

export default class AccountDataTable extends LightningElement {

    @api listAccounts;
    @api selectedAccounts;
    columns = [  
        { label: 'Id', fieldName: 'Id' },
        { label: 'Name', fieldName: 'Name' },
        { label: 'Industry', fieldName: 'Industry' },
        { label: 'Account Number', fieldName: 'AccountNumber' },
        { label: 'Type', fieldName: 'Type' }
    ];  

    handleSelected( event ) {
        
        this.selectedAccounts = event.detail.selectedRows;
        console.log(
            'Selected Accounts are',
            JSON.stringify(
                this.selectedAccounts
            )
        );

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property
                name="listAccounts"
                label="Account List"
                type="@salesforce/schema/Account[]"
                role="inputOnly"
            />
            <property
                name="selectedAccounts"
                label="Selected Account List"
                type="@salesforce/schema/Account[]"
                role="outputOnly"
            />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Sample Flow:

Account Detail Configuration:

Account Name will be captured from the user.

Search Accounts Configuration:

Matching Account Configuration:

Collection Choice Set Variable:

selectedAccounts is the Output Variable from the Salesforce Lightning Web Component. DisplayAccounts is the API name of the Lightning Web Component added to the Screen Element.