How to redirect to start of the flow using LWC embedded in the same flow

Question

I wanted to redirect the user from LWC. LWC is embedded in the same flow, I tried the following,

import { FlowNavigationStartEvent } from 'lightning/flowSupport';

handleGoToStart() {
    const event = new FlowNavigationStartEvent();
    event.fire();
}

<template>
    <div>
        <button onclick={handleGoToStart}>Go to Start Screen</button>
    </div>
</template>

basically, business flow is like this,

flow_screen 1 => flow_sceen 2 => flow_screen 3 (here lwc is embedded the flow footer buttons are hidden. I want to go to the first screen from lwc button)

Answer 1

There is no such thing as a FlowNavigationStartEvent, but you can engineer your component and flow to cooperate to achieve what you want.

I would address this by:

1. Having an output only property for the LWC for use in the lightning__FlowScreen target. These are necessarily defined using @api getter/setter methods and an underlying private property since you cannot otherwise have an LWC write to its own API properties.
2. Mapping this output property to a resource variable in the flow (which you do in the flow screen's property setup for the LWC).
3. Having your handleGoToStart set the output property value to indicate the flow should return to the start and raise a FlowAttributeChangeEvent so the flow sees the update and sets the resource variable value accordingly.
4. Having your handleGoToStart finally raise a FlowNavigationNextEvent. That means the user doesn't have to press your button then click "Next".
5. Ensuring that your flow checks the resource variable's value in a decision immediately after the screen element containing the LWC, and when it is set navigates you back to the start of the flow.
6. Make sure the flow resets the resource variable right after the "start" so you won't always loop back to the start when moving forward from the screen containing your LWC.