How Can I Redirect or Finish a Screen Flow from the First Screen?

Question:

I have a screen flow with only one screen that is triggered by a button on the Incident List view. The flow asks the user whether they want to change the owner to a group or user. I’ve implemented a custom LWC with two buttons—“Next” and “Cancel.” The “Next” button is functioning as expected, but when the user clicks the “Cancel” button, I need them to be redirected back to the Incident List view. I tried using NavigationMixin to navigate and also attempted to finish the flow programmatically using FlowNavigationFinishEvent, but the “Cancel” button isn’t working as I intended.

Enhance your skills with top-tier Salesforce training in Chicago, featuring hands-on sessions and expert-led guidance. Get certified and boost your career in the thriving Salesforce ecosystem!

Here’s the code I’m using:

<button class="slds-button slds-button_text-destructive slds-m-right_xx-small" onclick={handleCancel}>Cancel</button>
<button class="slds-button slds-button_brand" onclick={handleGoNext}>Next</button>

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { FlowNavigationNextEvent, FlowNavigationFinishEvent } from 'lightning/flowSupport';

export default class NocOwnerButtons extends NavigationMixin(LightningElement) {
    @api availableActions = [];

    handleCancel() {
        console.log('Cancel button clicked');
        this[NavigationMixin.Navigate]({
            type: "standard__objectPage",
            attributes: {
                objectApiName: "Incident",
                actionName: "list",
            },
            state: {
                filterName: "00B8Z00000H4iFLUAZ", // Replace with correct List View ID or Filter Name
            },
        });
    }

    handleGoNext() {
        if (this.availableActions.find((action) => action === 'NEXT')) {
            const navigateNextEvent = new FlowNavigationNextEvent();
            this.dispatchEvent(navigateNextEvent);
        }
    }
}

Answer:

In this case, there are two methods to redirect or finish the flow from the first screen based on the user’s interaction with the “Cancel” button:

1. Redirecting Using NavigationMixin:

The first approach is to use the NavigationMixin to navigate back to the list view when the user clicks the “Cancel” button. The code below navigates to the Incident list view using the list view ID or filter name:

handleCancel() {
    console.log('Cancel button clicked');
    this[NavigationMixin.Navigate]({
        type: "standard__objectPage",
        attributes: {
            objectApiName: "Incident",
            actionName: "list",
        },
        state: {
            filterName: "00B8Z00000H4iFLUAZ", // List view ID
        },
    });
}

This method ensures that when users click “Cancel,” they are navigated to the Incident object’s list view. Make sure the filterName corresponds to the list view you want to display. If this approach is not working as expected, verify the list view ID and ensure the component is using NavigationMixin.

2. Finishing the Flow Using FlowNavigationFinishEvent:

If you want the flow to be finished when the user clicks the “Cancel” button, leveraging the flow’s built-in behavior for redirection can be useful. If your flow has a retUrl parameter set, finishing the flow will automatically redirect the user to the URL specified.
Here’s how to dispatch the FlowNavigationFinishEvent when the “Cancel” button is clicked:

handleCancel() {
    console.log('Cancel button clicked');
    if (this.availableActions.find((action) => action === 'FINISH')) {
        const navigateFinishEvent = new FlowNavigationFinishEvent();
        this.dispatchEvent(navigateFinishEvent);
    }
}

This method uses the flow’s configuration for redirection. If a retUrl is specified in the flow’s setup, users will be redirected to the appropriate page (like the list view or any other page defined by the flow).

See also: How to use Salesforce Einstein AI in Sales Cloud?

Conclusion:

If you want to implement custom navigation, use the NavigationMixin to handle the redirection. However, if your flow configuration includes automatic redirection upon finish, you can use the FlowNavigationFinishEvent. Both methods will redirect the user to the list view based on the action chosen, ensuring a smooth user experience.
This solution provides flexibility to either fully control the navigation or rely on the flow’s own redirection logic based on your flow configuration

CRS Info Solutions offers a comprehensive Salesforce training in Chicago, designed specifically for beginners. This hands-on course guides you through each step of the learning process, with a focus on real-world applications, conceptual clarity, and expert-led sessions. Featuring daily notes, engaging video lessons, and personalized interview preparation, the program ensures you gain the knowledge and confidence needed to succeed in Salesforce certification and propel your career forward.

As a trusted leader in Salesforce education, CRS Info Solutions covers essential modules such as Admin, Developer, Integration, and Lightning Web Components (LWC). Their experienced instructors blend theoretical knowledge with practical training, preparing you to apply what you’ve learned in real-world scenarios. The curriculum is aligned with industry standards, helping you build a solid foundation and meet the expectations of top employers in a competitive job market.

Start your professional journey today by exploring their Salesforce program and enjoy a free demo to kick off your path to success.!!