LWC Wizard Next button Click unable to call model popup

[kranthik2330]

Hello Guys,

I have 2 screens in the wizard (Step1 and Step2)
As soon a user clicks on Next button on the first screen (Step #1). Before doing any custom validation i want to call model confirmation popup Like below.
Once user clicks on close then i want to do validation on the screen and move to next step "Step#2

Please provide me with possible solution for this request.

[jmpisson]

Hi there @kranthik2330 ! The best option you have is to just override the Next button to perform your custom logic.

You can easily do this by using the hideNextButton property and the actions slot on c-wizard-stepcomponent. For example, in your container component you could write something like this:

template.html

<template>
    <c-wizard header="Create Account Flow" variant="path" current-step="step-1" oncomplete={saveAccount}>
        <c-wizard-step label="Create Account" name="step-1" hide-next-button>
            <!-- YOUR FORM --><!-- / YOUR FORM -->

            <!-- YOUR MODAL -->
            <template if:true={isModalShown}>
                 <!-- MODAL CONTENT -->
            </template>
            <!-- / MODAL -->

            <!-- CUSTOM ACTIONS -->
            <lightning-button label="Next" variant="brand" slot="actions" onclick={openModal}></lightning-button>
            <!-- / CUSTOM ACTIONS -->
        </c-wizard-step>
        
           <!-- OTHER STEPS -->
    </c-wizard>
</template>

component.js

export default class CustomlWizard extends NavigationMixin(LightningElement) {

    openModal() {
        this.isModalShown = true;
    }

    closeModal() {
        this.isModalShown = false;
    }

    // Executes the validation with the modal "Next" button
    next() {
         // If custom validation works...
        if(this.validate()) {
            // Advances to the next step
            this.template.querySelector('c-wizard').currentStep = 'step-2';
        }
       // Close modal on every case
        this.closeModal();
    }

    validate() {
        return true;
    }

With this code, you will get somehting like this:

I have just push to the repo a little example with this logic, within the examples folder; Hope it helps!

[kranthik2330]

This is the best answer thank you for all your work and support.