Fork me on GitHub

Wizards

In addition to rendering forms, this library can also be used to render complex wizard workflows.

Wizards work by taking the root Panel components within a normal flat form, and turning those panels into separate pages that can be added to a workflow. You can also provide conditional logic on those panel components so that the pages are conditionally shown based on what is entered within the wizard flow.

The determination on whether a form is a wizard or not is based on the display property on the form schema like so.

{
  "title": "My Wizard",
  "type": "form",
  "display: "wizard",
  "components": [
    {
      "type": "panel",
      "title": "Page 1",
      "components": [
        ...
        ...
      ]
    },
    {
      "type": "panel",
      "title": "Page 2",
      "components": [
        ...
        ...
      ]
    }
  ]
}

You can create a new wizard just like you can a normal form.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdn.form.io/js/formio.embed.js"></script>
<div id="wizard"></div>

Formio.createForm(document.getElementById('wizard'), 'https://examples.form.io/wizard')
  .then(function(wizard) {
    wizard.on('nextPage', function(page) {
      console.log(page);
    });
    wizard.on('submit', function(submission) {
      console.log(submission);
    });
  });

<div id="wizard"></div>

Result

You can also add options when creating a form, the following options are supported:

  • breadcrumbSettings.clickable: true (default) determines if the breadcrumb bar is clickable or not
  • buttonSettings.show*(Previous, Next, Cancel): true (default) determines if the button is shown or not
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdn.form.io/js/formio.embed.js"></script>
<div id="wizardWithOptions"></div>

Formio.createForm(
  document.getElementById('wizardWithOptions'),
  'https://examples.form.io/wizard',
  {
    breadcrumbSettings: {clickable:false},
    buttonSettings: {showCancel: false}
  })
  .then(function(wizard) {
    wizard.on('nextPage', function(page) {
      console.log(page);
    });
    wizard.on('submit', function(submission) {
      console.log(submission);
    });
  });

<div id="wizardWithOptions"></div>

Result