Some important Flow Events to use when LWC is embedded inside a screen flow.
1.FlowAttributeChangeEvent:
This event is triggered when a component's property changes during the flow execution. It's vital for keeping data in sync and ensuring that components react in real-time to user input or system changes.
syntax:
const attributeChangeEvent = new FlowAttributeChangeEvent(
'todos',
this._todos
);
this.dispatchEvent(attributeChangeEvent);
2.FlowNavigationBackEvent :
If your flow includes multiple screens, this event allows users to go back to the previous screen, offering a more fluid and user-friendly experience, especially in complex processes that require review or corrections.
3.FlowNavigationNextEvent:
This event moves the flow forward to the next screen, ensuring smooth navigation between screens without manual intervention.
syntax:
// check if NEXT is allowed on this screen
if (this.availableActions.find((action) => action === 'NEXT')) {
// navigate to the next screen
const navigateNextEvent = new FlowNavigationNextEvent();
this.dispatchEvent(navigateNextEvent);
}
4.FlowNavigationPauseEvent:
Sometimes, you need to pause a flow. Whether it’s waiting for a user decision or external input, this event lets you pause the flow at any point, offering flexibility in how the flow operates.
5.FlowNavigationFinishEvent:
This event signals the end of the flow. Once triggered, it effectively terminates the flow, ensuring the user knows when the process is complete, and no further actions are needed.