{"id":13545917,"url":"https://github.com/jmpisson/lightning-wizard","last_synced_at":"2025-04-02T17:32:21.047Z","repository":{"id":46237351,"uuid":"208634676","full_name":"jmpisson/lightning-wizard","owner":"jmpisson","description":"Wizard component for building flows with LWC","archived":false,"fork":false,"pushed_at":"2022-08-02T09:36:55.000Z","size":75,"stargazers_count":59,"open_issues_count":3,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-03T14:34:45.264Z","etag":null,"topics":["flow","lightning-web-components","lwc","salesforce","salesforce-flow","wizard"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jmpisson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-15T18:00:35.000Z","updated_at":"2024-10-01T01:16:51.000Z","dependencies_parsed_at":"2022-08-24T19:40:12.326Z","dependency_job_id":null,"html_url":"https://github.com/jmpisson/lightning-wizard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpisson%2Flightning-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpisson%2Flightning-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpisson%2Flightning-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpisson%2Flightning-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmpisson","download_url":"https://codeload.github.com/jmpisson/lightning-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246860206,"owners_count":20845630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flow","lightning-web-components","lwc","salesforce","salesforce-flow","wizard"],"created_at":"2024-08-01T12:00:26.862Z","updated_at":"2025-04-02T17:32:20.758Z","avatar_url":"https://github.com/jmpisson.png","language":"JavaScript","readme":"# Salesforce Wizard Component\n\n\u003cimg src=\"screenshots/create-account-flow.gif\" alt=\"Flow Example\"/\u003e\n\n````xml\n\u003ctemplate\u003e\n    \u003cc-wizard header=\"My Account Wizard\" variant=\"base\" current-step=\"step-1\"\u003e\n        \u003cc-wizard-step label=\"Enter Account\" name=\"step-1\"\u003e\n            \u003clightning-input label=\"Account Name\"\u003e\u003c/lightning-input\u003e\n            \u003clightning-input label=\"Account Type\"\u003e\u003c/lightning-input\u003e\n        \u003c/c-wizard-step\u003e\n        \u003cc-wizard-step label=\"Add Contact\" name=\"step-2\" before-change={validate} hide-next-button=\"false\"\u003e\n            \u003clightning-input label=\"Name\"\u003e\u003c/lightning-input\u003e\n            \u003clightning-input label=\"Title\"\u003e\u003c/lightning-input\u003e\n\n            \u003clightning-button slot=\"actions\" label=\"Skip\" onclick={skipCreateContact}\u003e\u003c/lightning-button\u003e\n        \u003c/c-wizard-step\u003e\n        \u003ctemplate if:true={shouldSync}\u003e\n            \u003cc-wizard-step label=\"Sync with another system\" name=\"step-3\"\u003e\n            \u003c/c-wizard-step\u003e\n        \u003c/template\u003e\n    \u003c/c-wizard\u003e\n\u003c/template\u003e\n````\n\n## About\n\nThis 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.\n\n### Features\n\n* Define wizard with Lightning Web components declaratively.\n* Override standard Navigation buttons definining specific step actions.\n* Customize flow using JavaScript function for step validation and post-processing.\n* Modify the flow steps using standard LWC templates.\n\n\n## Description\nA `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.\n\n\n\n\n## Specification\n\n### c-wizard\n\n#### Attributes\n\n|       Name      |  Type  | Access | Required |  Default | Description                                                                                 |\n|:---------------:|:------:|:------:|:--------:|:--------:|---------------------------------------------------------------------------------------------|\n|      variant    | string | global |          |   base   | Wizard style. Valid values are base, base-shaded and path.                                  |\n|  previous-label | string | global |          | Previous | Previous button label.                                                                      |\n| next-label      | string | global |          | Next     | Next button label.                                                                          |\n| finish-label    | string | global |          | Finish   | Finish button label.                                                                        |\n|      header     | string | global |          |          | Header text shown on wizard. Leave blank for not displaying header.                         |\n|  current-step   | string | global |          |          | Sets the current step of the wizard. Defaults to first c-wizard-step on the markup if null. |\n\n#### Slots\n\n|       Name      |  Description    |                                             \n|:---------------:|:---------------:|\n|      header     | Placeholder for wizard header. Overrides the header attribute set on the component.|\n|      default     | Placeholder for c-wizard-step. Defines the wizard flow.|\n\n#### Custom Events\n\n##### change\n\nThe 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.\n \nThe change event returns the following parameters.\n\n|Parameter      |  Type  | Description |\n|:------:|:--------:|:--------:|\n| currentStep | string | The step name the wizard is moving to.|\n| oldStep | string \t| The step name the wizard is moving from|\n\nThe change event properties are as follows.\n\n|Property      |  Value  | Description|\n|:------:|:--------:|:--------:|\n|bubbles|false|This event does not bubble up through the DOM.|\n|cancelable|false|This event has no default behavior that can be canceled. You can't call preventDefault() on this event.|\n|composed|false|This event does not propagate outside of the component in which it was dispatched.|\n\n##### complete\n\nThe event fired when the wizard finishes and the user clicks on Finish button.\n\nThe complete event properties are as follows.\n\n|Property      |  Value  | Description |\n|:------:|:--------:|:--------:|\n|bubbles|false|This event does not bubble up through the DOM.|\n|cancelable|false|This event has no default behavior that can be canceled. You can't call preventDefault() on this event.|\n|composed|false|This event does not propagate outside of the component in which it was dispatched.|\n\n### c-wizard-step\n\n#### Attributes\n\n|       Name      |  Type  | Access | Required |  Default | Description                                                                                 |\n|:---------------:|:------:|:------:|:--------:|:--------:|---------------------------------------------------------------------------------------------|\n|      name    | string | global |   true       |      | Step unique name. Identifies the step.                                  |\n|  label | string | global |    true      |  | Step label shown on wizard progress.                                                                     |\n| hide-previous-button     | Boolean | global |          | false     |Hides the Previous button on this step.                                                           |\n| hide-next-button     | string | global |          | false   | Hides the Next/Finish button on this step.                                                                        |\n| 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.\n\n#### Slots\n\n|       Name      |  Description    |                                             \n|:---------------:|:---------------:|\n|      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.|\n|      default     | Placeholder for step content.|","funding_links":[],"categories":["On Platform Community Repos"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmpisson%2Flightning-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmpisson%2Flightning-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmpisson%2Flightning-wizard/lists"}