I have a super simple Lightning Web component with input field and a button. The idea is to send the input field value to flow using FlowAttributeChangeEvent of Flow Support module in lwc.
What is happening at the moment?
The button click is firing FlowAttributeChangeEvent and value is being passed to a variable in Flow when we go to next screen.
What i am looking?
I want to assign the value passed from lwc to flow in the same screen.
flowAndLwcDataExchange.html
<template>
<lightning-input label="Value To Pass To Flow" value={_valueToFlow} onchange={handleChange}></lightning-input>
<lightning-button label="pass value" onclick={handleSendValueToFlow}></lightning-button>
</template>
flowAndLwcDataExchange.js
import { LightningElement, api, track } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
export default class FlowAndLwcDataExchange extends LightningElement {
@track _valueToFlow;
@api
get valueToFlow() {
return this._valueToFlow;
}
set valueToFlow(val) {
console.log('getter', val);
this._valueToFlow = val;
}
handleSendValueToFlow() {
const attributeChangeEvent = new FlowAttributeChangeEvent(
'valueToFlow',
this._valueToFlow
);
this.dispatchEvent(attributeChangeEvent);
}
handleChange(event) {
console.log(this._valueToFlow);
this._valueToFlow = event.target.value;
}
}
flowAndLwcDataExchange.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__FlowScreen</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__FlowScreen">
<property name="valueToFlow" type="String" label="Pass Value To Flow" role="outputOnly"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>