I'm trying to understand whether this is expected or buggy behavior when using a flow to pass data into a lightning web component. It seem buggy to me since there is something trying to cache input values without an override option.
Setup: Flow with two screen components and an assignment login inbetween.
First screen component has an input textbox and an associated text variable.
Second screen component has a LWC that accepts the variable as an input and also passes any LWC output back into the same variable.
When you initially run the flow in debug, you can set the text input to some text, click "Next" and the LWC displays the value that you entered.
If you then use the "Previous" and change your initial text input to something else, then hit "Next" on screen 1 again, the flow has the new value, but the LWC does not see the updated input.
However, if you use the "Next with Previous checkbox chosen" to loop back around to Screen #1 and change the input, it works.
Here is the LWC code
js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__FlowScreen">
<property name="txtBoxVal" type="String" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
html
<template>
<lightning-card title="Lightning Web Component For Flow" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<lightning-input label="Message To Send" type="text" value={_txtBoxVal} onchange={handleChange}></lightning-input>
<br />
<lightning-button label="Publish Attribute" onclick={handleClick}></lightning-button>
<lightning-button label="Navigate to Next" variant="brand" onclick={handleNext} ></lightning-button>
</div>
</lightning-card>
javascript
import { LightningElement , track, api} from 'lwc';
import {FlowAttributeChangeEvent, FlowNavigationNextEvent} from 'lightning/flowSupport';
export default class LwcTextBoxExample extends LightningElement {
@track _txtBoxVal = '';
@api availableActions = [];
@api
get txtBoxVal(){
return this._txtBoxVal;
}
set txtBoxVal(val){
this._txtBoxVal = val;
}
handleChange(event) {
this._txtBoxVal = event.target.value;
}
//Change attribute on Flow
handleClick(event) {
const attributeChangeEvent = new FlowAttributeChangeEvent('txtBoxVal', this._txtBoxVal);
this.dispatchEvent(attributeChangeEvent);
}
//Hook to Flow's Validation engine
@api
validate() {
if(!this._txtBoxVal.includes('oracle')) {
return { isValid: true };
}
//If the component is invalid, return the isValid parameter as false and return an error message.
return {
isValid: false,
errorMessage: 'You cannot have string oracle in String'
};
}
//Go to Next screen of Flow
handleNext(event){
const nextNavigationEvent = new FlowNavigationNextEvent();
this.dispatchEvent(nextNavigationEvent);
}
}
Best Answer
Sigh. Yeah, this is currently the way it works. Basically the design optimizes for a use case where the customer doesn't want to have to retype in values when they return to the screen. You can work around this by:
If this is unclear, there's much deeper explanation here
We (Salesforce) are working on improving this.