jmpisson/lightning-wizard

Wizard component for building flows with LWC

Salesforce Wizard Component

<template>
    <c-wizard header="My Account Wizard" variant="base" current-step="step-1">
        <c-wizard-step label="Enter Account" name="step-1">
            <lightning-input label="Account Name"></lightning-input>
            <lightning-input label="Account Type"></lightning-input>
        </c-wizard-step>
        <c-wizard-step label="Add Contact" name="step-2" before-change={validate} hide-next-button="false">
            <lightning-input label="Name"></lightning-input>
            <lightning-input label="Title"></lightning-input>

            <lightning-button slot="actions" label="Skip" onclick={skipCreateContact}></lightning-button>
        </c-wizard-step>
        <template if:true={shouldSync}>
            <c-wizard-step label="Sync with another system" name="step-3">
            </c-wizard-step>
        </template>
    </c-wizard>
</template>

About

This components aims to provide a way to programatically build flows with Salesforce Flow styles and functionality, having full control of the wizard behavior in any scenario.

Features

• Define wizard with Lightning Web components declaratively.
• Override standard Navigation buttons definining specific step actions.
• Customize flow using JavaScript function for step validation and post-processing.
• Modify the flow steps using standard LWC templates.

Description

A c-wizard display a guided flow with multiple steps, only one is visible at a time. The progress is shown on the header along with a current step indicator.

Specification

c-wizard

Attributes

Name	Type	Access	Required	Default	Description
variant	string	global		base	Wizard style. Valid values are base, base-shaded and path.
previous-label	string	global		Previous	Previous button label.
next-label	string	global		Next	Next button label.
finish-label	string	global		Finish	Finish button label.
header	string	global			Header text shown on wizard. Leave blank for not displaying header.
current-step	string	global			Sets the current step of the wizard. Defaults to first c-wizard-step on the markup if null.

Slots

Name	Description
header	Placeholder for wizard header. Overrides the header attribute set on the component.
default	Placeholder for c-wizard-step. Defines the wizard flow.

Custom Events

change

The event fired when the wizard advances or goes back following the configured step flow. An external change by setting the attribute current-step does not emit this event.

The change event returns the following parameters.

Parameter	Type	Description
currentStep	string	The step name the wizard is moving to.
oldStep	string	The step name the wizard is moving from

The change event properties are as follows.

Property	Value	Description
bubbles	false	This event does not bubble up through the DOM.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

complete

The event fired when the wizard finishes and the user clicks on Finish button.

The complete event properties are as follows.

Property	Value	Description
bubbles	false	This event does not bubble up through the DOM.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

c-wizard-step

Attributes

Name	Type	Access	Required	Default	Description
name	string	global	true		Step unique name. Identifies the step.
label	string	global	true		Step label shown on wizard progress.
hide-previous-button	Boolean	global		false	Hides the Previous button on this step.
hide-next-button	string	global		false	Hides the Next/Finish button on this step.
before-change	function	global			Custom function to execute to perform post-processing action before advancing to the next step. It should return a promise with a true/false; if resolved with a falsy value, the wizard will mark the step as error and will not advance to the next step.

Slots

Name	Description
actions	Placeholder for actionable components on the step such as lightning-button. The components are positioned next to Next button. Overrides the header attribute set on the component.
default	Placeholder for step content.

lightning-wizard's Issues

onchange on Wizard cmp needs renamed to be more explicit

The onchange event handler on <c-wizard> catches change events from nested components like <lightning-input> unless I explicitly call event.preventPropogation() on the event handler the input component.

The wizard framework should be modified so that this event/event handler combo uses a more explicit naming structure that has less chance of crossing over with standard component events.

Something like onwizardstepchange would work just fine

Not working when using async method on before-change

Hi,

When trying to return a promise with a apexcontrolller result of true. It does not seem to work. Do you have any working examples?

Wizard Process bar is not working on IE 11

Hello,

Wizard flow bar is not working on IE11. Please find my attached screenshot.
do i need to add any additional css to handle in IE?

Calling to Child Method doesn't working

LWC Wizard Next button Click unable to call model popup

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.