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