lightning-wizard-oss v1.0.4
Salesforce Wizard Component
<template>
<lightning-wizard header="My Account Wizard" variant="base" current-step="step-1">
<lightning-wizard-step label="Enter Account" name="step-1">
<lightning-input label="Account Name"></lightning-input>
<lightning-input label="Account Type"></lightning-input>
</lightning-wizard-step>
<lightning-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-wizard-step>
<template if:true={shouldSync}>
<lightning-wizard-step label="Sync with another system" name="step-3">
</lightning-wizard-step>
</template>
</lightning-wizard>
</template>
About
This Web Component is a Web Component built from Lightning Wizard intended to use within a Lightning Web Component OSS Project.
It 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 lightning-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.
Usage
As referenced on last LWC RFC, include the npm reference within your lwc.config.json
or directly on your package.json
.
At this moment,
lightning-wizard
does not work with native Shadow DOM. It requires Synthetic Shadow DOM. Import@lwc/synthetic-shadow
before using the component.
package.json example
{
"lwc": {
"modules": [
{
"npm": "lightning-wizard-oss"
}
]
}
}
lwc.config.json example_
{
"modules": [
{
"npm": "lightning-wizard-oss"
}
]
}
Check the examples
folder for implementation details.
Specification
lightning-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 lightning-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 lightning-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. |
lightning-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. |