When building a custom Lightning Web Component (LWC) for a Flow screen, a common challenge arises when you want to preserve input values between navigation (using “Use values from when the user last visited this screen”) but also refresh certain logic, such as dynamic field visibility, based on variables or selections from earlier screens.
In your case, you have one input field that is always visible and another field whose visibility depends on a variable passed from a previous screen in the Flow. The visibility variable is a simple string, such as slds-show or slds-hide, that is bound to the component’s CSS class.
Here’s an example of your markup:
<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"
size="12"
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"
size="12"
onchange={handleInput2Change}>
</lightning-input>
</lightning-layout-item>
</lightning-layout>
The Core Issue
The issue occurs because when you use “Use values from when the user last visited this screen,” Flow keeps the component’s previous state intact — including the visibility variable. Therefore, when you navigate back to this screen, the input values are retained as desired, but the visibility logic isn’t refreshed to reflect updated Flow variables from previous screens.
On the other hand, if you enable “Refresh inputs to incorporate changes elsewhere in the flow,” the Flow will reinitialize your LWC, forcing the visibility logic to refresh — but this will reset your input values as well.
Solution 1: Use @api Setters to React to Flow Variable Changes
You can force the LWC to reactively update its visibility when the Flow variable changes by using an @api setter. When the variable value changes in the Flow, the LWC will automatically re-evaluate the logic inside the setter, while still maintaining user-entered values.
Here’s an example:
import { LightningElement, api, track } from 'lwc';
export default class FlowInputComponent extends LightningElement {
@track input1;
@track input2;
_visibilityState;
@api
get visibility() {
return this._visibilityState;
}
set visibility(value) {
this._visibilityState = value;
this.handleVisibilityChange(value);
}
handleVisibilityChange(value) {
if (value === 'show') {
this.visibilityClass = 'slds-show';
} else {
this.visibilityClass = 'slds-hide';
}
}
handleInput1Change(event) {
this.input1 = event.target.value;
}
handleInput2Change(event) {
this.input2 = event.target.value;
}
}
This approach ensures that your input values remain intact (thanks to Flow’s “Use values from when the user last visited this screen” setting) while the visibility variable dynamically re-evaluates when Flow variable changes occur.
Solution 2: Use Flow Navigation Events
If the Flow does not automatically re-pass updated variable values on screen revisit, you can manually trigger a variable refresh using Flow navigation events. By listening to FlowNavigationBackEvent or FlowNavigationNextEvent, you can re-evaluate your visibility logic whenever the user returns to the screen.
Here’s an example:
import { LightningElement, api, wire } from 'lwc';
import { FlowNavigationBackEvent, FlowNavigationNextEvent } from 'lightning/flowSupport';
export default class RefreshVisibilityComponent extends LightningElement {
@api visibilityFlag;
visibilityClass;
connectedCallback() {
this.updateVisibility();
}
updateVisibility() {
this.visibilityClass = this.visibilityFlag ? 'slds-show' : 'slds-hide';
}
renderedCallback() {
this.updateVisibility();
}
handleNavigationBack() {
this.updateVisibility();
}
handleNavigationNext() {
this.updateVisibility();
}
}
Explanation:
By handling Flow navigation events, you can update the visibility logic dynamically each time navigation occurs. This ensures your component correctly reflects Flow variable changes while still maintaining user-entered input values.
Solution 3: Bind Visibility Directly to Flow Variable
Another alternative is to bind the visibility CSS class directly to a Flow variable. If your Flow sets a variable (for example, ShowField2) based on previous screen logic, pass that directly into your LWC. The LWC will then rely on the Flow’s data-binding behavior to control visibility.
Example:
<template>
<lightning-layout class="slds-grid slds-wrap">
<lightning-layout-item size="6" padding="around-small">
<lightning-input label="Always Visible Input 1" value={input1} onchange={handleInput1Change}></lightning-input>
</lightning-layout-item>
<template if:true={showField2}>
<lightning-layout-item size="6" padding="around-small">
<lightning-input label="Conditionally Visible Input 2" value={input2} onchange={handleInput2Change}></lightning-input>
</lightning-layout-item>
</template>
</lightning-layout>
</template>
In this version, the visibility is controlled entirely by Flow. The Flow variable (showField2) dictates whether the element is rendered. Flow automatically updates this variable as the user navigates, so you don’t need to manage CSS visibility logic manually.
Conclusion:
The most reliable solution is to use an @api setter to detect Flow variable changes and update the component dynamically. This preserves the user’s inputs across navigation and ensures that visibility logic reflects the current Flow state. For simpler scenarios, directly binding the visibility condition to a Flow variable through <template if:true={showField2}> can also provide a clean and declarative solution.
Kick Start Your Career with Real-Time Project-Based Salesforce Training
Our Salesforce Course is structured to give you a comprehensive understanding of the Salesforce platform, equipping you with the essential skills to thrive in the CRM industry. The curriculum includes key modules such as Salesforce Admin, Developer, and AI, seamlessly integrating theoretical learning with hands-on practice. By working on real-world projects and practical assignments, you will develop the expertise needed to solve business challenges using Salesforce solutions. Our experienced instructors provide both technical knowledge and industry insights to help you excel in the Salesforce ecosystem.
In addition to technical proficiency, our Salesforce training in Chennai offers expert mentorship, certification guidance, and interview preparation to boost your career prospects. You will gain access to extensive study materials, hands-on project experience, and continuous support throughout your training. By the end of the course, you will be well-prepared for certification exams and equipped with real-world problem-solving skills that employers value. Begin your Salesforce journey with us and explore endless career opportunities. Enroll for a Free Demo today!
Leave a Reply
You must be logged in to post a comment.