Pass sObjects and Wrapper to Flow from LWC

Pass sObjects and Wrapper to Flow from LWC which gives you ability to work with complex requirements. LWC can pass data to screen flows very easily. When it comes to pass data of type sObjects, List of sObject, Apex defined types like wrapper and list of wrapper to Flow, we need to configure the xml file of Lightning Web Component accordingly.

Use Case – Pass wrapper to Flow

We will create a LWC which will be called inside a lightning screen flow. LWC will call an apex method and assign the values to the public properties defined and pass values to flow. The public properties defined in LWC are binded with these datatypes in xml file:-

SObject
SObject List
Apex Wrapper
List of Apex Wrapper

Let’s create a Lightning Web Component called wrapperToFlow and these apex classes:

flowController
apexInput
apexInputList

apexInput.cls

This is a super simple wrapper class which will be used in flow and LWC.

public with sharing class apexInput {
    @AuraEnabled public string stringValue;
}

apexInputList.cls

This is a super simple wrapper class which will be used in flow and LWC.

public class apexInputList {
    @AuraEnabled public List<apexInput> wrapperList;
}

flowController.cls

getFlowInputs method here returns the wrapper defined within same class.

public class flowController {
    @AuraEnabled
    public static outputWrapper getFlowInputs(){
        outputWrapper wrapper = new outputWrapper();
        wrapper.record = [select id, name from Account limit 1];
        wrapper.recordList = [select id, name from Account limit 10];
        apexInput inputVariable = new apexInput();
        inputVariable.stringValue = 'test';
        wrapper.wrapperInput = inputVariable;
        wrapper.wrapperInputList = new apexInputList();
        wrapper.wrapperInputList.wrapperList = new List<apexInput>{inputVariable};
        return wrapper;
    }
    
    public class outputWrapper{
        @auraEnabled public account record{get;set;}
        @auraEnabled public List<account> recordList{get;set;}
        @auraEnabled public apexInput wrapperInput{get;set;}
        @auraEnabled public apexInputList wrapperInputList{get;set;}
    }
}

wrapperToFlow.html

HTML file of the component just has a button, When clicked it calls the apex method.

<template>
    <lightning-button label="Pass Object Data" onclick={handleSobject}></lightning-button>
</template>

wrapperToFlow.js

we have imported the apex method and FlowAttributeChangeEvent from flowSupport module. FlowAttributeChangeEvent will notify the changes in value of the properties to screen flows.

import { LightningElement, api } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
import getFlowInputs from '@salesforce/apex/flowController.getFlowInputs'
export default class WrapperToFlow extends LightningElement {
    @api inputValue;
    @api inputValueList;
    @api inputApexType;
    @api inputApexTypeList;

    handleSobject() {
        getFlowInputs().then(result => {
            this.inputValue = result.record;
            this.inputValueList = result.recordList;
            this.inputApexType = result.wrapperInput;
            this.inputApexTypeList = result.wrapperInputList;
            this.dispatchEvent(new FlowAttributeChangeEvent('inputValue', this.inputValue));
            this.dispatchEvent(new FlowAttributeChangeEvent('inputValueList', this.inputValueList));
            this.dispatchEvent(new FlowAttributeChangeEvent('inputApexType', this.inputApexType));
            this.dispatchEvent(new FlowAttributeChangeEvent('inputApexTypeList', this.inputApexTypeList));
        }).catch(error => {
            console.log('error occured', error);
        })
    }
}

wrapperToFlow.js-meta.xml

The xml file of the component is very important here. Public properties needs to added as target config and bind with respective data type.

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__FlowScreen</target>
	</targets>
	<targetConfigs>
		<targetConfig targets="lightning__FlowScreen">
			<propertyType name="T" extends="SObject" label="Input Type" description="Generic sObject data type used for input sObject properties" />
			<property name="inputValue" type="{T}" label="input value" role="outputOnly"/>
			<property name="inputValueList" type="{T[]}" label="input value List" role="outputOnly"/>
			<property name="inputApexType" type="apex://apexInput" label="input Apex Wrapper" role="outputOnly"/>
			<property name="inputApexTypeList" type="apex://apexInputList" label="input Apex Wrapper List" role="outputOnly"/>
		</targetConfig>
	</targetConfigs>
</LightningComponentBundle>

Lightning Screen Flow – lwcToFlowData

Create a new screen flow. Add first screen to it. Give label as LWC Screen and API name as LWC_Screen.

LWC can pass data to screen flows very easily. When it comes to pass data of type sObjects, List of sObject, Apex defined types like wrapper and list of wrapper, we need to configure the xml file of Lightning Web Component accordingly. This will solve a lot of complex problems working with flow and LWC.

Add the component wrapperToFlow in it. Give API Name as lwc and Input Type as Account.

Now add another screen in flow. Give Label as Display LWC Values and API Name as Display_LWC_Values.

Now add the Display Text component and add the LWC input values. Add this in Display Text:-

Wrapper List – {!lwc.inputApexTypeList
Wrapper – {!lwc.inputApexType}
Single SObject – {!lwc.inputValue}
SObject List – {!lwc.inputValueList}

Save and activate your flow and test it.

Demo – Pass wrapper data from LWC to Flow

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH