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 form = {
  "components": [{
      "label": "Text Field",
      "applyMaskOn": "change",
      "tableView": true,
      "key": "textField",
      "type": "textfield",
      "input": true
    },
    {
      "label": "Fetch Data",
      "action": "custom",
      "showValidations": false,
      "tableView": false,
      "key": "fetchData",
      "type": "button",
      "custom": "instance.loading = true; fetch('https://swapi.dev/api/planets/1/').then((res) => res.json()).then((res) => {\n  data['textField'] = res.name;\n  instance.root.redraw()\n});",
      "input": true
    }
  ],
}
Formio.createForm(document.getElementById('formio'), form, {
  noAlerts: true
})