LWC in Flow – How to Refresh Screen Values?
Question:
I’m using a Lightning Web Component (LWC) inside a Flow screen that contains multiple input fields, where one field is always visible and others are conditionally shown based on selections from earlier Flow screens. To preserve user input when moving between “Next” and “Previous” screens, I enabled the Flow option “Use values from when the user last visited this screen”, which works well for retaining data. However, I also need the conditional visibility of fields to behave like “Refresh inputs to incorporate changes elsewhere in the flow”, since my LWC uses a visibility variable (slds-show or slds-hide) to control whether fields are displayed.
Here’s a simplified example:
<lightning-layout class="slds-grid slds-wrap">
<lightning-layout-item size="6" padding="around-small">
<lightning-input
label="Always Visible Input 1"
value={input1}
type="number"
onchange={handleInput1Change}>
</lightning-input>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small" class={visibility}>
<lightning-input
label="Conditionally Visible Input 2"
value={input2}
type="number"
onchange={handleInput2Change}>
</lightning-input>
</lightning-layout-item>
</lightning-layout>Is there a way to keep the input values from the last screen visit but still have the visibility variable update when the screen is revisited, based on Flow values from earlier screens? Or can I somehow force this single visibility variable to be reassessed each time the screen loads?
Answer:
Yes, you can preserve input values between Flow screens while still refreshing visibility by leveraging Flow input properties and the @api decorator in your LWC. When the Flow passes updated values into your component each time the screen loads, the component can reevaluate visibility while leaving the preserved inputs untouched.
Boost your career with CRS Info Solutions’ Salesforce online training, providing expert guidance, practical experience, and comprehensive hands-on learning.
One approach is to pass the controlling Flow variable into the LWC as a public property. Each time the screen is loaded, Flow will set this value, triggering a re-render of the component. Your LWC can then recompute the visibility class.
For example:
import { LightningElement, api, track } from 'lwc';
export default class FlowVisibilityLwc extends LightningElement {
@api input1;
@api input2;
@api controllingValue; // passed from Flow
get visibility() {
return this.controllingValue === 'show' ? 'slds-show' : 'slds-hide';
}
handleInput1Change(event) {
this.input1 = event.target.value;
this.dispatchFlowValue('input1', this.input1);
}
handleInput2Change(event) {
this.input2 = event.target.value;
this.dispatchFlowValue('input2', this.input2);
}
dispatchFlowValue(fieldName, value) {
this.dispatchEvent(new CustomEvent('valuechange', {
detail: { fieldName, value }
}));
}
}Explanation:
This LWC defines two input fields (input1, input2) and a controlling Flow variable (controllingValue) to toggle visibility dynamically. The visibility getter returns either slds-show or slds-hide based on the controlling value, so the Flow can re-evaluate visibility each time the screen loads. Input changes are captured in handleInput1Change and handleInput2Change, which update the values and fire a valuechange event back to the Flow.
In the Flow, configure the LWC input/output attributes so that:
input1andinput2preserve their values (using the screen’s “Use values from when the user last visited this screen” option).controllingValueis recalculated in the Flow before the screen is revisited.
This way, when the user navigates back to the screen, Flow restores the inputs, but your LWC recomputes visibility based on the updated controlling value.
Another effective approach is to utilize Flow’s built-in conditional visibility rules instead of managing them within the LWC. By placing Input 2 as a separate Flow screen component and applying conditional visibility through Flow configuration, the platform automatically handles visibility refresh while still preserving any values the user previously entered.
Summing Up
This LWC allows seamless integration with Flow by preserving user inputs while dynamically controlling field visibility. The @api properties ensure Flow can pass values into the component, while the visibility getter recalculates styling (slds-show or slds-hide) every time the screen is revisited. This design ensures that user-entered data remains intact while the UI reflects real-time Flow conditions.
The change handlers capture updates to inputs and immediately notify Flow through custom valuechange events. This two-way communication keeps Flow variables synchronized with the component, ensuring consistency across navigation. Overall, the component strikes a strong balance between retaining user data and adapting its layout dynamically based on Flow logic.
Salesforce Training in Chandigarh – Take the Next Step in Your Career
Kickstart your Salesforce journey with our industry-recognized salesforce training in Chandigarh, designed for both aspiring professionals and experienced experts. Gain deep knowledge of Salesforce CRM, hands-on practice through real-world projects, and expert mentorship to help you succeed in certifications like Salesforce Administrator and Developer. Our job-oriented curriculum ensures you build the right skills to accelerate your career growth.
We emphasize practical, industry-relevant learning with personalized guidance, comprehensive study materials, and dedicated support for certification and interview preparation.
Enroll today for a free demo session and begin your path toward a successful Salesforce career!!!
