VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
    <p>
      Custom buttons just use JavaScript, so you should just use the Fetch API to execute a GET request (there is also a "POST to URL" button option for other types of requests).
    </p>
    <div id="formio"></div>
  </div>
</div>

JavaScript

const wizardWithAllowPrevious = {
  type: "form",
  tags: [],
  components: [{
      title: "Page 1",
      label: "Page 1",
      type: "panel",
      key: "page1",
      components: [{
        label: "A",
        tableView: false,
        key: "a",
        type: "checkbox",
        input: true,
        defaultValue: false,
      }, ],
      input: false,
      tableView: false,
    },
    {
      title: "Page 2",
      label: "Page 2",
      type: "panel",
      key: "page2",
      components: [{
        label: "B",
        tableView: true,
        key: "b",
        type: "textfield",
        input: true,
      }, ],
      input: false,
      tableView: false,
    },
  ],
  title: "wizardWithAllowPreviousTest",
  display: "wizard",
};
Formio.createForm(document.getElementById("formio"), wizardWithAllowPrevious, {
  allowPrevious: false,
});