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">
    <div id="app" class="myClass"></div>
  </div>
</div>

JavaScript

const def = {
  display: "form",
  "components": [{
      "label": "First Name",
      "applyMaskOn": "change",
      "tableView": true,
      "key": "firstName",
      "type": "textfield",
      "input": true
    },
    {
      "label": "Last Name",
      "applyMaskOn": "change",
      "tableView": true,
      "key": "lastName",
      "type": "textfield",
      "input": true
    },
    {
      "label": "SSN",
      "applyMaskOn": "change",
      "tableView": true,
      "key": "textField",
      "properties": {
        "pii": "true"
      },
      "type": "textfield",
      "input": true
    },
    {
      "label": "Drivers License",
      "applyMaskOn": "change",
      "tableView": true,
      "key": "driversLicense",
      "properties": {
        "pii": "true"
      },
      "type": "textfield",
      "input": true
    },
    {
      "label": "Passport",
      "applyMaskOn": "change",
      "tableView": true,
      "key": "driversLicense1",
      "properties": {
        "pii": "true"
      },
      "type": "textfield",
      "input": true
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
}
Formio.createForm(document.getElementById("app"), def).then((form) => {
  form.on('submit', function(submission) {
    splitOffPiiFromSubmission(submission);
    const responseId = await fetch('skyflowApi');
    submission.data.skyFlowResponseId = responseId;
    await fetch('formIoAPI');
  })
  
  form.on('initialize') => {
  makeSkyFlowGetRequest(data.skyFlowResponseId);
  form.component('ssn').setValue()
  })
})