{"id":13776427,"url":"https://github.com/forwarder/meteor-wizard","last_synced_at":"2025-05-11T10:31:01.125Z","repository":{"id":77853845,"uuid":"18669402","full_name":"forwarder/meteor-wizard","owner":"forwarder","description":"A wizard component for Autoform.","archived":false,"fork":false,"pushed_at":"2017-04-26T06:19:33.000Z","size":61,"stargazers_count":67,"open_issues_count":6,"forks_count":17,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-31T05:35:43.321Z","etag":null,"topics":[],"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/forwarder.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-04-11T09:37:02.000Z","updated_at":"2023-02-25T12:24:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"8735ed7e-0d30-4d25-9e8c-543788968f09","html_url":"https://github.com/forwarder/meteor-wizard","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwarder%2Fmeteor-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwarder%2Fmeteor-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwarder%2Fmeteor-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwarder%2Fmeteor-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forwarder","download_url":"https://codeload.github.com/forwarder/meteor-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253551544,"owners_count":21926313,"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":[],"created_at":"2024-08-03T18:00:25.489Z","updated_at":"2025-05-11T10:31:00.834Z","avatar_url":"https://github.com/forwarder.png","language":"JavaScript","readme":"AutoForm Wizard\n=============\n\nAutoForm Wizard is a multi step form component for AutoForm.\n\n\n## Installation\n\n```\n$ meteor add forwarder:autoform-wizard\n```\n\n## Upgrade notice\n\n### Upgrading to 0.7.*\nIron router support has been moved to a separate package.\nSee the [Using routers](#routers) section to see how to enable it.\n\n\n## Dependencies\n\n* AutoForm versions 5.\n\n\n## Example\n\nA running example can be found here:\nhttp://autoform-wizard.meteor.com\n\nThe source code of the example app can be found on Github.\nhttps://github.com/forwarder/meteor-wizard-example\n\n\n## Basic usage\n\n### Create templates for the wizard\n\n```html\n\u003ctemplate name=\"basicWizard\"\u003e\n  {{\u003e wizard id=\"basic-wizard\" steps=steps}}\n\u003c/template\u003e\n```\n\n### Define the steps in a template helper\n\n```js\nSchema = {};\nSchema.information = new SimpleSchema(...);\nSchema.confirm = new SimpleSchema(...);\n\nTemplate.basicWizard.helpers({\n  steps: function() {\n    return [{\n      id: 'information',\n      title: 'Information',\n      schema: Schema.information\n    },{\n      id: 'confirm',\n      title: 'Confirm',\n      schema: Schema.confirm,\n      onSubmit: function(data, wizard) {\n        // submit logic\n      }\n    }]\n  }\n});\n```\n\n\n## Custom step templates\n\nIf you need more flexibility in your forms, you can define your own templates to be used for the steps.\n\n### Define your templates and include AutoForm\n\n```html\n\u003ctemplate name=\"information\"\u003e\n  {{\u003e quickform id=\"information-form\" doc=step.data schema=step.schema}}\n\u003c/template\u003e\n```\n\nor\n\n```html\n\u003ctemplate name=\"confirm\"\u003e\n  {{#autoForm id=\"confirm-form\" doc=step.data schema=step.schema}}\n\n    {{\u003e afQuickField name=\"acceptTerms\"}}\n\n    {{\u003e wizardButtons}} /* this will render back, next and confirm buttons */\n\n  {{/autoForm}}\n\u003c/template\u003e\n```\n\n### Configure steps\n\n```js\nTemplate.basicWizard.helpers({\n  steps: function() {\n    return [{\n      id: 'information',\n      title: 'Information',\n      template: 'information',\n      formId: 'information-form',\n    },{\n      id: 'confirm',\n      title: 'Confirm',\n      template: 'confirm',\n      formId: 'confirm-form',\n      onSubmit: function(data, wizard) {\n        // submit logic\n      }\n    }]\n  }\n});\n```\n\n## Component reference\n\n### Wizard configuration\n\nThe following attributes are supported:\n\n* `id`: Required. The id used to identify the wizard.\n* `route`: Optional. The (Iron Router) route name this wizard will be bound to, the route needs a `step` parameter.\n* `steps`: Required. A list of steps for this wizard.\n  * `id`: Required. Id of the step, also used for the route parameter.\n  * `title`: Optional. The title displayed in the breadcrumbs.\n  * `template`: Optional. Uses a default template with a quickform if not set.\n  * `schema`: Optional. Only required if don't use a custom template.\n  * `formId`: Optional. The AutoForm form id used in the template. Appends '-form' to the step.id if not set. Used to attach submit handlers and retrieve the step data.\n  * `data`: Optional. Object with initial data for the step, for example a document, when using an update form. *Overwrites previous saved data*.\n  * `onSubmit`: Optional. This function is executed after the form is submitted and validates. `this` references to the AutoForm instance. Shows the next step by default. Parameters:\n      * `data`: The current step data.\n      * `wizard`: The wizard instance.\n* `buttonClasses`: Optional. CSS classes to add to the buttons.\n* `nextButton`: Optional. Defaults to `Next`.\n* `backButton`: Optional. Defaults to `Back`. Set to `false`, to not render this button.\n* `confirmButton`: Optional. Defaults to `Confirm`.\n* `persist`: Optional. Persist the step data in localStorage. Defaults to `true`.\n* `clearOnDestroy`: Optional. Clear the cache storage after closing the wizard. Defaults to `false`.\n* `stepsTemplate`: Optional. A custom steps template.\n* `stepTemplate`: Optional. A custom default template for each step.\n\n#### Custom attributes\nWizard configuration attributes can be extended with `Wizard.extendOptions`\n```js\n  Wizard.extendOptions(['wizardClass']);\n```\nwith default value:\n```js\n  Wizard.extendOptions(['editButton', 'wizardClass'], {wizardClass: 'nav-wizard'});\n```\n\n#### onSubmit\nUse this callback to process the form data.\n```js\nonSubmit: function(data, wizard) {\n  var self = this;\n  Orders.insert(_.extend(wizard.mergedData(), data), function(err, id) {\n    if (err) {\n      self.done();\n    } else {\n      Router.go('viewOrder', {\n        _id: id\n      });\n    }\n  });\n}\n```\n\nArguments:\n\n* `data`: Form data of the current step.\n* `wizard`: The wizard instance.\n\n`this` references to the AutoForm instance, see the [AutoForm documentation](https://github.com/aldeed/meteor-autoform#onsubmit) for more information.\n\n### Wizard instance methods\n\nThe wizard instance is added to your step templates data context, so you can access these methods in your event handlers etc.\n\n* `mergedData()`: Get all data from previous steps. Does not include data of the current step in the onSubmit callback.\n* `next([data])`: Go to the next step. Optinionally pass data of the current step to make it available in `mergedData()`.\n* `previous()`: Go to the previous step.\n* `show(id)`: Show a specific step by id or index.\n* `setData(id, data)` Store data for the supplied step id, use this if you're using custom onSubmit handlers and use `show()` to skip steps based on the submitted data for example.\n* `isFirstStep([id])`: Omit the id argument to use the active step.\n* `isLastStep([id])`: Omit the id argument to use the active step.\n* `indexOf(id)`: Get the index of the specified step id.\n\nExample usage:\n```js\nTemplate.wizardStep2.events({\n  'click .back': function(e, template) {\n    e.preventDefault();\n    this.wizard.previous();\n  }\n});\n```\n\n\n## Using routers \u003ca name=\"routers\"\u003e\u003c/a\u003e\n\nIt's possible to bind the wizard to a router. Iron Router and Flow Router are supported by default.\nIf you're using a different router, it's easy to setup custom bindings.\n\n### Configuring a router\n\n* note that `Wizard` is only available in client code.\n\n1. First add the route name you want to use to your wizard instance.\n```\n{{\u003e wizard id=\"order-wizard\" route=\"order\" steps=steps}}\n```\n\n#### Iron Router\nFirst add the Wizard Iron Router package.\n```\nmeteor add forwarder:autoform-wizard-iron-router\n```\n\nEnable the router bindings.\n```js\nWizard.useRouter('iron:router');\n```\n\nAdd a new route to your router config, with the :step parameter.\n```js\nRouter.route('/order/:step', {name: 'order'});\n```\n\n#### Flow Router\nFirst add the Wizard Flow Router package.\n```\nmeteor add forwarder:autoform-wizard-flow-router\n```\n\nEnable the router bindings.\n```js\nWizard.useRouter('kadira:flow-router');\n```\n\nAdd a new route to your router config, with the :step parameter.\n```js\nFlowRouter.route('/order/:step', {name: 'order'});\n```\n\n### Custom router bindings\n\nIf you use a different router you can easily setup custom bindings.\nThis example will you show how to bind the wizard to Flow Router (meteorhacks:flow-router).\n\n```js\nWizard.registerRouter('kadira:flow-router', {\n  go: function(name, stepId) {\n    FlowRouter.go(name, this.getParams(stepId));\n  },\n  getParams: function(stepId) {\n    var route = Router.current()\n      , params = route.params || {};\n\n    return _.extend(params, {step: stepId});\n  },\n  getStep: function() {\n    return FlowRouter.getParam('step');\n  },\n  path: function(name, stepId) {\n    return FlowRouter.path(name, this.getParams(stepId));\n  }\n});\n\n```\n\nThen to enable Flow Router add the following line to your client code.\n\n```js\nWizard.useRouter('kadira:flow-router');\n```\n\n\n## Todo\n\n* Improve documentation\n* Write some tests\n* Probably more, just let me know or submit a pull request :)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforwarder%2Fmeteor-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforwarder%2Fmeteor-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforwarder%2Fmeteor-wizard/lists"}