Pass sObjects and Wrapper to LWC from Flow which gives you ability to work with complex requirements. Flow can pass data to LWC very easily. When it comes to pass data of type sObjects, List of sObject, Apex defined types like wrapper and list of wrapper to LWC from Flow, we need to configure the xml file of Lightning Web Component accordingly.
Use Case – Pass wrapper to LWC from Flow
We will create a two LWC. They are:-
- wrapperToFlow
- flowToLwcWrapper
wrapperToFlow will call an apex method on button click and assign the values to the public properties defined and pass values to flow. The values will be later passed to flowToLwcWrapper. 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>flowToLwcWrapper.html
<template>
<lightning-tabset>
<lightning-tab label="SObject">
<div class="scroller slds-card">
<pre>{jsonInputValue}</pre>
</div>
</lightning-tab>
<lightning-tab label="SObject List">
<div class="scroller slds-card">
<pre>{jsonInputValueList}</pre>
</div>
</lightning-tab>
<lightning-tab label="Apex Wrapper">
<div class="scroller slds-card">
<pre>{jsonInputApexType}</pre>
</div>
</lightning-tab>
<lightning-tab label="Apex Wrapper List">
<div class="scroller slds-card">
<pre>{jsonInputApexTypeList}</pre>
</div>
</lightning-tab>
</lightning-tabset>
</template>flowToLwcWrapper.css
.scroller {
height: 350px;
overflow: auto;
padding: var(--lwc-varSpacingXSmall, 8px);
border: solid var(--lwc-borderWidthThin, 1px) #eee;
}flowToLwcWrapper.js
import { LightningElement, api } from 'lwc';
export default class FlowToLwcWrapper extends LightningElement {
@api inputValue;
@api inputValueList;
@api inputApexType;
@api inputApexTypeList;
get jsonInputValue() {
return this.inputValue
? JSON.stringify(this.inputValue, null, 2)
: '';
}
get jsonInputValueList() {
return this.inputValueList
? JSON.stringify(this.inputValueList, null, 2)
: '';
}
get jsonInputApexType() {
return this.inputApexType
? JSON.stringify(this.inputApexType, null, 2)
: '';
}
get jsonInputApexTypeList() {
return this.inputApexTypeList
? JSON.stringify(this.inputApexTypeList, null, 2)
: '';
}
}flowToLwcWrapper.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.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" />
<property name="inputValueList" type="{T[]}" label="input value List" />
<property name="inputApexType" type="apex://apexInput" label="input Apex Wrapper" />
<property name="inputApexTypeList" type="apex://apexInputList" label="input Apex Wrapper List" />
</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.
Add wrapperToFlow component in the screen and assign properties as shown below.
Now add flowToLwcWrapper component on same screen and assign properties as shown below.
Save and activate your flow and test it.
Demo – Pass wrapper data from Flow to LWC
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
Schedule a 1:1 Meeting with me
Also checkout this https://salesforcediaries.com/category/lightning-web-component/
