4

I have an LWC embedded in a flow that has a custom footer. Whenever to click on the custom buttons to navigate the next screen, I get the following error:

Uncaught Action failed: flowruntime:flowRuntime$controller$handleNavigate [The 'NEXT' navigation option isn't supported on this screen. Replace it with one of the available navigation options: FINISH.]

Not sure how or why I am getting the error when the 'NEXT' option is in this.availableActions. The flow navigates to the next screen but I still get the error. The weirdest part is that it complains about the opposite if I try to use 'FINISH'.

Here is the snippet of the code:

let navigationEvent;

if (this.availableActions.find(action => action === "FINISH")) {
    navigationEvent = new FlowNavigationFinishEvent();
} else if (this.availableActions.find(action => action === "NEXT")) {
    navigationEvent = new FlowNavigationNextEvent();
}

try {
    this.dispatchEvent(navigationEvent);
} catch (e) {
    console.log(e);
}
5
  • is the component exposed to Flow screen using <target>lightning__FlowScreen</target> in meta xml? Nov 26, 2019 at 20:47
  • Yes, it is. The component is currently being used with a flow.
    – user76556
    Nov 29, 2019 at 22:49
  • We are having the exact same issue. Salesforce support has escalated to R&D and we are waiting for their response. Did you find a solution?
    – Peter
    Dec 13, 2019 at 15:51
  • Peter, do you have a case number for that? Mar 2, 2020 at 21:40
  • @user76556 Were you able to solve your issue? I am getting an issue when dispatching 'FlowNavigationFinishEvent' on the click of a 'button in the LWC component. When I click on the button, It shows '[NoErrorObjectAvailable] Script error.' after dispatching the event.
    – Aakriti.G
    Apr 28, 2021 at 5:39

2 Answers 2

4

Not sure if you are still looking for answer to this question but using documentation provided here: https://developer.salesforce.com/docs/component-library/bundle/lightning-flow-support/documentation

I was able to make flow actions work using following code:

    handleButtonClick(event) {
        var actionClicked = event.target.name;
        var navigationEvent;
    
        if (actionClicked === 'Next') {
            navigationEvent = new FlowNavigationNextEvent();
        } else if (actionClicked === 'Finish') {
            navigationEvent = new FlowNavigationFinishEvent();
        } else if (actionClicked === 'Pause') {
            navigationEvent = new FlowNavigationPauseEvent();
        } else if (actionClicked === 'Back') {
            navigationEvent = new FlowNavigationBackEvent();
        }
    
        try {
            this.dispatchEvent(navigationEvent);
        } catch (ex) {
            console.log('Exception: ' + ex);
        }
    }

Call above JS function on button click and pass in name. Your button should look like:

    <button onclick={handleButtonClick} id="Back" name="Back" title="Back">Back</button>

Hope this helps.

1
  • How do we remove the custom footer and use the above buttons instead?
    – sumchans
    May 26, 2021 at 22:49
1

You'll still need to have the navigation options you want to fire selected in the navigation options

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .