Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jmpisson/lightning-wizard
Wizard component for building flows with LWC
https://github.com/jmpisson/lightning-wizard
flow lightning-web-components lwc salesforce salesforce-flow wizard
Last synced: 2 months ago
JSON representation
Wizard component for building flows with LWC
- Host: GitHub
- URL: https://github.com/jmpisson/lightning-wizard
- Owner: jmpisson
- License: mit
- Created: 2019-09-15T18:00:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-02T09:36:55.000Z (over 2 years ago)
- Last Synced: 2024-08-02T12:21:26.940Z (5 months ago)
- Topics: flow, lightning-web-components, lwc, salesforce, salesforce-flow, wizard
- Language: JavaScript
- Size: 73.2 KB
- Stars: 57
- Watchers: 3
- Forks: 20
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-lwc - lightning-wizard
README
# Salesforce Wizard Component
````xml
````
## 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.|