Tutorial

Welcome to the meteor-wizard wiki!

Below is a quick run through to understand this package a little better and how to use it.

First we look at the {{> wizard }} template

<template name="basicWizard">
  {{> wizard id="basic-wizard" steps=steps}}
</template>

This template takes your steps and turn them into step based forms.

Schema = {};
Schema.information = new SimpleSchema(...);
Schema.confirm = new SimpleSchema(...);

Template.basicWizard.helpers({
  steps: function() {
    return [{
      id: 'information',
      title: 'Information',
      schema: Schema.information
    },{
      id: 'confirm',
      title: 'Confirm',
      schema: Schema.confirm,
      onSubmit: function(data, wizard) {
        // submit logic
      }
    }]
  }
});

Now we look at custom templates using {{#autoForm}} or {{>quickForm}}

Before we go ahead and start creating our forms, we have to first understand how {{> wizard }} behaves. If you have already created a bunch of step forms e.g. {{> stepOneForm }}, {{> stepTwoForm}} and {{> stepThreeForm}}, {{> wizard }} takes all the the 3 forms and display them consecutively based on the sequence in steps variable.

Example:

<template name="stepOneForm">
    {{>  quickform id="stepOneFormId" doc=step.data schema=step.schema}}
</template>

<template name="stepTwoForm">
 {{#autoForm id="stepTwoFormId" doc=step.data schema=step.schema}}
   {{> afQuickField name="foo" }}
   {{> wizardButtons }}
 {{/autoForm }}

<template name="stepThreeForm"}}
  {{#autoForm id="stepThreeFormId" doc=step.data schema=step.schema}}
    {{> afQuickField name="bar"}}
    {{> wizardButtons}}
  {{/autoForm}}
</template>

After defining your step templates, ensure that in your steps, you have accurately assigned the values for template, formId and schema in the steps properties.

Template.basicWizard.helpers({
  steps: function () {
    return [{
      id: 'dynamic-step1',
      title: 'Step 1',
      formId: 'stepOneFormId',
      template: 'stepOneForm',
      schema: Schemas.stepOneSchema
    }, {
      id: 'dynamic-step2',
      title: 'Step 2',
      schema: Schemas.stepTwoSchema,
      template: 'stepTwoForm',
      formId: 'stepTwoFormId',

    }, {
      id: 'dynamic-step3',
      title: 'Step 3',
      schema: Schemas.stepThreeSchema,
      template: 'stepThreeForm',
      formId: 'stepThreeFormId',
      onSubmit: function (data, wizard) {
        var self = this;
        console.log("this is submit");
        console.log(self);
      }
    }];
  }
});

Once you have defined those properties, simply call {{> wizard id="step-forms" steps=steps }} to see the forms.